Added a login guard

app/components/guard.tsx

@@ -0,0 +1,62 @@
+import type { PropsWithChildren } from "react";
+import { useNavigate } from "react-router";
+import { useAuth } from "~/hooks/auth";
+import { Button, Modal, Spinner } from "@heroui/react";
+
+export default function Guard({ children }: PropsWithChildren) {
+    const { user, loading, login, logout } = useAuth();
+    const navigate = useNavigate();
+
+    if (loading) {
+        return (
+            <div className="flex flex-col flex-1 h-full w-full justify-center items-center">
+                <Spinner color="current" size="xl" />
+            </div>
+        );
+    }
+
+    if (user !== null) {
+        return children;
+    }
+
+    return (
+        <>
+            <div className="h-dvh w-dvw blur-2xl">
+                <Modal>
+                    <Modal.Backdrop
+                        isDismissable={false}
+                        isKeyboardDismissDisabled
+                        isOpen
+                    >
+                        <Modal.Container>
+                            <Modal.Dialog>
+                                <Modal.Header>
+                                    <Modal.Heading>
+                                        Login required.
+                                    </Modal.Heading>
+                                </Modal.Header>
+                                <Modal.Body>
+                                    <p>
+                                        To view this page, you need to be logged
+                                        in with your Steam account.
+                                    </p>
+                                </Modal.Body>
+                                <Modal.Footer>
+                                    <Button
+                                        variant="secondary"
+                                        onClick={() => {
+                                            navigate(-1);
+                                        }}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button onClick={login}>Login</Button>
+                                </Modal.Footer>
+                            </Modal.Dialog>
+                        </Modal.Container>
+                    </Modal.Backdrop>
+                </Modal>
+            </div>
+        </>
+    );
+}

app/pages/base.tsx

@@ -1,13 +1,17 @@
 import type { PropsWithChildren } from "react";
 import { Footer } from "~/components/footer";
+import Guard from "~/components/guard";
 import { Header } from "~/components/header";
 
-export default function Base({ children }: PropsWithChildren) {
+export default function Base({
+    children,
+    needsLogin = false,
+}: PropsWithChildren<{ needsLogin?: boolean }>) {
     return (
         <>
             <div className="flex flex-col pt-20 min-h-dvh">
-                <div className="flex-1">
+                <div className="flex flex-col flex-1">
-                    {children}
+                    {needsLogin ? <Guard>{children}</Guard> : children}
                 </div>
                 <Footer />
             </div>

app/pages/gamemodes.tsx

@@ -1,5 +1,5 @@
-import Base from "./base"
+import Base from "./base";
 
 export function GamemodesPage() {
-    return <Base>GAMEMODES</Base>
+    return <Base needsLogin>GAMEMODES</Base>;
 }

app/pages/inventory.tsx

@@ -1,5 +1,5 @@
-import Base from "./base"
+import Base from "./base";
 
 export function InventoryPage() {
-    return <Base>INVENTORY</Base>
+    return <Base needsLogin>INVENTORY</Base>;
 }

app/pages/maps.tsx

@@ -1,5 +1,5 @@
 import Base from "./base"
 
 export function MapsPage() {
-    return <Base>MAPS</Base>
+    return <Base needsLogin>MAPS</Base>
 }