Adds auth guards

src/routes/_authenticated.tsx

@@ -0,0 +1,12 @@
+import { isAuthenticated } from "@/lib/pocketbase";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authenticated")({
+  beforeLoad: () => {
+    if (!isAuthenticated()) {
+      throw redirect({
+        to: "/login",
+      });
+    }
+  },
+});

src/routes/_authenticated/campaigns.$campaignId.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/campaigns/$campaignId")({
+export const Route = createFileRoute("/_authenticated/campaigns/$campaignId")({
   component: RouteComponent,
 });
 

src/routes/_authenticated/campaigns.index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/campaigns/")({
+export const Route = createFileRoute("/_authenticated/campaigns/")({
   component: RouteComponent,
 });
 

src/routes/_authenticated/sessions.index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/sessions/')({
+export const Route = createFileRoute('/_authenticated/sessions/')({
   component: RouteComponent,
 })
 

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
   component: App,
@@ -7,14 +7,7 @@ export const Route = createFileRoute("/")({
 function App() {
   return (
     <div className="text-center">
-      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
-        <h1>Hello, Tanstack</h1>
-      </header>
-      <div>
-        <Link to="/campaigns" activeProps={{ className: "weight-bold" }}>
-          Campaigns
-        </Link>
-      </div>
+      <h1>Welcome to the DM's Companion</h1>
     </div>
   );
 }

src/routes/login.tsx

@@ -1,19 +1,26 @@
-import { useState, useEffect } from "react";
 import { useAuth } from "@/context/auth/AuthContext";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { isAuthenticated } from "@/lib/pocketbase";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { ClientResponseError } from "pocketbase";
+import { useState } from "react";
 
 /**
  * Login and signup page for authentication.
  * Allows users to log in or create a new account.
  */
 export const Route = createFileRoute("/login")({
+  beforeLoad: () => {
+    if (isAuthenticated()) {
+      throw redirect({
+        to: "/",
+      });
+    }
+  },
   component: LoginPage,
 });
 
 function LoginPage() {
-  const { login, signup, user, isLoading } = useAuth();
-  const navigate = useNavigate();
+  const { login, signup, isLoading } = useAuth();
   const [mode, setMode] = useState<"login" | "signup">("login");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -26,12 +33,6 @@ function LoginPage() {
   }>({});
   const [submitting, setSubmitting] = useState(false);
 
-  useEffect(() => {
-    if (user) {
-      navigate({ to: "/" });
-    }
-  }, [user, navigate]);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
@@ -55,9 +56,8 @@ function LoginPage() {
           password: err.response.data.password?.message,
           passwordConfirm: err.response.data.passwordConfirm?.message,
         });
-      } else {
-        setError((err as Error)?.message || "Authentication failed");
       }
+      setError((err as Error)?.message || "Authentication failed");
     } finally {
       setSubmitting(false);
     }