Firebaseに作成したアプリにログインするためのReactのコードを解説

import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { isSignInWithEmailLink } from "firebase/auth";

import { Input, Button } from "@mui/material";
import LoginIcon from "@mui/icons-material/Login";
import EmailIcon from "@mui/icons-material/Email";

import loginFirebase from "../service/firebase/loginFirebase";
import sendEmailLink from "../service/firebase/sendEmailLink";
import { auth, googleProvider } from "../service/firebase/firebase";
import submitPasswordResetEmail from "../service/firebase/submitPasswordResetEmail";
import Title from "./Title";

const Login = () => {
  const navigate = useNavigate();
  let goHome = false;

  if (isSignInWithEmailLink(auth, window.location.href)) {
    let email = window.localStorage.getItem("emailForSignIn");
    if (!email) {
      email = window.prompt("メールアドレスを入力してください");
    }
    loginFirebase("mailLink", email).then((ret) => ret && (goHome = true));
  }
  const handleLogin = (e) => {
    e.preventDefault();
    const [loginEmail, loginPassword] = e.target.elements;
    loginFirebase("email", loginEmail.value, loginPassword.value).then(
      (ret) => ret && navigate("/")
    );
  };

  const handleMailLink = (e) => {
    e.preventDefault();
    const [emailLink] = e.target.elements;
    sendEmailLink(emailLink.value);
  };

  const handlePasswordReset = (e) => {
    e.preventDefault();
    const [resetEmail] = e.target.elements;
    submitPasswordResetEmail(resetEmail.value);
  };

  const handleGoogleLogin = async (e) => {
    loginFirebase("google", googleProvider).then((ret) => ret && navigate("/"));
  };

  return (
    <>
      {goHome ? (
        navigate("/")
      ) : (
        <div>
          <Title />
          <h2>ログイン</h2>
          <div className="login-type">
            <h3>メールでログイン</h3>
            <form onSubmit={handleLogin}>
              <div>
                <label htmlFor="email">メールアドレス: </label>
                <Input
                  id="email"
                  name="email"
                  placeholder="email"
                  type="email"
                />
              </div>
              <div>
                <label htmlFor="password">パスワード: </label>
                <Input
                  type="password"
                  id="password"
                  name="password"
                  placeholder="password"
                />
              </div>
              <div style={{ margin: "5px 0" }}>
                <Button
                  variant="outlined"
                  startIcon={<LoginIcon />}
                  type="submit"
                >
                  ログイン
                </Button>
              </div>
            </form>
            <form onSubmit={handleMailLink}>
              メールリンクによるログインはこちらをクリック
              <div>
                <label htmlFor="emailLink">メールアドレス: </label>
                <Input
                  type="email"
                  id="emailLink"
                  name="emailLink"
                  placeholder="email"
                />
              </div>
              <div style={{ margin: "5px 0" }}>
                <Button
                  variant="outlined"
                  endIcon={<EmailIcon />}
                  type="submit"
                >
                  メール送信
                </Button>
              </div>
            </form>
            <form onSubmit={handlePasswordReset}>
              パスワードを忘れた方はパスワードリセットのメールを送信します。
              <div>
                <label htmlFor="passwordRest">メールアドレス: </label>
                <Input
                  type="email"
                  id="passwordRest"
                  name="passwordRest"
                  placeholder="email"
                />
              </div>
              <div style={{ margin: "5px 0" }}>
                <Button
                    variant="outlined"
                    endIcon={<EmailIcon />}
                    type="submit"
                >メール送信
                </Button>
              </div>
            </form>
            <div>
              ユーザー登録は<Link to={"/signup"}>こちら</Link>から
            </div>
          </div>
          <div className="login-type">
            <h3>Googleでログイン</h3>
            <img
              onClick={handleGoogleLogin}
              src={`${process.env.PUBLIC_URL}/btn_google_signin_light_focus_web.png`}
              alt="Googlでログインのアイコン"
            />
          </div>
        </div>
      )}
    </>
  );
};

export default Login;

import { signInWithEmailAndPassword, signInWithEmailLink, signInWithPopup } from "firebase/auth";
import { auth } from "./firebase";
import { issueMsg } from "../common/issueMsg";

const loginFirebase = async (type,loginProvider, password = null) => {
  if (type === 'email' ){ // ここからメールアドレスとパスワードでログインする処理
    try {
      await signInWithEmailAndPassword(
        auth,
        loginProvider,
        password
      );
      return true;
    } catch (error) {
      if (error.code === 'auth/invalid-email') {
        issueMsg('正しいメールアドレスを入力してください');
      } else if (error.code === 'auth/user-not-found') {
        issueMsg('当該メールアドレスは、ユーザー登録がされていません。');
      } else if (error.code === 'auth/wrong-password') {
        issueMsg('パスワードが不正です');
      } else if (error.code === 'auth/too-many-requests') {
        issueMsg('パスワードの入力不正が規定回数を超えました。');
      } else if (error.code === 'auth/user-disabled') {
        issueMsg('ユーザが無効になっています。');
      } else {
        issueMsg('ログインで不正が発生しました。',error.code);
      }
      console.error(error);
      return false;
    }
  } else if(type === 'mailLink') {
    try {
      await signInWithEmailLink(auth, loginProvider, window.location.href);
    } catch(error) {
      issueMsg('メール認証ログインに失敗しました',error.code)
    }
  } else if(type === 'google') {
    try{
      await signInWithPopup(auth, loginProvider);
    } catch(error) {
      if (error.code === 'auth/popup-closed-by-user') {
        issueMsg('GoogleIdでのログインがキャンセルされました。');
      } else {
        console.log(error.code);
        alert(error.message);
      }
    }
  }
}

export default loginFirebase;

SRC
│  App.css
│  App.js
│  App.test.js
│  index.css
│  index.js
│  reportWebVitals.js
│  service-worker.js
│  serviceWorkerRegistration.js
│  setupTests.js
│
├─components
│  │  Home.js
│  │  HomeChild.js
│  │  Login.js
│  │  PrivateRoute.js
│  │  PublicRoute.js
│  │  SignUp.js
│  │  Title.js
│  │
│  └─styles
│          portal.css
│
├─context
│      AuthContext.js
│
└─service
    ├─authenticationProcess
    │      changePassword.js
    │      delUser.js
    │
    ├─common
    │      issueMsg.js
    │
    └─firebase
            firebase.js
            getCredential.js
            loginFirebase.js
            registration.js
            sendEmailLink.js
            submitPasswordResetEmail.js