使用Firebase反应登录功能

时间:2020-05-26 05:30:26

标签: reactjs firebase-authentication

我已经在我的React Web App上成功实现了Google登录,并希望将其扩展为包括使用电子邮件和密码登录。我是React的新手,很乐意就我可能做错的事情提供建议。

export function SignIn() {


  const signIn = async() => {
   console.log("print this to test"); 
    var email = document.getElementById("login").elements.namedItem("email");
    var password = document.getElementById("login").elements.namedItem("password");

    const credential = await firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
      console.log("error");
    });

    const { uid, email } = credential.user;
    db.collection('users').doc(uid).set({ email }, { merge: true });

  };

  return (
    <form onSubmit={signIn} id="login">
        <label>
          Email
          <input
            name="email"
            type="email"
            placeholder="Email"
          />
        </label>
        <label>
          Password
          <input
            name="password"
            type="password"
            placeholder="Password"
          />
        </label>
        <button className="btn btn-primary" onClick={signIn}>
      Sign In
    </button>
      </form>

  );
}

看来我无法正确访问这些变量。知道我在哪里错了吗?感谢帮助。

1 个答案:

答案 0 :(得分:0)

您未获取密码字段的值。

问题所在:-

password = document.getElementById("login").elements.namedItem("email"); // <---------

更改为

password = document.getElementById("login").elements.namedItem("password");