feat: log out and auth redirect

src/dashboard/dashboard-sidebar.tsx

@@ -1,7 +1,17 @@
 import { Link, useLocation } from "@tanstack/react-router"
-import { FilesIcon, HomeIcon, User2Icon } from "lucide-react"
+import { useAuth } from "@workos-inc/authkit-react"
+import {
+	ChevronDownIcon,
+	FilesIcon,
+	HomeIcon,
+	LogOutIcon,
+	SettingsIcon,
+	User2Icon,
+} from "lucide-react"
 import {
 	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
@@ -19,7 +29,7 @@ export function DashboardSidebar() {
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>
-						<UserSwitcher />
+						<UserMenu />
 					</SidebarMenuItem>
 				</SidebarMenu>
 				<MainSidebarMenu />
@@ -61,17 +71,34 @@ function MainSidebarMenu() {
 	)
 }
 
-function UserSwitcher() {
+function UserMenu() {
+	const { signOut } = useAuth()
+
+	function handleSignOut() {
+		signOut()
+	}
+
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<SidebarMenuButton size="lg" className="w-fit px-1.5">
-					<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
-						<User2Icon className="size-4" />
+				<SidebarMenuButton className="w-fit px-1.5 group-data-[collapsible=icon]:px-1.5! data-[state=open]:bg-sidebar-accent">
+					<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+						<User2Icon className="size-3" />
 					</div>
-					<span>Kenneth</span>
+					<span className="truncate font-medium">Kenneth</span>
+					<ChevronDownIcon className="opacity-50" />
 				</SidebarMenuButton>
 			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-64" align="start" side="bottom">
+				<DropdownMenuItem>
+					<SettingsIcon />
+					Settings
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handleSignOut}>
+					<LogOutIcon />
+					Log out
+				</DropdownMenuItem>
+			</DropdownMenuContent>
 		</DropdownMenu>
 	)
 }

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>
 }