Authentication (email, Google, Apple) in React Native - Build, Publish & Deploy

Build & Publish - Authentication (email, Google, Apple)

Performance Impact

Authentication processes like email login or social sign-ins (Google, Apple) involve network calls that can affect app responsiveness. Poorly handled, they may cause UI freezes or delays. However, these operations usually run asynchronously, so they should not block the main UI thread. Memory usage is generally low but depends on SDKs used. Battery impact is minimal if authentication is done efficiently and only when needed.

Optimization Tips

• Use asynchronous calls with proper loading indicators to keep UI responsive.
• Cache authentication tokens securely to avoid repeated logins.
• Lazy load SDKs for Google and Apple sign-in only when user initiates login.
• Minimize UI re-renders during authentication state changes using React Native hooks.
• Handle errors gracefully to avoid app crashes or freezes.

App Size and Startup Time

Including Google and Apple authentication SDKs increases app bundle size moderately. Google Sign-In SDK can add a few megabytes; Apple Sign-In is usually smaller. Email authentication typically uses lightweight libraries or backend APIs, so minimal size impact. To reduce startup time, defer loading these SDKs until needed rather than at app launch.

iOS vs Android Differences

• Apple Sign-In: Mandatory for apps offering third-party sign-in on iOS. Uses native Apple frameworks and requires entitlement setup.
• Google Sign-In: Available on both platforms but implemented with platform-specific SDKs. Android uses Google Play Services; iOS uses Google SDK.
• Email Authentication: Platform agnostic, usually handled via backend APIs.
• Code signing and permissions differ: iOS requires specific capabilities enabled; Android requires OAuth client IDs and SHA-1 keys.

Store Review Guidelines

• Apple App Store: Must support Apple Sign-In if offering third-party sign-in options (Apple HIG and App Store Review Guidelines).
• Privacy policies must clearly explain data usage and authentication methods.
• Secure user data and comply with GDPR and CCPA if applicable.
• Use secure network connections (HTTPS) for all authentication requests.
• Follow platform-specific UI guidelines for sign-in buttons and flows.

Self-Check

Your app takes 5 seconds to load the login screen. What's likely wrong?

• Loading authentication SDKs synchronously at startup instead of on demand.
• Blocking UI thread with network calls instead of using async methods.
• Lack of caching causing repeated token fetches.
• Heavy UI components rendering before authentication state is ready.

Key Result

Efficient asynchronous handling and on-demand loading of authentication SDKs ensure smooth user experience and meet store requirements, while mindful integration minimizes app size and startup delays.

Practice

1. Which method is commonly used to authenticate users with their email and password in React Native apps?

easy

A. Using Firebase Authentication's signInWithEmailAndPassword method

B. Directly storing passwords in AsyncStorage

C. Using Google Sign-In without email

D. Using Apple Sign-In only

Solution

1. Step 1: Understand email/password authentication

   Email/password authentication requires a secure backend or service like Firebase to verify credentials.

2. Step 2: Identify the correct method in React Native

   Firebase provides signInWithEmailAndPassword to handle this securely and easily.

3. Final Answer:

   Using Firebase Authentication's signInWithEmailAndPassword method -> Option A

4. Quick Check:

   Email/password auth = Firebase signInWithEmailAndPassword [OK]

Hint: Email login usually uses Firebase's signInWithEmailAndPassword [OK]

Common Mistakes:

• Storing passwords locally in AsyncStorage
• Confusing social sign-in with email/password
• Using Apple Sign-In for email login only

2. Which of the following is the correct syntax to import Google Sign-In in a React Native app?

easy

A. import { GoogleSignin } from '@react-native-google-signin/google-signin';

B. import GoogleSignIn from 'react-native-google-signin';

C. import Google from 'google-signin-react-native';

D. import { GoogleSignIn } from 'react-native-google-auth';

Solution

1. Step 1: Recall the official Google Sign-In package

   The official package for React Native Google Sign-In is '@react-native-google-signin/google-signin'.

