Firebase Auth - createUserWithEmailAndPassword() - 在验证电子邮件之前阻止登录

Question

我希望使用 createUserWithEmailAndPassword() 在 Firebase Auth 中创建一个用户帐户 - 无需登录用户。我希望用户首先验证电子邮件地址。直接登录用户会导致许多不需要的副作用。

/signup 页面有以下代码 - 我希望用户在注册后停留在 /signup 页面上，以便能够看到注册消息。

firebase.auth().createUserWithEmailAndPassword(data.email, data.password)
.then((user)=> {
  //Send email verification link
  user.sendEmailVerification()
  //Show message - "Your account was created - please verify using link in email"
  handleStatusMessage(AUTH_SUCCESS)
})
.catch((error)=>{...})

app.js 具有以下登录和重定向处理程序

//handle login and redirect
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    if(!user.emailVerified){
      //Exit if email is not verified
      console.log('auth.js exit')
      //Line 7
    }
    store.dispatch(setInitialStore()).then(() => {
      renderApp()
      //Brings user to start page
      if (history.location.pathname === '/login') {
        history.push('/start')
      }
    })
} else {
  renderApp()
  //Brings user to /login or /verifyEmail page when logged out
  if(!history.location.pathname.includes('/verifyEmail')){
    history.push('/login')
  }  
}

我的问题是：

1. 用户在成功注册后被重定向，除非我在第 7 行取消执行

2. 如果我在第 7 行取消执行，用户在离开 /signup 时会卡住

3. 注销用户会导致 onAuthStateChanged() 触发两次 - 重定向用户

如何在成功创建帐户后将用户保留在 /signup 页面上，同时仍允许用户导航到 /login /verifyEmail 位置？最好处于注销状态。

Answer 1

我最终做的是添加检查用户何时登录和在注册期间注销。

注册页面.js

firebase.auth().createUserWithEmailAndPassword(data.email, data.password)
.then((user)=> {
  //Login is triggered --> line 4 in app.js
  user.sendEmailVerification() //Send email verification
  handleStatusMessage(AUTH_SUCCESS) //Show success message
  firebase.auth().signOut() //Logout is triggered --> line 16 in app.js
})
.catch((error)=>{ ... }

应用程序.js

//handle login and redirect
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    //** line 4 ** EXIT if logged in from /signup
    if(!isEmailVerified && history.location.pathname.includes('/signup')){
      return
    }
    store.dispatch(setInitialStore()).then(() => {
      renderApp()
      //Brings user to start page
      if (history.location.pathname === '/login') {
        history.push('/start')
      }
    })
} else {
  //** line 16 ** EXIT if logged out from /signup
  if(history.location.pathname.includes('/signup')){
    return
  }
  renderApp()
  //Brings user to /login or /verifyEmail page when logged out
  if(!history.location.pathname.includes('/verifyEmail')){
    history.push('/login')
  }  
}

我真的希望createUserWithEmailAndPassword()有一个选项能够自动发送电子邮件验证电子邮件，而不是登录用户以避免这种猫捉老鼠的游戏代码。:)

与createUserWithEmailAndPasswordEmailVerificationRequired() 类似的单独方法自动发送电子邮件链接并且不让用户登录也可以使用；)

Answer 2

Firebase 身份验证功能会createUserWithEmailAndPassword在成功创建帐户后自动登录用户（不需要电子邮件验证）。

如果您需要在没有自动登录的情况下验证新用户注册的电子邮件地址，那么另一种选择是电子邮件链接身份验证。

您可以使用 Firebase 身份验证通过向用户发送包含链接的电子邮件来登录用户，他们可以点击该链接进行登录。在此过程中，还会验证用户的电子邮件地址。

通过电子邮件登录有很多好处：

• 低摩擦注册和登录。
• 降低跨应用程序重复使用密码的风险，这会破坏甚至精心选择的密码的安全性。
• 在验证用户身份的同时验证用户是否是电子邮件地址的合法所有者的能力。
• 用户只需要一个可访问的电子邮件帐户即可登录。不需要电话号码或社交媒体帐户的所有权。
• 用户无需提供（或记住）密码即可安全登录，这在移动设备上可能很麻烦。
• 以前使用电子邮件标识符（密码或联合身份验证）登录的现有用户可以升级为仅使用电子邮件登录。例如，忘记密码的用户仍然可以登录，而无需重置密码。

用户通过电子邮件链接身份验证成功创建帐户后，您可以提供创建密码和链接到现有帐户的选项。