求助：Firebase手机号认证后设置密码的代码实现，支持后续手机号密码登录

Nice question! This is a common flow for apps that want the convenience of phone verification for onboarding, plus the familiarity of password-based login for returning users. Here's how to implement it using Firebase, with code examples for web (the logic translates easily to mobile too):

Firebase's Phone Authentication doesn't natively support password linking, so we'll work around this by linking the phone-authenticated user to an Email/Password authenticated user. We'll create a unique dummy email using the user's phone number (e.g., +1234567890@yourappdomain.com) to associate with the password. This way, returning users can log in with their phone number + password by converting the phone number back to that dummy email under the hood.

First, make sure you've enabled both Phone Authentication and Email/Password Authentication in your Firebase project's Authentication dashboard.

1. First-Time Onboarding: Phone Verification → Set Password #

1.1 Send Phone Verification Code #

First, we'll handle sending the verification code to the user's phone:

// Initialize Firebase (replace with your project config)
import { initializeApp } from "firebase/app";
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";

const firebaseConfig = {
  // Your Firebase config here
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// Function to trigger phone verification
async function sendVerificationCode(phoneNumber) {
  // Create reCAPTCHA verifier (add a div with id "recaptcha-container" to your HTML)
  const recaptchaVerifier = new RecaptchaVerifier("recaptcha-container", {}, auth);
  
  try {
    const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
    // Store the confirmation result temporarily to use when verifying the code
    sessionStorage.setItem("confirmationResult", JSON.stringify(confirmationResult));
    alert("Verification code sent to your phone!");
  } catch (error) {
    console.error("Failed to send code:", error);
    // Reset reCAPTCHA if there's an error
    recaptchaVerifier.render().then(widgetId => grecaptcha.reset(widgetId));
  }
}

1.2 Verify Code & Link Password #

Once the user enters the verification code, we'll verify it, then let them set a password and link the two auth methods:

import { linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Function to verify code and set a password
async function verifyCodeAndSetPassword(verificationCode, newPassword) {
  const confirmationResult = JSON.parse(sessionStorage.getItem("confirmationResult"));
  
  try {
    // Verify the code and get the phone-authenticated user
    const phoneUserCredential = await confirmationResult.confirm(verificationCode);
    const phoneUser = phoneUserCredential.user;

    // Create a dummy email from the phone number (replace "yourappdomain.com" with your own)
    const sanitizedPhone = phoneUser.phoneNumber.replace("+", "");
    const dummyEmail = `+${sanitizedPhone}@yourappdomain.com`;

    // Create an Email/Password credential
    const emailCredential = EmailAuthProvider.credential(dummyEmail, newPassword);
    // Link the phone user with the email/password credential
    await linkWithCredential(phoneUser, emailCredential);

    alert("Password set successfully! You can now log in with your phone number and password.");
    sessionStorage.removeItem("confirmationResult");
  } catch (error) {
    console.error("Error setting password:", error);
    if (error.code === "auth/email-already-in-use") {
      alert("This phone number already has a password associated with it.");
    }
  }
}

2. Returning User Login: Phone Number + Password #

For returning users, we'll convert their phone number to the dummy email we created, then use Firebase's standard email/password login:

import { signInWithEmailAndPassword } from "firebase/auth";

// Function to log in with phone number and password
async function loginWithPhoneAndPassword(phoneNumber, password) {
  // Convert phone number to the dummy email
  const sanitizedPhone = phoneNumber.replace("+", "");
  const dummyEmail = `+${sanitizedPhone}@yourappdomain.com`;

  try {
    const userCredential = await signInWithEmailAndPassword(auth, dummyEmail, password);
    const user = userCredential.user;

    // Optional: Double-check that the user has a phone number linked (extra security)
    if (!user.phoneNumber) {
      throw new Error("This account isn't linked with a phone number.");
    }

    alert("Login successful!");
    // Redirect to your app's main screen
  } catch (error) {
    console.error("Login failed:", error);
    if (error.code === "auth/user-not-found" || error.code === "auth/wrong-password") {
      alert("Invalid phone number or password.");
    }
  }
}

• Customize the dummy email domain: Replace yourappdomain.com with your app's actual domain to avoid conflicts with real user emails.
• Handle edge cases: Add error handling for scenarios like expired verification codes, password strength requirements, and duplicate accounts.
• Mobile adaptation: For iOS/Android, the logic is nearly identical — use Firebase's native SDKs to handle phone verification, then link the email/password credential to the phone user.
• Security: Consider adding a step to re-verify the phone number if the user ever wants to change their password.

内容的提问来源于stack exchange，提问作者Ayush Raj