2. Step 2: Check the correct import syntax

   The correct import uses named import { GoogleSignin } from that package.

3. Final Answer:

   import { GoogleSignin } from '@react-native-google-signin/google-signin'; -> Option A

4. Quick Check:

   Google Sign-In import = import { GoogleSignin } from '@react-native-google-signin/google-signin'; [OK]

Hint: Official Google Sign-In uses named import from '@react-native-google-signin/google-signin' [OK]

Common Mistakes:

• Using default import instead of named import
• Wrong package names
• Confusing Google Sign-In with Apple Sign-In imports

3. What will be the output of this React Native code snippet when a user successfully signs in with Google?

async function onGoogleSignIn() {
  try {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    console.log(userInfo.user.email);
  } catch (error) {
    console.log('Error:', error.message);
  }
}

medium

A. Throws a syntax error due to missing await

B. Does nothing because signIn is not awaited

C. Logs 'Error: user cancelled the login flow' always

D. Logs the signed-in user's email to the console

Solution

1. Step 1: Analyze the async function flow

   The function awaits Google Play services check and then awaits signIn, which returns user info.

2. Step 2: Understand console.log output

   On success, userInfo.user.email is logged, so the user's email appears in the console.

3. Final Answer:

   Logs the signed-in user's email to the console -> Option D

4. Quick Check:

   Successful Google sign-in logs email [OK]

Hint: Await signIn returns user info; console logs email [OK]

Common Mistakes:

• Forgetting to await signIn causing unresolved promise
• Assuming error always occurs
• Confusing userInfo structure

4. You wrote this code to sign in with Apple but get an error: "Apple Authentication is not configured properly." What is the likely cause?

import { appleAuth } from '@invertase/react-native-apple-authentication';

async function onAppleSignIn() {
  try {
    const appleAuthRequestResponse = await appleAuth.performRequest({
      requestedOperation: appleAuth.Operation.LOGIN,
      requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
    });
    console.log(appleAuthRequestResponse);
  } catch (error) {
    console.error(error);
  }
}

medium

A. Missing await keyword before performRequest

B. Apple Sign-In is not enabled in the Apple Developer portal for the app

C. requestedScopes array is empty

D. The import statement is incorrect

Solution

1. Step 1: Understand Apple Sign-In setup requirements

   Apple Sign-In requires enabling the capability in Apple Developer portal for your app's bundle ID.

2. Step 2: Identify the cause of configuration error

   The error indicates the app is not configured properly, usually meaning the capability is missing or misconfigured.

3. Final Answer:

   Apple Sign-In is not enabled in the Apple Developer portal for the app -> Option B

4. Quick Check:

   Configuration error = missing Apple Sign-In capability [OK]

Hint: Check Apple Developer portal for Sign-In capability [OK]

Common Mistakes:

• Assuming code import is wrong
• Ignoring Apple Developer portal setup
• Forgetting to add requested scopes

5. You want to implement a unified sign-in button that lets users choose between Email, Google, or Apple sign-in in React Native. Which approach best handles this scenario?

hard

A. Use a single button that calls all sign-in methods simultaneously

B. Use only Google Sign-In and ignore others for simplicity

C. Create separate buttons for each method and handle their success/failure states individually

D. Store user passwords locally to switch between methods

Solution

1. Step 1: Understand user experience for multiple sign-in options

   Users expect clear choices; separate buttons let them pick Email, Google, or Apple sign-in explicitly.

2. Step 2: Manage success and failure states separately

   Each method has different flows and error handling, so handling them individually is best practice.

3. Final Answer:

   Create separate buttons for each method and handle their success/failure states individually -> Option C

4. Quick Check:

   Separate buttons + individual handling = best practice [OK]

Hint: Separate buttons for each sign-in method handle flows cleanly [OK]

Common Mistakes:

• Trying to call all sign-ins at once
• Ignoring Apple or Email sign-in options
• Storing passwords insecurely on device