无法使用Firebase中的电子邮件链接重新进行身份验证

Question

我在我的web应用程序中设置了电子邮件链接登录，它工作得很好。但是，在执行某个操作之前，我需要重新验证用户身份。

我正在使用以下代码重新进行身份验证：

let credential = firebase.auth.EmailAuthProvider.credentialWithLink(userEmail, window.location.href);

firebase.auth().currentUser.reauthenticateWithCredential(credential).then(function (usercred: any) {
     console.log('Reauthentication test successful.');
}).catch(function (error: any) {
     console.log('Reauthentication test failed.');
});

但是，每次凭据都会抛出一个错误：

code: "auth/argument-error"
message: "Invalid email link!"

即使我尝试更改URL，也是如此。url是在控制台中授权的，并且是https (我一开始是在localhost上测试的，我想这可能是问题所在)。

有什么想法吗？

Answer 1

我也有同样的问题，documentation在这个过程中有点模糊。我不想使用已经存在的UI解决方案()，所以我必须弄清楚它。

以下是文档片段：

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

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

代码window.location.href假设您正在通过电子邮件链接登录打开一个链接

• Server side / Function
• or向from the client
• also发送了一个很好的flow Passing State in Email Actions

的好读数

它与其他电子邮件链接过程没有太大不同，在这些过程中，您必须触发从客户端或服务器发送的电子邮件。

我会将页面转到handle the other modes (密码重置，...)以及这个特定的逻辑来处理新的身份验证或只是在页面加载时重新身份验证。

下面是一个基于documentation的Angular (Typescript)的例子

// app.component.ts

ngAfterViewInit() {
  const currentUrl = window.location.href;
  if (isSignInWithEmailLink(this.authService.auth, currentUrl)) {
    const isLoggedIn = !!this.user?.uid;
    let email = isLoggedIn
      ? this.user?.email
      : window.localStorage.getItem("emailForSignIn");
    if (!email) {
      email = window.prompt("Please provide your email for confirmation");
    }
    if (email && validateEmail(email)) {
      try {
        // --> important !

        if (isLoggedIn) {
           const credential = EmailAuthProvider.credentialWithLink(email,currentUrl);
            await reauthenticateWithCredential(this.user, credential)
        } else {
             await signInWithEmailLink(
            this.authService.auth,
            email,
            currentUrl
          );
        }
        window.localStorage.removeItem("emailForSignIn");
        this.router.navigateByUrl("/login");
        // console.log(userCredential);
      } catch (e) {
        console.log(e);
        // Some error occurred, you can inspect the code: error.code
        // Common errors could be invalid email and invalid or expired OTPs.
        this.toastr.error(getTranslation(e.code), "Error");
      }
    } else {
      this.toastr.error("Please enter a valid email", "Error");
    }
  }
}