fix: Reconfigure redirect logic for auth users (#250)

.changeset/mighty-ducks-juggle.md

@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Fix redirect logic for authenticated and unauthenticated users

src/routes/_authenticated.tsx

@@ -1,18 +1,20 @@
-import { Navigate, Outlet, createFileRoute } from "@tanstack/react-router";
-import { useConvexAuth } from "convex/react";
+import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
+import { Authenticated } from "convex/react";
 
 export const Route = createFileRoute("/_authenticated")({
+  beforeLoad: async ({ context }) => {
+    const { isAuthenticated, isLoading } = await context.auth;
+    if (!isLoading && !isAuthenticated) throw redirect({ to: "/signin" });
+  },
   component: AuthenticatedRoute,
 });
 
 function AuthenticatedRoute() {
-  const { isAuthenticated } = useConvexAuth();
-
-  if (!isAuthenticated) return <Navigate to="/signin" />;
-
   return (
-    <main className="text-gray-normal">
-      <Outlet />
-    </main>
+    <Authenticated>
+      <main className="text-gray-normal">
+        <Outlet />
+      </main>
+    </Authenticated>
   );
 }

src/routes/_authenticated/_home.tsx

@@ -28,7 +28,7 @@ import {
   type Status,
 } from "@convex/constants";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { Authenticated, Unauthenticated, useQuery } from "convex/react";
+import { useQuery } from "convex/react";
 import {
   History,
   List,
@@ -219,16 +219,9 @@ function IndexRoute() {
   };
 
   return (
-    <>
-      <Authenticated>
-        <Container className="flex">
-          <MyQuests />
-          <Outlet />
-        </Container>
-      </Authenticated>
-      <Unauthenticated>
-        <h1>Please log in</h1>
-      </Unauthenticated>
-    </>
+    <Container className="flex">
+      <MyQuests />
+      <Outlet />
+    </Container>
   );
 }

src/routes/_unauthenticated.tsx

@@ -1,14 +1,9 @@
-import { Navigate, Outlet, createFileRoute } from "@tanstack/react-router";
-import { useConvexAuth } from "convex/react";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_unauthenticated")({
   component: UnauthenticatedRoute,
 });
 
 function UnauthenticatedRoute() {
-  const { isAuthenticated } = useConvexAuth();
-
-  if (isAuthenticated) return <Navigate to="/" />;
-
   return <Outlet />;
 }

src/routes/_unauthenticated/signin.tsx

@@ -15,13 +15,17 @@ import {
   TooltipTrigger,
 } from "@/components/common";
 import { useAuthActions } from "@convex-dev/auth/react";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 import { ConvexError } from "convex/values";
 import { ChevronLeft } from "lucide-react";
 import { useState } from "react";
 import type { Key } from "react-aria";
 
 export const Route = createFileRoute("/_unauthenticated/signin")({
+  beforeLoad: async ({ context }) => {
+    const { isAuthenticated, isLoading } = await context.auth;
+    if (!isLoading && isAuthenticated) throw redirect({ to: "/" });
+  },
   component: LoginRoute,
 });