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.