Firebase Web端手机号OTP注册实现及用户附加信息采集方案

1. 是否存在独立的手机号注册API #

Firebase Auth 没有提供类似signInWithEmailAndPassword对应注册方法的signupWithPhoneNumber接口。
手机号验证的流程本身同时覆盖注册、登录两个场景：

• 当用户输入的手机号从未在当前Firebase项目完成过OTP校验，第一次验证通过时会自动创建新的用户账号，即完成注册
• 当输入的手机号已经绑定过已有账号，OTP校验通过后会直接登录对应账号

你不需要为注册、登录写两套流程，现有signInWithPhoneNumber+OTP确认的逻辑已经可以同时支持两种场景。如果需要区分新老用户，在OTP验证成功的回调里读取result.additionalUserInfo.isNewUser字段即可，值为true代表是首次注册的新用户，false代表是老用户登录。

2. 自定义用户信息（姓名、地址等）的存储方案 #

根据存储的内容和使用场景，有两种成熟实现方式：

方案1：使用Auth内置字段存储轻量信息 #

如果只需要存少量基础字段（比如显示名、头像链接），可以直接调用Auth提供的updateProfile方法写入用户资料，注意Auth内置字段容量有限，不适合存大量业务数据。
使用时先从firebase/auth导入方法，在OTP验证成功的回调里调用即可：

import { updateProfile } from "firebase/auth";

// 你原有的OTP提交逻辑
x.confirm(code)
  .then(async (result) => {
    const user = result.user;
    const isNewUser = result.additionalUserInfo.isNewUser;
    if (isNewUser) {
      // 替换成你实际采集到的用户姓名等信息
      await updateProfile(user, {
        displayName: "用户提交的姓名",
        photoURL: "用户头像地址"
      })
    }
    console.log("登录成功", user);
  })

如果要存权限类字段（比如用户角色、是否为管理员），可以通过Admin SDK设置自定义Claims，这类字段总大小不能超过1000字节，不适合存业务数据。

方案2：使用Firestore/实时数据库存储业务数据（推荐） #

姓名、地址这类需要频繁读写、可能做查询筛选的业务数据，更推荐单独存储到Firebase Cloud Firestore或者Realtime Database中，用用户的uid作为文档唯一ID做关联。
实现逻辑：

• 在手机号提交表单中提前增加姓名、地址等输入项，和手机号一同采集
• OTP验证通过后，判断如果是新用户，就把采集到的自定义信息写入数据库对应用户的文档

示例代码（以Firestore为例）：

// 先导入Firestore相关方法，确保你已经初始化了db实例
import { doc, setDoc, serverTimestamp } from "firebase/firestore";
import { db } from "../../firebase/config";

x.confirm(code)
  .then(async (result) => {
    const user = result.user;
    const isNewUser = result.additionalUserInfo.isNewUser;
    if (isNewUser) {
      // 写入用户自定义信息到users集合，文档ID和用户uid一致
      await setDoc(doc(db, "users", user.uid), {
        phone: user.phoneNumber,
        name: "用户提交的姓名",
        address: "用户提交的地址",
        createTime: serverTimestamp()
      })
    }
    console.log("登录成功", user);
  })

后续需要读取用户信息时，直接拿当前登录用户的uid查询users集合下对应文档即可。

现有代码的注意点 #

• 你当前的手机号长度校验逻辑有问题：if (phone >= 10)是把输入的手机号值和数字10做大小比较，会出现校验失效，应该改成判断字符串长度：if (phone?.length === 10)
• 不要把recaptchaVerifier、confirmationResult直接挂在window对象上，容易出现全局变量污染、实例重复创建的问题，最好用React的useRef存储这类实例，每次重新发送验证码前记得清空已有的recaptcha实例，避免重复渲染报错。
• 手机号输入框不建议用type="number"，会出现数字格式化、前导0丢失的问题，改成type="tel"更合适。

内容的提问来源于stack exchange，提问作者Arjav Sethi