認証エラーでページが停止した場合にログアウトボタンを表示する機能を実装

src/Components/Account/LoggedInView.tsx

@@ -1,12 +1,10 @@
-import { auth } from "@/app/firebase";
 import NameUpdate from "@/Components/NameUpdate/NameUpdate";
 import NotificationButton from "@/Components/NotificationButton/NotificationButton";
-import { showSnackBar } from "@/Components/SnackBar/SnackBar";
+import { handleSignOut } from "@/utils/Auth/signOut";
 import { useUser } from "@/utils/UserContext";
 import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { signOut } from "firebase/auth";
 
 export const RoundedButton = styled(Button)(({ theme }) => ({
   borderRadius: "30px",
@@ -16,24 +14,6 @@ export const RoundedButton = styled(Button)(({ theme }) => ({
 export default function LoggedInView() {
   const { user } = useUser();
 
-  const handleLogout = async () => {
-    try {
-      await signOut(auth);
-
-      showSnackBar({
-        message: "ログアウトしました",
-        type: "success",
-      });
-    } catch (error) {
-      console.error("errorCode:", (error as Error)?.name);
-      console.error("errorMessage:", (error as Error)?.message);
-      showSnackBar({
-        message: "ログアウトに失敗しました",
-        type: "warning",
-      });
-    }
-  };
-
   if (!user) {
     return null;
   }
@@ -87,7 +67,7 @@ export default function LoggedInView() {
         </div>
       )}
 
-      <RoundedButton variant="contained" onClick={handleLogout}>
+      <RoundedButton variant="contained" onClick={handleSignOut}>
         ログアウト
       </RoundedButton>
     </>

src/Components/Loader/Loader.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { handleSignOut } from "@/utils/Auth/signOut";
+import { useUser } from "@/utils/UserContext";
+import CircularProgress from "@mui/joy/CircularProgress";
+import { Button, Typography } from "@mui/material";
+import { redirect } from "next/navigation";
+import { ReactNode, useState } from "react";
+
+interface LoaderProps {
+  children: ReactNode;
+}
+
+export const Loader = ({ children }: LoaderProps) => {
+  const [showErrorButton, setShowErrorButton] = useState(false);
+
+  const { user } = useUser();
+  if (user === null && window.location.pathname !== "/account/") {
+    redirect("/account");
+  }
+
+  // 10秒経ったらボタンを表示
+  setTimeout(() => {
+    setShowErrorButton(true);
+  }, 6000);
+
+  return (
+    <>
+      {user === undefined ? (
+        <>
+          <CircularProgress
+            color="primary"
+            variant="soft"
+            size="lg"
+            value={30}
+            sx={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+          {showErrorButton && (
+            <div
+              style={{
+                position: "absolute",
+                top: "70%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "10px",
+              }}
+            >
+              <Typography
+                color="warning"
+                sx={{ textAlign: "center", width: "90vw" }}
+              >
+                認証エラーが発生した可能性があります。
+                <br />
+                ページを更新しても解消しない場合や通信の問題でない場合は再度ログインしてください。
+              </Typography>
+              <Button variant="contained" color="error" onClick={handleSignOut}>
+                ログアウト
+              </Button>
+            </div>
+          )}
+        </>
+      ) : (
+        <main>{children}</main>
+      )}
+    </>
+  );
+};

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import Header from "@/Components/Header/Header";
+import { Loader } from "@/Components/Loader/Loader";
 import NavigationMenu from "@/Components/NavigationMenu/NavigationMenu";
 import SnackBar from "@/Components/SnackBar/SnackBar";
-import { Loader } from "@/Components/TopPage/TopPage";
 import "@/styles/globals.scss";
 import "@/utils/CloudMessaging/getNotification";
 import { UserProvider } from "@/utils/UserContext";

src/utils/Auth/signOut.tsx

@@ -0,0 +1,21 @@
+import { auth } from "@/app/firebase";
+import { showSnackBar } from "@/Components/SnackBar/SnackBar";
+import { signOut } from "firebase/auth";
+
+export const handleSignOut = async () => {
+  try {
+    await signOut(auth);
+
+    showSnackBar({
+      message: "ログアウトしました",
+      type: "success",
+    });
+  } catch (error) {
+    console.error("errorCode:", (error as Error)?.name);
+    console.error("errorMessage:", (error as Error)?.message);
+    showSnackBar({
+      message: "ログアウトに失敗しました",
+      type: "warning",
+    });
+  }
+};

src/utils/UserContext.tsx

@@ -1,11 +1,7 @@
 "use client";
 import { auth } from "@/app/firebase";
-import { showSnackBar } from "@/Components/SnackBar/SnackBar";
 import { LoginType, User } from "@/types/types";
-import {
-  fetchUserById,
-  handleFetchUserError,
-} from "@/utils/API/User/fetchUser";
+import { fetchUserById } from "@/utils/API/User/fetchUser";
 import { User as FirebaseUser, onAuthStateChanged } from "firebase/auth";
 import {
   createContext,
@@ -100,11 +96,11 @@ export const UserProvider = ({ children }: Props) => {
           }
         } catch (error: unknown) {
           console.error("ユーザーデータの取得に失敗しました:", error);
-          const message = handleFetchUserError(error);
-          showSnackBar({
-            message,
-            type: "warning",
-          });
+          // const message = handleFetchUserError(error);
+          // showSnackBar({
+          //   message,
+          //   type: "warning",
+          // });
         }
       }
     );