How to Implement Phone Authentication in Firebase

1import { initializeApp } from 'firebase/app'
2import { getAuth, RecaptchaVerifier } from 'firebase/auth'
3
4const app = initializeApp({
5  apiKey: 'YOUR_API_KEY',
6  authDomain: 'YOUR_PROJECT.firebaseapp.com',
7  projectId: 'YOUR_PROJECT_ID',
8})
9
10const auth = getAuth(app)
11
12// Attach invisible reCAPTCHA to the submit button
13const recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', {
14  size: 'invisible',
15  callback: () => {
16    // reCAPTCHA solved — will proceed with signInWithPhoneNumber
17  },
18})

1import { signInWithPhoneNumber } from 'firebase/auth'
2
3async function sendCode(phoneNumber: string) {
4  try {
5    const confirmationResult = await signInWithPhoneNumber(
6      auth,
7      phoneNumber,
8      recaptchaVerifier
9    )
10    // Store confirmationResult to use when verifying the code
11    return confirmationResult
12  } catch (error: any) {
13    if (error.code === 'auth/invalid-phone-number') {
14      console.error('Invalid phone number format. Use E.164: +1234567890')
15    } else if (error.code === 'auth/too-many-requests') {
16      console.error('Too many attempts. Try again later.')
17    }
18    throw error
19  }
20}

1async function verifyCode(
2  confirmationResult: any,
3  code: string
4) {
5  try {
6    const userCredential = await confirmationResult.confirm(code)
7    const user = userCredential.user
8    console.log('Signed in as:', user.uid)
9    console.log('Phone:', user.phoneNumber)
10    return user
11  } catch (error: any) {
12    if (error.code === 'auth/invalid-verification-code') {
13      console.error('Incorrect code. Please try again.')
14    } else if (error.code === 'auth/code-expired') {
15      console.error('Code expired. Request a new one.')
16    }
17    throw error
18  }
19}

1import { linkWithPhoneNumber } from 'firebase/auth'
2
3async function linkPhone(phoneNumber: string) {
4  const currentUser = auth.currentUser
5  if (!currentUser) throw new Error('User must be signed in first')
6
7  const confirmationResult = await linkWithPhoneNumber(
8    currentUser,
9    phoneNumber,
10    recaptchaVerifier
11  )
12  // After user enters the code:
13  // const credential = await confirmationResult.confirm(code)
14  return confirmationResult
15}

1import { onAuthStateChanged, connectAuthEmulator } from 'firebase/auth'
2
3// Connect to emulator in development
4if (process.env.NODE_ENV === 'development') {
5  connectAuthEmulator(auth, 'http://127.0.0.1:9099')
6}
7
8// Listen for auth state changes
9onAuthStateChanged(auth, (user) => {
10  if (user) {
11    console.log('User signed in:', user.phoneNumber)
12  } else {
13    console.log('User signed out')
14  }
15})