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.