feat: implement auth redirects using beforeLoad route handlers

apps/web/src/routes/dashboard.tsx

@@ -1,29 +1,28 @@
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useEffect } from "react";
 import { SpacesGrid } from "@/components/spaces-grid";
-import { authClient } from "@/lib/auth-client";
+import { authClient, account } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 
 export const Route = createFileRoute("/dashboard")({
+  beforeLoad: async () => {
+    const me = await account.get();
+    if (!me) {
+      throw redirect({ to: "/" });
+    }
+    const isVerified = Boolean(me.emailVerification);
+    if (!isVerified) {
+      throw redirect({ to: "/verify-email" });
+    }
+  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
   const { data: session, isPending } = authClient.useSession();
 
-  const navigate = Route.useNavigate();
-
   const privateData = useQuery(trpc.privateData.queryOptions());
 
-  useEffect(() => {
-    if (!(session || isPending)) {
-      navigate({
-        to: "/login",
-      });
-    }
-  }, [session, isPending, navigate]);
-
   if (isPending) {
     return <div>Loading...</div>;
   }

apps/web/src/routes/login.tsx

@@ -1,9 +1,26 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { useState } from "react";
 import SignInForm from "@/components/sign-in-form";
 import SignUpForm from "@/components/sign-up-form";
+import { account } from "@/lib/auth-client";
 
 export const Route = createFileRoute("/login")({
+  beforeLoad: async () => {
+    let me = null;
+    try {
+      me = await account.get();
+    } catch {
+      // ignore
+    }
+    console.log(me)
+    if (me) {
+      const isVerified = Boolean(me.emailVerification);
+      if (isVerified) {
+        throw redirect({ to: "/dashboard" });
+      }
+      throw redirect({ to: "/verify-email" });
+    }
+  },
   component: RouteComponent,
 });