Redirect to sign in page automatically (#498)

Automatically redirect to the sign in page if a non-authenticated user tries to access a page for signed in users only.

frontend/components/GamePage.tsx

@@ -8,6 +8,7 @@ import {
 } from "react"
 import Head from "next/head"
 import useWebSocket from "react-use-websocket"
+import { useRouter } from "next/router"
 
 import Tabs from "@mui/material/Tabs"
 import Tab from "@mui/material/Tab"
@@ -72,6 +73,7 @@ const GamePage = (props: GamePageProps) => {
   const [latestTokenRefreshDate, setLatestTokenRefreshDate] =
     useState<Date | null>(null)
   const [refreshingToken, setRefreshingToken] = useState<boolean>(false)
+  const router = useRouter()
 
   // Game-specific state
   const {
@@ -115,13 +117,13 @@ const GamePage = (props: GamePageProps) => {
 
   // Add class to body element on this page only, for styling
   useEffect(() => {
-    document.body.classList.add('game');
+    document.body.classList.add("game")
 
     // Cleanup function
     return () => {
-      document.body.classList.remove('game');
-    };
-  }, []);
+      document.body.classList.remove("game")
+    }
+  }, [])
 
   // Establish a WebSocket connection to the game group and provide a state containing the last message
   const { lastMessage: lastGameMessage } = useWebSocket(
@@ -630,7 +632,8 @@ const GamePage = (props: GamePageProps) => {
   if (!syncingGameData) {
     // Render page error if user is not signed in
     if (user === null || props.authFailure) {
-      return <PageError statusCode={401} />
+      router.push(`/sign-in?redirect=${router.asPath}`)
+      return <PageError />
     }
 
     // Render page error if game doesn't exist or hasn't started yet

frontend/components/PageError.tsx

@@ -1,7 +1,7 @@
 import { useCookieContext } from "@/contexts/CookieContext"
 
 interface PageErrorProps {
-  statusCode: number
+  statusCode?: number
 }
 
 // This component is designed to replace the entire `<main>` element of a page with an error message
@@ -16,6 +16,8 @@ const PageError = (props: PageErrorProps) => {
     case 401:
       message = "Unauthorized"
       break
+    case undefined:
+      return <main className="standard-page" />  // If the status code is not recognized, return an empty main element
   }
 
   const getSuggestion = () => {

frontend/pages/account.tsx

@@ -1,23 +1,24 @@
 import { GetServerSidePropsContext } from "next"
 import Head from "next/head"
-import Card from "@mui/material/Card"
+import { useRouter } from "next/router"
 
 import { useCookieContext } from "@/contexts/CookieContext"
 import getInitialCookieData from "@/functions/cookies"
 import PageError from "@/components/PageError"
 import Breadcrumb from "@/components/Breadcrumb"
 import KeyValueList from "@/components/KeyValueList"
-import Box from "@mui/material/Box"
 
 /**
  * The component for the account page
  */
 const AccountPage = () => {
   const { user } = useCookieContext()
+  const router = useRouter()
 
   // Render page error if user is not signed in
   if (user === null) {
-    return <PageError statusCode={401} />
+    router.push(`/sign-in?redirect=${router.asPath}`)
+    return <PageError />
   }
 
   const pairs = [

frontend/pages/games/[id]/index.tsx

@@ -494,9 +494,10 @@ const GameLobbyPage = (props: GameLobbyPageProps) => {
     }
   }, [props.authFailure, setAccessToken, setRefreshToken, setUser])
 
-  // Render page error if user is not signed in
+  // Redirect to sign in if user is not signed in
   if (user === null || props.authFailure) {
-    return <PageError statusCode={401} />
+    router.push(`/sign-in?redirect=${router.asPath}`)
+    return <PageError />
   }
 
   // Render page error if game doesn't exist
@@ -540,11 +541,12 @@ const GameLobbyPage = (props: GameLobbyPageProps) => {
         </title>
       </Head>
       <main className="standard-page px-8 mb-8">
-        <Breadcrumb
-          customItems={[{ index: 2, text: "Game Lobby" }]}
-        />
+        <Breadcrumb customItems={[{ index: 2, text: "Game Lobby" }]} />
 
-        <h2 id="page-title" className="font-semibold text-2xl tracking-tight mb-4">
+        <h2
+          id="page-title"
+          className="font-semibold text-2xl tracking-tight mb-4"
+        >
           {game.name}
         </h2>
         {game.description && <p className="pb-4">{game.description}</p>}
@@ -574,7 +576,9 @@ const GameLobbyPage = (props: GameLobbyPageProps) => {
                 <div
                   style={{ marginLeft: 16, marginBottom: 6, marginRight: 16 }}
                 >
-                  <h3 className="pt-2 pb-2 font-semibold text-lg tracking-tight">Players</h3>
+                  <h3 className="pt-2 pb-2 font-semibold text-lg tracking-tight">
+                    Players
+                  </h3>
                   {!loading ? (
                     <p style={{ margin: 0 }}>
                       {players.length} of 6 spaces reserved
@@ -684,7 +688,9 @@ const GameLobbyPage = (props: GameLobbyPageProps) => {
           {!loading && (
             <div className="p-6 bg-white dark:bg-neutral-700 rounded">
               <div>
-                <h3 className="pt-0 pb-4 font-semibold text-lg tracking-tight">Actions</h3>
+                <h3 className="pt-0 pb-4 font-semibold text-lg tracking-tight">
+                  Actions
+                </h3>
                 <div className="flex gap-4">
                   {game.host?.id === user.id && (
                     <>

frontend/pages/games/index.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from "react"
 import { GetServerSidePropsContext } from "next"
 import Head from "next/head"
 import Link from "next/link"
+import { useRouter } from "next/router"
 
 import Button from "@mui/material/Button"
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid"
@@ -26,6 +27,7 @@ interface BrowseGamesPageProps {
 
 // The "Browse Games" page component
 const BrowseGamesPage = (props: BrowseGamesPageProps) => {
+  const router = useRouter()
   const {
     accessToken,
     refreshToken,
@@ -157,9 +159,10 @@ const BrowseGamesPage = (props: BrowseGamesPageProps) => {
     }
   }, [props.authFailure, setAccessToken, setRefreshToken, setUser])
 
-  // Render page error if user is not signed in
+  // Redirect to sign in if user is not signed in
   if (user === null || props.authFailure) {
-    return <PageError statusCode={401} />
+    router.push(`/sign-in?redirect=${router.asPath}`)
+    return <PageError />
   }
 
   return (

frontend/pages/games/new.tsx

@@ -84,9 +84,10 @@ const NewGamePage = () => {
     }
   }
 
-  // Render page error if user is not signed in
+  // Redirect to sign in if user is not signed in
   if (user === null) {
-    return <PageError statusCode={401} />
+    router.push(`/sign-in?redirect=${router.asPath}`)
+    return <PageError />
   }
 
   return (