refactor: Improve redirect logic for auth and unauth users (#101)

namesakefyi · Sep 22, 2024 · 4f1b0b9 · 4f1b0b9
1 parent bb7fc38
commit 4f1b0b9
Show file tree

Hide file tree

Showing 24 changed files with 548 additions and 369 deletions.
diff --git a/.changeset/khaki-dogs-reflect.md b/.changeset/khaki-dogs-reflect.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Improve auth redirect logic
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@auth/core": "^0.34.2",
-    "@convex-dev/auth": "^0.0.67",
+    "@convex-dev/auth": "^0.0.69",
     "@faker-js/faker": "^9.0.1",
     "@mdxeditor/editor": "^3.11.4",
     "@pdfme/common": "^4.5.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
@@ -1,7 +1,8 @@
 import { useAuthActions } from "@convex-dev/auth/react";
+import { api } from "@convex/_generated/api";
 import { RiAccountCircleFill } from "@remixicon/react";
-import { useQuery } from "convex/react";
-import { api } from "../../../convex/_generated/api";
+import { redirect } from "@tanstack/react-router";
+import { Authenticated, useQuery } from "convex/react";
 import { Button } from "../Button";
 import { Link } from "../Link";
 import { Logo } from "../Logo";
@@ -12,32 +13,39 @@ export const AppHeader = () => {
   const role = useQuery(api.users.getCurrentUserRole);
   const isAdmin = role === "admin";
 
+  const handleSignOut = () => {
+    signOut();
+    redirect({ to: "/", throw: true });
+  };
+
   return (
-    <div className="flex gap-4 items-center w-screen py-3 px-4 border-b border-gray-dim">
+    <div className="flex gap-4 items-center w-screen h-14 px-4 border-b border-gray-dim">
       <Link href={{ to: "/" }}>
         <Logo className="h-[1.25rem]" />
       </Link>
-      {isAdmin && <Link href={{ to: "/admin" }}>Admin</Link>}
-      <div className="ml-auto">
-        <MenuTrigger>
-          <Button aria-label="User settings" variant="icon">
-            <RiAccountCircleFill />
-          </Button>
-          <Menu>
-            <MenuItem href={{ to: "/settings" }}>Settings</MenuItem>
-            <MenuSeparator />
-            <MenuItem
-              href="https://namesake.fyi/chat"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Support&hellip;
-            </MenuItem>
-            <MenuSeparator />
-            <MenuItem onAction={signOut}>Sign Out</MenuItem>
-          </Menu>
-        </MenuTrigger>
-      </div>
+      <Authenticated>
+        {isAdmin && <Link href={{ to: "/admin" }}>Admin</Link>}
+        <div className="ml-auto">
+          <MenuTrigger>
+            <Button aria-label="User settings" variant="icon">
+              <RiAccountCircleFill />
+            </Button>
+            <Menu>
+              <MenuItem href={{ to: "/settings" }}>Settings</MenuItem>
+              <MenuSeparator />
+              <MenuItem
+                href="https://namesake.fyi/chat"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Support&hellip;
+              </MenuItem>
+              <MenuSeparator />
+              <MenuItem onAction={handleSignOut}>Sign out</MenuItem>
+            </Menu>
+          </MenuTrigger>
+        </div>
+      </Authenticated>
     </div>
   );
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,13 +1,18 @@
 import "./styles/index.css";
 import { ConvexAuthProvider } from "@convex-dev/auth/react";
+import { api } from "@convex/_generated/api";
 import { RiErrorWarningLine } from "@remixicon/react";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { ConvexReactClient, useConvexAuth, useQuery } from "convex/react";
+import {
+  type ConvexAuthState,
+  ConvexReactClient,
+  useConvexAuth,
+  useQuery,
+} from "convex/react";
 import { ThemeProvider } from "next-themes";
-import { StrictMode } from "react";
+import { StrictMode, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
-import { api } from "../convex/_generated/api";
 import { Empty } from "./components";
 import { routeTree } from "./routeTree.gen";
 
@@ -20,6 +25,7 @@ const router = createRouter({
     auth: undefined!,
     role: undefined!,
   },
+  defaultPreload: "intent",
   defaultNotFoundComponent: () => (
     <Empty
       title="Page not found"
@@ -35,12 +41,28 @@ declare module "@tanstack/react-router" {
   }
 }
 
+let resolveAuth: (client: ConvexAuthState) => void;
+const authClient: Promise<ConvexAuthState> = new Promise((resolve) => {
+  resolveAuth = resolve;
+});
+
 const InnerApp = () => {
   const title = "Namesake";
   const auth = useConvexAuth();
   const role = useQuery(api.users.getCurrentUserRole) ?? undefined;
 
-  return <RouterProvider router={router} context={{ title, auth, role }} />;
+  useEffect(() => {
+    if (auth.isLoading) return;
+
+    resolveAuth(auth);
+  }, [auth, auth.isLoading]);
+
+  return (
+    <RouterProvider
+      router={router}
+      context={{ title, auth: authClient, role }}
+    />
+  );
 };
 
 const rootElement = document.getElementById("root")!;