feat: log out and auth redirect

src/routes/_authenticated.tsx

@@ -1,19 +1,65 @@
-import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router"
-import { Authenticated, Unauthenticated } from "convex/react"
+import {
+	createFileRoute,
+	Navigate,
+	Outlet,
+	useLocation,
+} from "@tanstack/react-router"
+import { useAuth } from "@workos-inc/authkit-react"
+import {
+	Authenticated,
+	AuthLoading,
+	Unauthenticated,
+	useConvexAuth,
+} from "convex/react"
+import { useEffect, useState } from "react"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
 
 export const Route = createFileRoute("/_authenticated")({
 	component: AuthenticatedLayout,
 })
 
 function AuthenticatedLayout() {
+	const { search } = useLocation()
+	const { isLoading } = useConvexAuth()
+	const { isLoading: authKitLoading } = useAuth()
+	const [hasProcessedAuth, setHasProcessedAuth] = useState(false)
+
+	// Check if we're in the middle of processing an auth code
+	const hasAuthCode = search && typeof search === "object" && "code" in search
+
+	// Track when auth processing is complete
+	useEffect(() => {
+		if (!authKitLoading && !isLoading) {
+			// Delay to ensure auth state is fully synchronized
+			const timer = setTimeout(() => {
+				setHasProcessedAuth(true)
+			}, 500)
+			return () => clearTimeout(timer)
+		}
+	}, [authKitLoading, isLoading])
+
+	// Show loading during auth code processing or while auth state is syncing
+	if (hasAuthCode || authKitLoading || isLoading || !hasProcessedAuth) {
+		return (
+			<div className="flex h-screen w-full items-center justify-center">
+				<LoadingSpinner className="size-10" />
+			</div>
+		)
+	}
+
 	return (
 		<>
 			<Authenticated>
 				<Outlet />
 			</Authenticated>
 			<Unauthenticated>
-				<Navigate to="/login" />
+				<Navigate replace to="/login" />
 			</Unauthenticated>
+			<AuthLoading>
+				<div className="flex h-screen w-full items-center justify-center">
+					<LoadingSpinner className="size-10" />
+				</div>
+			</AuthLoading>
 		</>
 	)
 }

src/routes/_authenticated/index.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, Navigate } from "@tanstack/react-router"
 
 export const Route = createFileRoute("/_authenticated")({
 	component: RouteComponent,
 })
 
 function RouteComponent() {
-	return <div>Hello "/"!</div>
+	return <Navigate replace to="/files" />
 }

src/routes/login.tsx

@@ -1,9 +1,13 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { useAuth } from "@workos-inc/authkit-react"
+import { Button } from "../components/ui/button"
 
 export const Route = createFileRoute("/login")({
 	component: RouteComponent,
 })
 
 function RouteComponent() {
-	return <div>Hello "/login"!</div>
+	const { signIn } = useAuth()
+
+	return <Button onClick={() => signIn()}>Login</Button>
 }