Firebase phone auth with an OTP screen

Use it in Next.js

app/login/page.tsx

"use client";
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { RecaptchaVerifier, signInWithPhoneNumber, type ConfirmationResult } from "firebase/auth";
import { StepUpGate } from "@/components/StepUpGate";
import { auth } from "@/lib/firebase";

export default function PhoneLoginPage() {
  const router = useRouter();
  const box = useRef<HTMLDivElement>(null);
  const verifier = useRef<RecaptchaVerifier | null>(null);
  const [phone, setPhone] = useState("");
  const [confirmation, setConfirmation] = useState<ConfirmationResult | null>(null);
  const [error, setError] = useState("");

  async function sendCode(number: string) {
    setError("");
    // a fresh invisible reCAPTCHA for every send, so a retry or a resend never reuses a spent one
    verifier.current?.clear();
    const el = document.createElement("div");
    box.current!.replaceChildren(el);
    verifier.current = new RecaptchaVerifier(auth, el, { size: "invisible" });
    try {
      setConfirmation(await signInWithPhoneNumber(auth, number, verifier.current));
    } catch {
      setError("We couldn't send a code. Use the full number with the country code, like +40 712 345 678.");
    }
  }

  return (
    <>
      {confirmation ? (
        <StepUpGate
          title="Check your phone"
          description={`Enter the 6-digit code we texted to ${phone}.`}
          successTitle="You're signed in"
          successDescription="Opening your dashboard."
          onVerify={async (code) => {
            try {
              await confirmation.confirm(code);
              return true;
            } catch {
              return false; // the cells shake and show "That code didn't match"
            }
          }}
          onResend={() => void sendCode(phone)}
          onCancel={() => setConfirmation(null)}
          onVerified={() => router.push("/dashboard")}
        >
          {/* whatever should sit blurred behind the code card */}
          <div className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white/40">Your dashboard</div>
        </StepUpGate>
      ) : (
        <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
          <form
            onSubmit={(e) => {
              e.preventDefault();
              void sendCode(phone);
            }}
            className="grid w-80 gap-3"
          >
            <label htmlFor="phone" className="text-sm text-white/70">Phone number</label>
            <input id="phone" type="tel" autoComplete="tel" required placeholder="+40 712 345 678" value={phone}
              onChange={(e) => setPhone(e.target.value)}
              className="rounded-lg bg-white/10 px-3 py-2 outline-none focus:ring-2 focus:ring-[#C6F432]" />
            <button className="rounded-lg bg-[#C6F432] px-3 py-2 font-medium text-black">Text me a code</button>
            {error ? <p role="alert" className="text-sm text-red-400">{error}</p> : null}
          </form>
        </main>
      )}
      <div ref={box} />
    </>
  );
}

import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Reuse the app on hot reload instead of initializing it twice.
export const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
export const auth = getAuth(app);