Authentication (email, Google, Apple) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable for the email input.

React Native

const [email, [1]] = useState('');

Drag options to blanks, or click blank then click option'

AupdateEmail

BemailSet

CsetEmail

DchangeEmail

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that doesn't start with 'set' for the updater function.

Using the same name for both state and updater.

The useState hook returns a pair: the current state value and a function to update it. The convention is to name the updater as set + state name.

2fill in blank

medium

Complete the code to handle email input change in a TextInput component.

React Native

<TextInput value={email} onChangeText=[1] />

Drag options to blanks, or click blank then click option'

Aemail

BsetEmail

ChandleEmail

DupdateEmail

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state variable instead of the updater function.

Passing a function name that is not defined.

The onChangeText prop expects a function that receives the new text and updates the state. Passing setEmail directly works because it matches that signature.

3fill in blank

hard

Fix the error in the sign-in function to correctly await the Firebase email sign-in method.

React Native

async function signIn() {
  try {
    const user = [1] auth().signInWithEmailAndPassword(email, password);
    console.log('User signed in:', user);
  } catch (error) {
    console.error(error);
  }
}

Drag options to blanks, or click blank then click option'

Aawait

Breturn

Casync

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Not using await, causing user to be a promise instead of the user object.

Using 'then' without proper chaining.

The signInWithEmailAndPassword method returns a promise. To get the user object, you must await the promise inside an async function.

4fill in blank

hard

Fill both blanks to correctly import and use the Google Sign-In button component.

React Native

import { [1] } from '@react-native-google-signin/google-signin';

function GoogleButton() {
  return <[2] onPress={handleGoogleSignIn} />;
}

Drag options to blanks, or click blank then click option'

AGoogleSigninButton

BGoogleSignInButton

CGoogleButton

DGoogleSignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing like 'GoogleSignInButton' or 'GoogleButton'.

Importing a non-existent component.

The correct component name exported by the package is GoogleSigninButton. It is imported and used with the exact same name.

5fill in blank

hard

Fill all three blanks to correctly configure Apple authentication button with required props.

React Native

import AppleAuthentication from '@invertase/react-native-apple-authentication';

function AppleSignIn() {
  return (
    <AppleAuthentication.AppleButton
      buttonType=[1]
      buttonStyle=[2]
      onPress=[3]
    />
  );
}

Drag options to blanks, or click blank then click option'

AAppleButtonType.SIGN_IN

BAppleButtonType.SIGN_UP

CAppleButtonStyle.BLACK

DhandleAppleSignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong enum values for buttonType or buttonStyle.

Passing a non-function or missing onPress handler.

The AppleButton requires a buttonType and buttonStyle from AppleButtonType and AppleButtonStyle enums, and an onPress handler function.

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