Firebaseに作成したアプリにメールアドレスとパスワードでサインアップするReactのコードを解説

import { mailRegistration } from "../service/firebase/registration";
import { useAuthContext } from "../context/AuthContext";
import { useNavigate } from "react-router-dom";
import Title from "./Title";

import { Button, Input } from "@mui/material";
import AppRegistrationIcon from "@mui/icons-material/AppRegistration";
import SendIcon from "@mui/icons-material/Send";


const SignUp = () => {
  const { user } = useAuthContext();
  const navigate = useNavigate();
  const handleSubmit = (e) => {  //　こちらの関数を下記に解説しています。
    e.preventDefault();
    const [email, password] = e.target.elements;
    mailRegistration(email.value, password.value).then(
      (ret) => ret && navigate("/")
    );
  };

  return (
    <div>
      <Title />
      <h2>ユーザー登録 {user && user.email}</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">メールアドレス: </label>
          <Input
                  id="email"
                  name="email"
                  placeholder="email"
                  type="email"
          />
        </div>
        <div>
          <label htmlFor="password">パスワード: </label>
          <Input
                  id="password"
                  name="password"
                  placeholder="password"
                  type="password"
          />
          <p>パスワードは６文字以上にしてください。</p>
        </div>
        <div>
          <Button variant="outlined" startIcon={<AppRegistrationIcon />} type="submit">
            登録
          </Button>　//　こちらの<Button>コンポーネントを下記に解説しています。
        </div>
      </form>
      <Button
        variant="outlined"
        onClick={() => navigate("/login")}
        style={{ margin: "0 20px" }}
        endIcon={<SendIcon />}
      >
        Login画面へ
      </Button>
    </div>
  );
};

export default SignUp;

import { createUserWithEmailAndPassword, sendEmailVerification } from "firebase/auth";
import { auth } from "./firebase"
import { issueMsg } from "../common/issueMsg";

const mailRegistration = async (email, password) => {
  try {
    await createUserWithEmailAndPassword(  // この関数を下記に解説しています。
      auth,
      email,
      password
    );
    await sendEmailVerification(auth.currentUser); // この関数を下記に解説しています。
    issueMsg("認証のためのメールを送信しました。メールのURLをクリックして当該メールを認証してください。");
    return true;
  } catch (error) {
    if (error.code === 'auth/invalid-email') {
      issueMsg("正しいメールアドレスの形式で入力してください。");
    } else if (error.code === 'auth/weak-password') {
      issueMsg("パスワードは6文字以上を設定する必要があります。");
    } else if (error.code === 'auth/email-already-in-use') {
      issueMsg("そのメールアドレスは登録済みです。");
    } else {
      issueMsg(`登録時にエラーが発生しました。${error.code}`);
    }
    console.error(error);
    return false;
  }
}

export { mailRegistration } ;

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