frontend/src/components/RouteGuards.test.tsx

@@ -3,125 +3,125 @@ import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it } from "vitest";
 import { mockUser } from "../../test/fixtures/user.fixture";
 import { useAuthStore } from "../store/useAuthStore";
-import { ProtectedRoute, PublicRoute } from "./RouteGuards";
+import { ProtectedRoute, AutoRedirectRoute } from "./RouteGuards";
 
 function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
-  return render(
-    <MemoryRouter initialEntries={[mountPath]}>
-      <Routes>
-        <Route path="/login" element={<div>Login Page</div>} />
-        <Route path="/drawer" element={<div>Drawer Page</div>} />
-        <Route path="/protected" element={ui} />
-        <Route path="/public" element={ui} />
-      </Routes>
-    </MemoryRouter>,
-  );
+    return render(
+        <MemoryRouter initialEntries={[mountPath]}>
+            <Routes>
+                <Route path="/login" element={<div>Login Page</div>} />
+                <Route path="/drawer" element={<div>Drawer Page</div>} />
+                <Route path="/protected" element={ui} />
+                <Route path="/public" element={ui} />
+            </Routes>
+        </MemoryRouter>,
+    );
 }
 
 beforeEach(() => {
-  useAuthStore.setState({
-    accessToken: null,
-    user: null,
-    isInitializing: true,
-  });
+    useAuthStore.setState({
+        accessToken: null,
+        user: null,
+        isInitializing: true,
+    });
 });
 
 describe("ProtectedRoute", () => {
-  it("should show SplashScreen while auth is initializing", () => {
-    useAuthStore.setState({
-      isInitializing: true,
-      accessToken: null,
-      user: null,
+    it("should show SplashScreen while auth is initializing", () => {
+        useAuthStore.setState({
+            isInitializing: true,
+            accessToken: null,
+            user: null,
+        });
+        renderGuard(
+            <ProtectedRoute>
+                <div>Secret</div>
+            </ProtectedRoute>,
+            "/protected",
+        );
+
+        expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
+        expect(screen.queryByText("Secret")).not.toBeInTheDocument();
     });
-    renderGuard(
-      <ProtectedRoute>
-        <div>Secret</div>
-      </ProtectedRoute>,
-      "/protected",
-    );
 
-    expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
-    expect(screen.queryByText("Secret")).not.toBeInTheDocument();
-  });
-
-  it("should redirect unauthenticated users to /login", () => {
-    useAuthStore.setState({
-      isInitializing: false,
-      accessToken: null,
-      user: null,
+    it("should redirect unauthenticated users to /login", () => {
+        useAuthStore.setState({
+            isInitializing: false,
+            accessToken: null,
+            user: null,
+        });
+        renderGuard(
+            <ProtectedRoute>
+                <div>Secret</div>
+            </ProtectedRoute>,
+            "/protected",
+        );
+        expect(screen.getByText("Login Page")).toBeInTheDocument();
+        expect(screen.queryByText("Secret")).not.toBeInTheDocument();
     });
-    renderGuard(
-      <ProtectedRoute>
-        <div>Secret</div>
-      </ProtectedRoute>,
-      "/protected",
-    );
-    expect(screen.getByText("Login Page")).toBeInTheDocument();
-    expect(screen.queryByText("Secret")).not.toBeInTheDocument();
-  });
 
-  it("should render page for authenticated users", () => {
-    useAuthStore.setState({
-      isInitializing: false,
-      accessToken: "token",
-      user: mockUser,
+    it("should render page for authenticated users", () => {
+        useAuthStore.setState({
+            isInitializing: false,
+            accessToken: "token",
+            user: mockUser,
+        });
+        renderGuard(
+            <ProtectedRoute>
+                <div>Secret</div>
+            </ProtectedRoute>,
+            "/protected",
+        );
+
+        expect(screen.getByText("Secret")).toBeInTheDocument();
     });
-    renderGuard(
-      <ProtectedRoute>
-        <div>Secret</div>
-      </ProtectedRoute>,
-      "/protected",
-    );
-
-    expect(screen.getByText("Secret")).toBeInTheDocument();
-  });
 });
 
 describe("PublicRoute", () => {
-  it("should show SplashScreen while auth is initializing", () => {
-    useAuthStore.setState({
-      isInitializing: true,
-      accessToken: null,
-      user: null,
+    it("should show SplashScreen while auth is initializing", () => {
+        useAuthStore.setState({
+            isInitializing: true,
+            accessToken: null,
+            user: null,
+        });
+        renderGuard(
+            <AutoRedirectRoute>
+                <div>Login Page</div>
+            </AutoRedirectRoute>,
+            "/public",
+        );
+        expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
+        expect(screen.queryByText("Login Page")).not.toBeInTheDocument();
     });
-    renderGuard(
-      <PublicRoute>
-        <div>Login Page</div>
-      </PublicRoute>,
-      "/public",
-    );
-    expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
-    expect(screen.queryByText("Login Page")).not.toBeInTheDocument();
-  });
 
-  it("should redirect authenticated users to /drawer", () => {
-    useAuthStore.setState({
-      isInitializing: false,
-      accessToken: "token",
-      user: mockUser,
+    it("should redirect authenticated users to /drawer", () => {
+        useAuthStore.setState({
+            isInitializing: false,
+            accessToken: "token",
+            user: mockUser,
+        });
+        renderGuard(
+            <AutoRedirectRoute>
+                <div>Login Form</div>
+            </AutoRedirectRoute>,
+            "/public",
+        );
+        expect(screen.getByText("Drawer Page")).toBeInTheDocument();
+        expect(screen.queryByText("Login Form")).not.toBeInTheDocument();
     });
-    renderGuard(
-      <PublicRoute>
-        <div>Login Form</div>
-      </PublicRoute>,
-      "/public",
-    );
-    expect(screen.getByText("Drawer Page")).toBeInTheDocument();
-    expect(screen.queryByText("Login Form")).not.toBeInTheDocument();
-  });
 
-  it("should render page for unauthenticated users", () => {
-    useAuthStore.setState({
-      isInitializing: false,
-      accessToken: null,
-      user: null,
+    it("should render page for unauthenticated users", () => {
+        useAuthStore.setState({
+            isInitializing: false,
+            accessToken: null,
+            user: null,
+        });
+        renderGuard(
+            <AutoRedirectRoute>
+                <div>Login Form</div>
+            </AutoRedirectRoute>,
+            "/public",
+        );
+        expect(screen.getByText("Login Form")).toBeInTheDocument();
     });
-    renderGuard(
-      <PublicRoute>
-        <div>Login Form</div>
-      </PublicRoute>,
-      "/public",
-    );
-    expect(screen.getByText("Login Form")).toBeInTheDocument();
-  });
 });

frontend/src/components/RouteGuards.tsx

@@ -9,30 +9,30 @@ import SplashScreen from "./SplashScreen";
  * state so the Login component can link them back after sign-in
  */
 export function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, isInitializing } = useAuth();
-  const location = useLocation();
+    const { isAuthenticated, isInitializing } = useAuth();
+    const location = useLocation();
 
-  if (isInitializing) return <SplashScreen />;
+    if (isInitializing) return <SplashScreen />;
 
-  if (!isAuthenticated) {
-    return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
-  }
+    if (!isAuthenticated) {
+        return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
+    }
 
-  return <>{children}</>;
+    return <>{children}</>;
 }
 
 /**
- * Public - auth route guard.
+ * Auto-redirect - auth route guard.
  * If authenticated, redirect all the auth related flows to the drawer
  */
-export function PublicRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, isInitializing } = useAuth();
+export function AutoRedirectRoute({ children }: { children: React.ReactNode }) {
+    const { isAuthenticated, isInitializing } = useAuth();
 
-  if (isInitializing) return <SplashScreen />;
+    if (isInitializing) return <SplashScreen />;
 
-  if (isAuthenticated) {
-    return <Navigate to={ROUTES.DRAWER} replace />;
-  }
+    if (isAuthenticated) {
+        return <Navigate to={ROUTES.DRAWER} replace />;
+    }
 
-  return <>{children}</>;
+    return <>{children}</>;
 }