Next移行に伴う、リロード問題を解決 (#518)

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足

## レビューリクエストを出す前にチェック！

- [ ] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: KaichiManabe

web/app/chat/page.tsx

@@ -8,6 +8,14 @@ import RoomList from "~/components/chat/RoomList";
 import { RoomWindow } from "~/components/chat/RoomWindow";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 
+export default function Chat() {
+  return (
+    <Suspense fallback={<FullScreenCircularProgress />}>
+      <ChatListContent />
+    </Suspense>
+  );
+}
+
 function ChatListContent() {
   const searchParams = useSearchParams();
 
@@ -28,11 +36,3 @@ function ChatListContent() {
     <RoomList roomsData={state.data} />
   );
 }
-
-export default function Chat() {
-  return (
-    <Suspense fallback={<FullScreenCircularProgress />}>
-      <ChatListContent />
-    </Suspense>
-  );
-}

web/firebase/auth/lib.ts

@@ -5,25 +5,19 @@ import { app } from "../config";
 
 export class ErrUnauthorized extends Error {}
 
-let user: User;
-let token: string;
-
 const auth = getAuth(app);
-onAuthStateChanged(auth, async (u: User | null) => {
-  if (u != null) {
-    user = u;
-    token = await user.getIdToken();
-  }
-});
 
-async function refreshToken() {
-  token = await user.getIdToken(true);
-}
+// 認証状態の完了を待機するためのPromiseを作成
+const token = new Promise<string>((resolve) => {
+  onAuthStateChanged(auth, async (u: User | null) => {
+    if (u != null) {
+      resolve(await u.getIdToken());
+    }
+  });
+});
 
 export async function getIdToken(): Promise<IDToken> {
-  if (token) return token;
-  await refreshToken();
-  return token;
+  return await token;
 }
 
 type RequestMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
@@ -39,19 +33,19 @@ export async function credFetch(
   path: string,
   body?: unknown,
 ): Promise<Response> {
-  const idToken = await getIdToken();
+  let idToken = await getIdToken();
   const init: RequestInit = { method };
   if (body) {
     init.body = JSON.stringify(body);
     init.headers = {
       "Content-Type": "application/json",
     };
   }
-
   let res = await fetch(`${path}?token=${idToken}`, init);
+
   if (res.status === 401) {
-    await refreshToken();
-    res = await fetch(`${path}?token=${idToken}`);
+    idToken = await getIdToken();
+    res = await fetch(`${path}?token=${idToken}`, init);
   }
 
   return res;