如何在Next.js中结合Firebase设置OTP过期时间？

Firebase Authentication的短信OTP过期时长是由服务器端固定控制的（默认5分钟），官方未提供公开API允许开发者自定义这个时长，这也是你查阅官方文档找不到解决方案的原因。以下是两种可行的替代处理方案：

方案1：客户端手动实现过期提示与重新发送逻辑 #

虽然无法修改服务器端的OTP过期时间，但可以在客户端层面模拟过期逻辑，同时处理验证时的过期错误：

const appVerifier = window.recaptchaVerifier;
const phoneNumber = "+91" + mobile_no;
let otpExpiryTimer = null;
// 与Firebase默认过期时长保持一致，也可自定义更短时长
const OTP_EXPIRY_DURATION = 5 * 60 * 1000;

signInWithPhoneNumber(auth, phoneNumber, appVerifier).then((confirmationResult) => {
    window.confirmationResult = confirmationResult;
    console.log("OTP SENT SUCCESSFULLY...");

    // 启动过期定时器
    otpExpiryTimer = setTimeout(() => {
        alert("OTP已过期，请重新获取");
        window.confirmationResult = null;
        // 可在此重置OTP输入框等状态
    }, OTP_EXPIRY_DURATION);

}).catch((error) => {
    console.log("OTP NOT SENT BECAUSE OF ===>", error);
});

// OTP验证函数示例
const verifyOTP = async (inputCode) => {
    if (!window.confirmationResult) {
        alert("请先获取OTP");
        return;
    }
    try {
        const authResult = await window.confirmationResult.confirm(inputCode);
        // 验证成功，清除定时器
        clearTimeout(otpExpiryTimer);
        console.log("登录成功", authResult.user);
        // 处理后续登录逻辑
    } catch (error) {
        // 捕获OTP过期错误
        if (error.code === 'auth/expired-action-code') {
            alert("OTP已过期，请重新获取");
            window.confirmationResult = null;
        } else {
            console.log("OTP验证失败", error);
        }
    }
};

方案2：自定义OTP逻辑（进阶） #

如果需要完全掌控OTP的过期时长、生成规则，可以绕过Firebase内置的短信OTP，自行实现完整流程：

• 生成自定义OTP（如6位随机数字）
• 将OTP与用户手机号关联，存储到Firebase Firestore/Realtime Database，同时设置过期时间（可使用Firestore的TTL自动删除政策，或手动添加过期时间戳字段）
• 通过第三方短信服务（如Twilio、阿里云短信）发送OTP
• 用户输入OTP后，查询数据库验证OTP是否有效且未过期
• 验证通过后，生成Firebase自定义令牌完成用户登录

这种方式复杂度更高，但能实现完全自定义的OTP控制逻辑。

内容的提问来源于stack exchange，提问作者Kishan Pinjani