feat: log out and auth redirect

Co-authored-by: Ona <no-reply@ona.com>

src/components/ui/dropdown-menu.tsx

@@ -43,7 +43,7 @@ function DropdownMenuContent({
 				data-slot="dropdown-menu-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					"bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
 					className,
 				)}
 				{...props}

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

src/styles/globals.css

@@ -19,7 +19,6 @@
 	--accent: oklch(0.97 0 0);
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(0.577 0.245 27.325);
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
 	--ring: oklch(0.708 0 0);
@@ -42,11 +41,11 @@
 .dark {
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.145 0 0);
+	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.145 0 0);
+	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
 	--primary-foreground: oklch(0.205 0 0);
 	--secondary: oklch(0.269 0 0);
 	--secondary-foreground: oklch(0.985 0 0);
@@ -54,11 +53,10 @@
 	--muted-foreground: oklch(0.708 0 0);
 	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.396 0.141 25.723);
-	--destructive-foreground: oklch(0.637 0.237 25.331);
-	--border: oklch(0.269 0 0);
-	--input: oklch(0.269 0 0);
-	--ring: oklch(0.439 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);
 	--chart-3: oklch(0.769 0.188 70.08);
@@ -70,8 +68,8 @@
 	--sidebar-primary-foreground: oklch(0.985 0 0);
 	--sidebar-accent: oklch(0.269 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.269 0 0);
-	--sidebar-ring: oklch(0.439 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {