Phone number authentication in Firebase - Step-by-Step Execution

Process Flow - Phone number authentication

User enters phone number

↓

Send verification code

↓

User receives code

↓

User enters code

↓

Verify code with Firebase

↓

User logged in

The user inputs their phone number, receives a code, enters it, and Firebase verifies it to log them in or show an error.

Execution Sample

Firebase

const auth = getAuth();
const phoneNumber = '[phone]';
const appVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
  .then(confirmationResult => {
    // User enters code here
  });

This code sends a verification code to the user's phone using Firebase Authentication.

Process Table

Step	Action	Input/Condition	Firebase Response	Next Step
1	User enters phone number	[phone]	Phone number accepted	Send verification code
2	Send verification code	Phone number valid	Code sent to [phone]	Wait for user to enter code
3	User enters code	User inputs '123456'	Code received	Verify code
4	Verify code	Code '123456' matches	Verification success	User logged in
5	Verify code	Code '123456' does not match	Verification failed	Show error message
6	End	User logged in or error shown	Process complete	Stop

💡 Process stops after successful login or error message shown due to failed verification.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
phoneNumber	undefined	[phone]	[phone]	[phone]	[phone]	[phone]
verificationCode	undefined	undefined	undefined	123456	123456	123456
verificationStatus	undefined	undefined	undefined	pending	success/failure	success/failure
userLoggedIn	false	false	false	false	true/false	true/false

Key Moments - 3 Insights

Why do we need to send a verification code after entering the phone number?

Sending the code confirms the phone number belongs to the user. See execution_table step 2 where Firebase sends the code after accepting the number.

What happens if the user enters the wrong code?

Firebase verification fails and an error message is shown. Refer to execution_table step 5 where verification fails and the process stops.

Why is the RecaptchaVerifier needed?

It prevents abuse by verifying the user is human before sending the code. This is part of Firebase's security, shown in the execution_sample code.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Firebase response after the user enters the phone number?

A Code sent to the phone number

B Phone number accepted

C Verification success

D Verification failed

💡 Hint

Check execution_table row 1 under 'Firebase Response'

At which step does the user enter the verification code?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at execution_table row 3 under 'Action'

If the verification code does not match, what is the next step?

A User logged in

B Send verification code again

C Show error message

D User enters phone number again

💡 Hint

See execution_table row 5 under 'Next Step'

Concept Snapshot

Phone number authentication with Firebase:
1. User enters phone number.
2. Firebase sends a verification code.
3. User inputs the code.
4. Firebase verifies the code.
5. On success, user logs in; on failure, error shown.
RecaptchaVerifier protects against abuse.

Full Transcript

Phone number authentication in Firebase starts when the user enters their phone number. Firebase sends a verification code to that number. The user then inputs the received code. Firebase checks if the code matches. If it does, the user is logged in. If not, an error message appears. A RecaptchaVerifier is used to ensure the request is from a real person. This process helps secure user login using their phone number.

Practice

1. What is the main purpose of phone number authentication in Firebase?

easy

A. To sign in users using SMS codes without passwords

B. To store phone numbers in the database

C. To send marketing messages to users

D. To verify email addresses

Solution

1. Step 1: Understand and identify the main purpose of phone number authentication

   It allows users to sign in by receiving a code on their phone via SMS instead of using a password. The main goal is to authenticate users securely and easily using their phone number and SMS code.

2. Final Answer:

   To sign in users using SMS codes without passwords -> Option A

3. Quick Check:

   Phone number authentication = SMS sign-in [OK]

Hint: Phone auth uses SMS codes to sign in, not emails [OK]

Common Mistakes:

• Confusing phone auth with email verification
• Thinking it stores phone numbers only
• Assuming it sends marketing SMS

2. Which Firebase method is used to start phone number authentication by sending an SMS code?

easy

A. signInWithEmailAndPassword()

B. signInWithPhoneNumber()

C. sendPasswordResetEmail()

D. verifyPhoneNumber()

Solution

1. Step 1: Identify the method for phone auth SMS sending and exclude unrelated methods

   Firebase provides signInWithPhoneNumber() to send the SMS code to the user. signInWithEmailAndPassword() is for email login, sendPasswordResetEmail() is for password reset, and verifyPhoneNumber() is not a Firebase client method.

2. Final Answer:

   signInWithPhoneNumber() -> Option B

3. Quick Check:

   Send SMS code = signInWithPhoneNumber() [OK]

Hint: Phone auth starts with signInWithPhoneNumber() [OK]

Common Mistakes:

• Using email sign-in methods for phone auth
• Confusing password reset with phone auth
• Assuming verifyPhoneNumber() is a Firebase method

3. What will happen if you try to sign in with phone number authentication without setting up reCAPTCHA verifier in Firebase web?

medium

A. The phone number will be stored but no SMS sent

B. The SMS code will be sent without any issues

C. The user will be signed in automatically

D. Firebase will throw an error requiring reCAPTCHA verification

Solution

1. Step 1: Understand reCAPTCHA role and predict behavior without it in Firebase phone auth

   Firebase requires reCAPTCHA on web to prevent abuse and verify the user is human before sending SMS. If reCAPTCHA is not set up, Firebase will block the SMS sending and throw an error demanding reCAPTCHA verification.

2. Final Answer:

   Firebase will throw an error requiring reCAPTCHA verification -> Option D

3. Quick Check:

   Missing reCAPTCHA = error thrown [OK]

Hint: Web phone auth needs reCAPTCHA or it errors [OK]

Common Mistakes:

• Assuming SMS sends without reCAPTCHA
• Thinking user signs in automatically
• Believing phone number stores without SMS

4. Given this code snippet, what is the error?

const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
const userCredential = await confirmationResult.confirm(code);

medium

A. phoneNumber should be an email string

B. Using confirm() instead of verify() method

C. Missing reCAPTCHA verifier initialization

D. code variable should be a number, not string

Solution

1. Step 1: Check parameters and identify common mistake in signInWithPhoneNumber code

   The third parameter must be a valid reCAPTCHA verifier instance (appVerifier) initialized properly. If appVerifier is not initialized or missing, the code will fail even if confirm() is called correctly.

2. Final Answer:

   Missing reCAPTCHA verifier initialization -> Option C

3. Quick Check:

   Missing appVerifier init = error [OK]

Hint: Always initialize reCAPTCHA verifier before signInWithPhoneNumber() [OK]

Common Mistakes:

• Confusing confirm() with verify() method
• Passing email instead of phone number
• Assuming code must be number type

5. You want to implement phone number authentication in a React app using Firebase. Which sequence correctly describes the steps to sign in a user?

hard

A. Initialize reCAPTCHA verifier -> call signInWithPhoneNumber() -> send SMS -> confirm code -> sign in user

B. Call signInWithPhoneNumber() -> confirm code -> initialize reCAPTCHA verifier -> sign in user

C. Confirm code -> initialize reCAPTCHA verifier -> call signInWithPhoneNumber() -> sign in user

D. Sign in user -> initialize reCAPTCHA verifier -> call signInWithPhoneNumber() -> confirm code

Solution

1. Step 1: Outline the correct sequence for implementing phone auth

   Initialize reCAPTCHA verifier first to prevent abuse and required before sending SMS. Call signInWithPhoneNumber() next to send the code to the user's phone. Confirm the code received by user using confirmationResult.confirm(code) to verify and sign in the user.

2. Final Answer:

   Initialize reCAPTCHA verifier -> call signInWithPhoneNumber() -> send SMS -> confirm code -> sign in user -> Option A

3. Quick Check:

   reCAPTCHA -> send SMS -> confirm code = correct flow [OK]

Hint: Always start with reCAPTCHA, then send SMS, then confirm code [OK]

Common Mistakes:

• Calling signInWithPhoneNumber before reCAPTCHA setup
• Confirming code before SMS sent
• Trying to sign in before confirmation