createUserWithEmailAndPasswordやsignInWithEmailAndPasswordなど認証メソッドのまとめ

はじめに

Login関係で苦労したcreateUserWithEmailAndPasswordなどのことについて記載していきます。

苦労したこと

アプリ開発中にLoginしたユーザー情報がTBLに存在するかどうかを記載していました。
しかし、PWD設定する場合、ハッシュ化、認証管理やセッションの情報を記載するため、苦戦していました。

解決方法

そのさい、createUserWithEmailAndPasswordなどの使い方を見て、ソースに反映しました。

とくにcreateUserWithEmailAndPasswordはFirebase側でパスワードをハッシュ化するなどができるため、管理体制が楽になります。
TBLにもパスワードのカラムを存在しなくてもよくなるため、漏洩の心配はなくなります。
要は、PWD処理をまとめて行う便利なメソッドです。

Signup

import { useNavigate } from "react-router-dom";
import {
    createUserWithEmailAndPassword,
} from "firebase/auth";

import { supabase } from "../utils/supabase"
import { auth } from "../libs/firebase";

export const Signup: FC = memo(() => {
    const navigate = useNavigate();
    const { register, handleSubmit, formState: { errors } } = useForm();

    const onSubmit = handleSubmit(async (data) => {
        // Firebase Auth登録
        const userCredential = await createUserWithEmailAndPassword(
                    auth,
                    data.email,
                    data.password
                );

        const firebaseUser = userCredential.user;

        const register = await supabase.from("book-users").insert({ firebase_uid: firebaseUser.uid, email: firebaseUser.email});

        navigate("/home"); 
    });

    return (
        <>
            <h1>新規登録</h1>
            <form onSubmit={onSubmit}>
            <Stack gap="4" align="flex-start" maxW="sm">
                <Button type="submit" colorScheme="blue">
                    送信
                </Button>
            </Stack>
            </form>
            <Button onClick={() => navigate("/login")} type="submit" colorScheme="blue" gap="4"  maxW="sm">
                ログインへ戻る
            </Button>
        </>
    )
})

おわりに

Firebase authが認証サーバーの役割を果たすことを学びました。