iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Phone Auth

By · Reviewed & last updated · Part of Firebase Tutorial

Phone authentication issues an SMS containing a six-digit code, then exchanges that code for a Firebase ID token. It is the right fit for marketplaces, ride-hailing, and any product where email feels like friction. The cost is real — SMS is metered — so always pair it with reCAPTCHA, App Check, or both to keep abuse off your bill.

Phone sign-in for web and Android

EXAMPLE
// ===== Web (Firebase JS SDK v10) =====
import { initializeApp } from 'firebase/app';
import {
  getAuth, signInWithPhoneNumber, RecaptchaVerifier,
  initializeAuth, browserLocalPersistence,
} from 'firebase/auth';
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';

const app = initializeApp({/* config */});

// App Check protects the Auth endpoint from abuse and bots
initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(process.env.RECAPTCHA_SITE_KEY),
  isTokenAutoRefreshEnabled: true,
});

const auth = initializeAuth(app, { persistence: browserLocalPersistence });

// 1) Invisible reCAPTCHA — solved silently for most legitimate users
const verifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
  size: 'invisible',
});

// 2) Send the code (E.164 format: +61... for AU)
const confirmation = await signInWithPhoneNumber(auth, '+61412345678', verifier);
// store confirmation in component state to use after user types the code

// 3) Verify the code the user entered
const code = '123456';
const credential = await confirmation.confirm(code);
console.log('signed in as', credential.user.uid);

// ===== Android (Kotlin) =====
// auth.setLanguageCode("en")
// PhoneAuthProvider.verifyPhoneNumber(
//   PhoneAuthOptions.newBuilder(auth)
//     .setPhoneNumber("+61412345678")
//     .setTimeout(60L, TimeUnit.SECONDS)
//     .setActivity(this)
//     .setCallbacks(object : PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
//       override fun onVerificationCompleted(c: PhoneAuthCredential) { auth.signInWithCredential(c) }
//       override fun onVerificationFailed(e: FirebaseException) { /* show error */ }
//       override fun onCodeSent(id: String, token: PhoneAuthProvider.ForceResendingToken) {
//         // store id, prompt user for the code
//       }
//     })
//     .build()
// )

// ===== Backend: revoke a session if the phone number changes =====
// admin.auth().revokeRefreshTokens(uid)

Why it matters

Always require App Check + a phone-region restriction in the Firebase console — without them, an attacker can burn through your monthly SMS quota in minutes by spamming sign-in attempts from a script. The defaults are not cost-safe.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
import { signInWithPhoneNumber, RecaptchaVerifier } from 'firebase/auth';
const verifier = new RecaptchaVerifier(auth, 'recaptcha', { size: 'invisible' });
const confirm = await signInWithPhoneNumber(auth, '+61400000000', verifier);
await confirm.confirm(code);
Try it Yourself »

Discussion

Loading…