Authentication (email, Google, Apple) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Email Authentication UI Behavior

What will happen when the user taps the 'Login' button with empty email and password fields in this React Native component?

React Native

import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (!email || !password) {
      Alert.alert('Error', 'Email and password are required');
    } else {
      Alert.alert('Success', 'Logging in...');
    }
  };

  return (
    <View>
      <TextInput placeholder='Email' value={email} onChangeText={setEmail} />
      <TextInput placeholder='Password' value={password} onChangeText={setPassword} secureTextEntry />
      <Button title='Login' onPress={handleLogin} />
    </View>
  );
}

A An alert pops up saying 'Error: Email and password are required'.

B The app crashes with a runtime error.

C An alert pops up saying 'Success: Logging in...'.

D Nothing happens when the button is tapped.

💡 Hint

Check the condition inside the handleLogin function that checks if email or password is empty.

The handleLogin function checks if either email or password is empty. If so, it shows an alert with the message 'Email and password are required'. Since both fields are empty, option A is correct.

🧠 Conceptual

intermediate

Google Sign-In Token Usage

After a user successfully signs in with Google in a React Native app, what is the main purpose of the ID token received from Google?

A To refresh the user's Google password automatically.

B To authenticate the user on your backend server securely.

C To display the user's email on the screen.

D To log the user out of their Google account.

💡 Hint

Think about why your app backend needs a token from Google.

The ID token is a secure token that proves the user has authenticated with Google. Your backend server uses it to verify the user's identity safely. Displaying email or logging out are not the token's main purpose.

❓ lifecycle

advanced

Apple Sign-In Button Behavior on iOS

In a React Native app using Apple Sign-In, what happens if the user cancels the sign-in process after tapping the Apple Sign-In button?

A The app receives an error indicating the user cancelled the sign-in.

B The app automatically retries the sign-in process.

C The app crashes due to unhandled promise rejection.

D The app signs the user in anonymously.

💡 Hint

Consider how the Apple Sign-In API communicates cancellation.

When the user cancels Apple Sign-In, the API returns an error indicating cancellation. The app should handle this gracefully. It does not retry automatically or crash if handled properly.

📝 Syntax

advanced

Correct Google Sign-In Hook Usage

Which option correctly uses the React Native Google Sign-In hook to get the user's email after sign-in?

React Native

import { useGoogleSignIn } from '@react-native-google-signin/google-signin';

function MyComponent() {
  const { signIn } = useGoogleSignIn();

  const handleGoogleLogin = async () => {
    try {
      const userInfo = await signIn();
      // Get user email here
      const email = ???;
      console.log(email);
    } catch (error) {
      console.error(error);
    }
  };
}

A const email = userInfo.profile.email;

B const email = userInfo.email;

C const email = userInfo.user.email;

D const email = userInfo.getEmail();

💡 Hint

Check the structure of the userInfo object returned by signIn().

The userInfo object has a 'user' property containing user details including 'email'. Accessing userInfo.user.email is correct. Other options do not match the object structure.

🔧 Debug

expert

Debugging Apple Sign-In Token Expiry

A React Native app using Apple Sign-In sometimes fails to authenticate because the token is expired. Which approach fixes this issue?

A Use the Google Sign-In token instead of Apple ID token.

B Store the token indefinitely and reuse it for all sessions.

C Ignore token expiry and proceed with authentication anyway.

D Request a new Apple ID token each time the user signs in, instead of reusing old tokens.

💡 Hint

Tokens have limited lifetime and must be refreshed.

Apple ID tokens expire after a short time. The app must request a fresh token each sign-in to authenticate successfully. Reusing old tokens or ignoring expiry causes failures.

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