From 9bcdce2a4bf13ff3bc668b44b45e9adfcd094540 Mon Sep 17 00:00:00 2001
From: Eva Decker <eva@namesake.fyi>
Date: Mon, 2 Dec 2024 19:00:47 -0500
Subject: [PATCH] fix: Reconfigure redirect logic for auth users (#250)

---
 .changeset/mighty-ducks-juggle.md      |  5 +++++
 src/routes/_authenticated.tsx          | 20 +++++++++++---------
 src/routes/_authenticated/_home.tsx    | 17 +++++------------
 src/routes/_unauthenticated.tsx        |  7 +------
 src/routes/_unauthenticated/signin.tsx |  6 +++++-
 5 files changed, 27 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/mighty-ducks-juggle.md

diff --git a/.changeset/mighty-ducks-juggle.md b/.changeset/mighty-ducks-juggle.md
new file mode 100644
index 0000000..1f4034e
--- /dev/null
+++ b/.changeset/mighty-ducks-juggle.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Fix redirect logic for authenticated and unauthenticated users
diff --git a/src/routes/_authenticated.tsx b/src/routes/_authenticated.tsx
index 6a2d547..f8812cd 100644
--- a/src/routes/_authenticated.tsx
+++ b/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>
   );
 }
diff --git a/src/routes/_authenticated/_home.tsx b/src/routes/_authenticated/_home.tsx
index 7c8d633..77549a8 100644
--- a/src/routes/_authenticated/_home.tsx
+++ b/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>
   );
 }
diff --git a/src/routes/_unauthenticated.tsx b/src/routes/_unauthenticated.tsx
index 71e4f12..83edd70 100644
--- a/src/routes/_unauthenticated.tsx
+++ b/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 />;
 }
diff --git a/src/routes/_unauthenticated/signin.tsx b/src/routes/_unauthenticated/signin.tsx
index 9b3cd6f..571a637 100644
--- a/src/routes/_unauthenticated/signin.tsx
+++ b/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,
 });