Vue.js中Firebase Auth新用户流程网络AuthError问题排查

问题背景 #

在本地开发的Vue.js应用中使用Firebase Authentication实现用户认证，预期新用户注册成功后自动发送邮箱验证邮件，遇到以下两个问题：

1. 使用async/await实现时，功能随机生效，即使邮件发送成功也无法执行到console.log( "Verification email sent" );，控制台抛出FirebaseError: Firebase: A network AuthError (auth/network-request-failed)错误。
2. 改用Promise方式实现后功能正常，但return true无法触发预设的自动跳转，必须手动调用window.location.href完成跳转。

问题1：为什么async/await方式会出现网络AuthError？ #

• FirebaseUI的signInSuccessWithAuthResult回调原生不支持异步函数（async/await）。当你用async函数作为回调时，FirebaseUI会默认认为回调已同步执行完成，可能在sendEmailVerification的异步网络请求还未结束时，就关闭登录弹窗或清理Auth相关上下文，导致后续请求失败，抛出网络错误。
• 本地开发环境如果使用非localhost的自定义域名且未配置HTTPS，Firebase Auth的部分操作会受限，可能触发网络请求失败。
• 错误处理逻辑存在漏洞：sendEmailVerification抛出错误时，catch块仅打印错误但无返回值，FirebaseUI收到undefined后可能干扰流程，导致Auth上下文异常。

问题2：为什么Promise方式中return true无法触发预设跳转？ #

• then回调里的return true是该回调函数的返回值，而非signInSuccessWithAuthResult回调本身的返回值。进入新用户分支时，signInSuccessWithAuthResult没有直接返回预期的true（实际返回undefined），FirebaseUI无法识别，因此不会触发自动跳转。
• 非新用户分支直接同步返回true，FirebaseUI能正确接收并执行跳转逻辑。

修复方案 #

方案1：适配async/await的写法

手动控制跳转，同时阻止FirebaseUI的默认逻辑：

signInSuccessWithAuthResult: async function (authResult, redirectUrl) {
  if (authResult.additionalUserInfo.isNewUser) {
    console.log("New user status: ", authResult.additionalUserInfo.isNewUser);
    try {
      await authResult.user.sendEmailVerification();
      console.log("Verification email sent");
      // 手动跳转到成功页面
      window.location.href = redirectUrl;
    } catch (error) {
      console.error("Error sending verification email: ", error);
    }
    // 返回false阻止FirebaseUI的默认跳转
    return false;
  } else {
    console.log("User is not new");
    return true;
  }
}

方案2：优化Promise写法

保持Promise逻辑，手动处理跳转：

signInSuccessWithAuthResult: function (authResult, redirectUrl) {
  if (authResult.additionalUserInfo.isNewUser) {
    console.log("New user status: ", authResult.additionalUserInfo.isNewUser);
    authResult.user.sendEmailVerification()
      .then(() => {
        console.log("Verification email sent");
        window.location.href = redirectUrl;
      })
      .catch(error => {
        console.error("Error sending verification email: ", error);
      });
    // 返回false，避免FirebaseUI执行默认逻辑
    return false;
  } else {
    console.log("Flow resumed");
    return true;
  }
}

内容的提问来源于stack exchange，提问作者Robert Brax