1import { initializeApp } from "firebase/app";
2//↓追加
3import { getAuth } from "firebase/auth";
4
5const firebaseConfig = {
6  //略
7};
8
9const app = initializeApp(firebaseConfig);
10//↓追加
11export const auth = getAuth(app);

1npm i react-firebase-hooks
2# or
3yarn i react-firebase-hooks
4# or
5pnpm i react-firebase-hooks

1"use client";
2import { auth } from "@/firebase";  //パスは必要に応じて調節してください
3import { ref, set } from "firebase/database";
4import { useRouter } from "next/navigation";  // ←next/routerではない
5import { useState } from "react";
6import {
7  useCreateUserWithEmailAndPassword,
8  useSignInWithEmailAndPassword,
9} from "react-firebase-hooks/auth";
10
11export default function LoginPage() {
12  const [email, setEmail] = useState("");
13  const [password, setPassword] = useState("");
14  const [signInWithEmailAndPassword, user, loginLoading, error] =
15    useSignInWithEmailAndPassword(auth);
16  const [createUserWithEmailAndPassword, newUser, loading] =
17    useCreateUserWithEmailAndPassword(auth);
18  const [isLoading, setIsLoading] = useState(false);
19  const router = useRouter();
20  if (user) {
21    router.push("/");
22  }
23  return (
24    <form className="flex flex-col p-2 border rounded gap-2">
25      <div>
26        <input
27          className="w-full focus:outline-none focus:border-b border-blue-700"
28          type="text"
29          placeholder="email"
30          defaultValue={email}
31          onChange={(e) => setEmail(e.target.value)}
32          readOnly={isLoading}
33        />
34      </div>
35      <div>
36        <input
37          className="w-full focus:outline-none focus:border-b  border-blue-700"
38          type="password"
39          placeholder="password"
40          onChange={(e) => setPassword(e.target.value)}
41          readOnly={isLoading}
42        />
43      </div>
44      <div>{error && <p>{error.message}</p>}</div>
45      <button
46        type="submit"
47        className="bg-blue-100 hover:bg-blue-200 p-2 rounded"
48        onClick={async (e) => {
49          e.preventDefault();
50          setIsLoading(true);
51          await signInWithEmailAndPassword(email, password);
52          setIsLoading(false);
53        }}
54        disabled={isLoading}
55      >
56        ログイン{loginLoading && "中"}
57      </button>
58      <p className="text-center">or</p>
59      <button
60        className="bg-blue-100 hover:bg-blue-200 p-2 rounded"
61        onClick={async (e) => {
62          e.preventDefault();
63          setIsLoading(true);
64          const user = await createUserWithEmailAndPassword(email, password);
65          if (!user) throw new Error("user is null");
66          router.push("/");
67          setIsLoading(false);
68        }}
69        disabled={isLoading}
70      >
71        登録{loading && "中"}
72      </button>
73    </form>
74  );
75}

1"use client" // 今回の方法ではuse clientが必須になる
2import { useAuthState } from "react-firebase-hooks/auth";
3
4export default function Page(){
5  const [user] = useAuthState(auth);
6  //略
7}