如何使用reactjs实现一个Firebase电子邮件验证过程

202 阅读1分钟

我试图在我的本地使用reactjs实现一个Firebase电子邮件验证过程。我已经实现了createUserWithEmailAndPassword默认函数和sendEmailVerification函数。一旦一个新用户被创建,他们就会收到一封确认邮件,但如果用户试图验证电子邮件,我们就会在signInWithEmailLink中得到以下错误的回应。

我们已经尝试在localhost和'https://localhost'中使用ssl,但还是同样的问题。

错误

{code: 'auth/argument-error', message: 'Invalid email link!', a: null}

signin.js

import React, { useRef } from 'react'
import { auth } from '../firebase';
import './Signin.css'
const Signin = () => {
    const emailRef = useRef(null);
    const passwordRef = useRef(null);
    const signUp = e => {
        e.preventDefault();
        auth.createUserWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(userCredential => {
            userCredential.user.sendEmailVerification();
            console.log(userCredential,'userCredential')
            //auth.signOut();
            return userCredential;            
        }).catch(err => {
            console.log(err)
        })
    }
    const signIn = e => {
        e.preventDefault();
        auth.signInWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    const confirm = e =>{
        const locationCode = window.location.href;
        e.preventDefault();
        auth.signInWithEmailLink(emailRef.current.value, locationCode)
        .then((result) => {
        console.log(result,'result')
        })
        .catch((err) => {
         console.log(err,'err')
        });
    }
    return (
        <div className="signin">
            <form action="">
                <h1>Sign in</h1>
                <input ref={emailRef} type="email" />
                <input ref={passwordRef} type="password" />
                <button onClick={signIn}>Sign in </button>
                <button onClick={confirm}>confirm </button>
                <h6>Not yet register? <span onClick={signUp} className="signin__link">Sign up</span></h6>
            </form>
        </div>
    )
}

export default Signin