Реагировать на функцию входа в систему с помощью Firebase

Question

Я успешно реализовал вход через Google в своем веб-приложении React и хотел бы расширить его, включив в него вход по электронной почте и паролю. Я новичок в 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>

  );
}

Похоже, я не могу правильно получить доступ к этим переменным. Есть идеи, где я здесь ошибаюсь? Цените помощь.

Answer 1

Вы не получаете значение поля пароля.

Проблема здесь: -

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

Измените его на

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