Firebase

【Firebase】Authenticationでログイン機能を実装する

作成日：2022年02月11日

更新日：2022年02月12日

前回は、認証機能を設定するために、Authentication でユーザー登録しました。

【Firebase】Authenticationでユーザー登録する

今回は、Authentication でログイン機能を実装します。

まずは、ログインのためのフックを作成します。

先日作成した、useAuth.js 内のuseSignupをコピーし、useLogin を作成します。

jsx
export const useLogin = () => {
  const login = (email, password) => {
    createUserWithEmailAndPassword(fireauth, email, password)
      .then((res) => {
        console.log(res.user);
      })
      .catch((err) => {
        console.log(err.message);
      });
  };

  return { login };
};

Firebase でログインをするために、firebase/authのsignInWithEmailAndPasswordをインポートします。

jsx
import { signInWithEmailAndPassword } from "firebase/auth";

createUserWithEmailAndPasswordをsignInWithEmailAndPasswordに書き換えます。

jsx
export const useLogin = () => {
  const login = (email, password) => {
    signInWithEmailAndPassword(fireauth, email, password)
      .then((res) => {
        console.log(res.user);
      })
      .catch((err) => {
        console.log(err.message);
      });
  };

  return { login };
};

次に、ログイン画面を作成します。

Signup.js の内容をコピーし、Login用に編集します。

jsx
import React, { useState } from "react";
import { useLogin } from "../hooks/useAuth";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { login } = useLogin();

  const handleSubmit = (e) => {
    e.preventDefault();
    login(email, password);
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="sign">
        <div>
          <label>Email: </label>
          <input
            required
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label>Password: </label>
          <input
            required
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit" className="button">
          ログイン
        </button>
      </form>
    </div>
  );
};

export default Login;