Phone number authentication in Firebase - Mini Project: Build & Apply

Phone Number Authentication with Firebase

📖 Scenario: You are building a simple app that lets users sign in using their phone numbers. This method sends a code to the user's phone, which they enter to verify their identity.

🎯 Goal: Create a Firebase phone number authentication flow that sends a verification code to the user's phone and verifies it.

📋 What You'll Learn

Initialize Firebase app with config

Set up reCAPTCHA verifier

Send verification code to a phone number

Verify the code entered by the user

💡 Why This Matters

🌍 Real World

Phone number authentication is widely used in apps for easy and secure user sign-in without passwords.

💼 Career

Understanding Firebase phone authentication is valuable for building secure mobile and web apps in many development roles.

1

Initialize Firebase App

Create a variable called firebaseConfig with the exact keys: apiKey, authDomain, projectId, storageBucket, messagingSenderId, and appId with these exact string values: "your-api-key", "your-auth-domain", "your-project-id", "your-storage-bucket", "your-messaging-sender-id", "your-app-id". Then initialize Firebase app using initializeApp(firebaseConfig) and assign it to app.

Firebase

# Create firebaseConfig object with the exact keys and values
# Initialize Firebase app and assign to app
# Your code here

Need a hint?

Use const firebaseConfig = { ... } with the exact keys and values. Then call initializeApp(firebaseConfig) and assign it to app.

2

Set Up reCAPTCHA Verifier

Create a variable called auth by calling getAuth(app). Then create a variable called recaptchaVerifier by calling new RecaptchaVerifier('recaptcha-container', { size: 'invisible' }, auth).

Firebase

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);

// Create auth and recaptchaVerifier variables
# Your code here

Need a hint?

Use getAuth(app) to get the auth object. Then create recaptchaVerifier with new RecaptchaVerifier('recaptcha-container', { size: 'invisible' }, auth).

3

Send Verification Code

Create a function called sendVerificationCode that takes a parameter phoneNumber. Inside it, call signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier) and assign the result to a variable called confirmationResult. Return confirmationResult.

Firebase

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', { size: 'invisible' }, auth);

// Create async function sendVerificationCode(phoneNumber)
// Call signInWithPhoneNumber and assign to confirmationResult
// Return confirmationResult
# Your code here

Need a hint?

Define an async function sendVerificationCode(phoneNumber). Use await signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier) and return the result.

4

Verify the Code Entered by User

Create an async function called verifyCode that takes parameters confirmationResult and code. Inside it, call confirmationResult.confirm(code) and assign the result to userCredential. Return userCredential.

Firebase

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', { size: 'invisible' }, auth);

async function sendVerificationCode(phoneNumber) {
  const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
  return confirmationResult;
}

// Create async function verifyCode(confirmationResult, code)
// Call confirmationResult.confirm(code) and assign to userCredential
// Return userCredential
# Your code here

Need a hint?

Define an async function verifyCode(confirmationResult, code). Use await confirmationResult.confirm(code) and return the result.