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.