Firebaseで会員制サイトを作る方法

import { createContext, ReactNode, useCallback, useContext, useLayoutEffect, useState } from "react";
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, UserCredential } from "firebase/auth";
import { auth } from "../../firebase";

type AuthContextType = {
	loginUserId: string | null;
	authLoading: boolean;
	signup: (email: string, password: string) => Promise<UserCredential>;
	login: (email: string, password: string) => Promise<UserCredential>;
};

const AuthContext = createContext<AuthContextType>({} as AuthContextType);

export const useAuth = () => {
	return useContext(AuthContext);
};

export const AuthProvider = (props: { children: ReactNode }) => {
	const [loginUserId, setLoginUserId] = useState<string | null>(null);
	const [authLoading, setAuthLoading] = useState(true);

	const signup = useCallback((email: string, password: string) => {
		return createUserWithEmailAndPassword(auth, email, password);
	}, []);

	const login = useCallback((email: string, password: string) => {
		return signInWithEmailAndPassword(auth, email, password);
	}, []);

	useLayoutEffect(() => {
		onAuthStateChanged(auth, (user) => {
			setAuthLoading(true);
			if (user) {
				setLoginUserId(user.uid);
			}
			setAuthLoading(false);
		});
	}, []);

	return (
		<AuthContext.Provider
			value={{
				loginUserId,
				authLoading,
				signup,
				login,
			}}
		>
			{!authLoading && props.children}
		</AuthContext.Provider>
	);
};

const user = auth.currentUser;

import { memo, VFC } from "react";
import { Route, RouteProps, Redirect } from "react-router-dom";
import { useAuth } from "./AuthContext";

export const PrivateRoute: VFC<RouteProps> = memo(
	({ component: RouteComponent, ...options }) => {
		const { loginUserId } = useAuth();
		return loginUserId ? (
			<Route {...options} component={RouteComponent} />
		) : (
			<Redirect to="/login" />
		);
	}
);

import { memo, VFC } from "react";
import { Route, Switch } from "react-router-dom";
import { AuthProvider } from "../components/auth/AuthContext";
import { PrivateRoute } from "../components/auth/PrivateRoute";
import { Home } from "../components/page/Home";
import { Login } from "../components/page/Login";
import { SignUp } from "../components/page/SignUp";
import { Result } from "../components/page/Result";
import { Book } from "../components/page/Book";

export const Router: VFC = memo(() => {
	return (
		<AuthProvider>
			<Switch>
				<Route exact path="/" component={Home} />
				<Route exact path="/login" component={Login} />
				<Route exact path="/signup" component={SignUp} />
				<Route exact path="/result" component={Result} />
				<PrivateRoute exact path="/book" component={Book} />
			</Switch>
		</AuthProvider>
	);
});

const onClickSignUp = () => {
	signup(email, password)
		.then(() => history.push("/result"))
		.catch((error) => {
			switch (error.code) {
				case "auth/email-already-in-use":
					setErrorMessage(
						"メールアドレスが既に使用されています。別のメールアドレスを入力してください。"
					);
					break;
				case "auth/invalid-email":
					setErrorMessage("メールアドレスの形式が不正です。");
					break;
				case "auth/weak-password":
					setErrorMessage("パスワードは6文字以上で入力してください。");
					break;
				default:
					setErrorMessage(
						"会員の登録が失敗しました。再度お試しいただくか、お問い合わせフォームよりご連絡ください。"
					);
			}
		});
};

const onClickLogin = () => {
	login(email, password)
		.then(() => history.push("/book"))
		.catch(() => {
			setErrorMessage(
				"ログインに失敗しました。メールアドレスまたはパスワードが違います。"
			);
		});
};

import { db } from "../../firebase";
import { ref, set, push, child, onValue } from "firebase/database";

const onClickRegister = () => {
	const key = push(child(ref(db), "books")).key;
	set(ref(db, "books/" + key), {
		title: title,
		author: author,
	});
};

{
  "books": {
    "1": {
      "author": "田中太郎",
      "title": "動物図鑑"
    },
    "2": {
      "author": "高橋次郎",
      "title": "海の生物"
    }
  }
}

const [bookList, setBookList] = useState<BookList>({});

useEffect(() => {
	const reference = ref(db, "books/");
	onValue(reference, (snapshot) => {
		const data = snapshot.val();
		if (data != null) {
			setBookList(data);
		}
	});
}, []);

type BookList = {
	[uid: string]: {
		title: string;
		author: string;
	};
};

onValue(reference, (snapshot) => {
	const data = snapshot.val();
	if (data != null) {
		setBookList(snapshot.val());
	}
},
{ onlyOnce: true });

<table className="book-table">
	<thead>
		<tr>
			<th>タイトル</th>
			<th>著者</th>
		</tr>
	</thead>
	<tbody>
		{Object.keys(bookList).map((uid) => (
			<tr key={uid}>
				<td>{bookList[uid].title}</td>
				<td>{bookList[uid].author}</td>
			</tr>
		))}
	</tbody>
</table>