feat: initial auth config

src/routes/__root.tsx

@@ -1,11 +1,10 @@
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
-import { Toaster } from "@/components/ui/sonner"
-import DashboardSidebar from "@/dashboard/dashboard-sidebar"
 import "@/styles/globals.css"
+import { ConvexProviderWithAuthKit } from "@convex-dev/workos"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
-import { ConvexProvider, ConvexReactClient } from "convex/react"
+import { AuthKitProvider, useAuth } from "@workos-inc/authkit-react"
+import { ConvexReactClient } from "convex/react"
 import { toast } from "sonner"
 import { formatError } from "@/lib/error"
 
@@ -29,18 +28,17 @@ const queryClient = new QueryClient({
 function RootLayout() {
 	return (
 		<QueryClientProvider client={queryClient}>
-			<ConvexProvider client={convexClient}>
-				<SidebarProvider>
-					<div className="flex h-screen w-full">
-						<DashboardSidebar />
-						<SidebarInset>
-							<Outlet />
-						</SidebarInset>
-					</div>
-					<Toaster />
-					<TanStackRouterDevtools />
-				</SidebarProvider>
-			</ConvexProvider>
+			<AuthKitProvider
+				clientId={process.env.BUN_PUBLIC_WORKOS_CLIENT_ID!}
+				redirectUri={process.env.BUN_PUBLIC_WORKOS_REDIRECT_URI!}
+			>
+				<ConvexProviderWithAuthKit
+					client={convexClient}
+					useAuth={useAuth}
+				>
+					<Outlet />
+				</ConvexProviderWithAuthKit>
+			</AuthKitProvider>
 		</QueryClientProvider>
 	)
 }

src/routes/_authenticated.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router"
+import { Authenticated, Unauthenticated } from "convex/react"
+
+export const Route = createFileRoute("/_authenticated")({
+	component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+	return (
+		<>
+			<Authenticated>
+				<Outlet />
+			</Authenticated>
+			<Unauthenticated>
+				<Navigate to="/login" />
+			</Unauthenticated>
+		</>
+	)
+}

src/routes/_authenticated/_sidebar-layout.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router"
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
+import { Toaster } from "@/components/ui/sonner"
+import { DashboardSidebar } from "@/dashboard/dashboard-sidebar"
+
+export const Route = createFileRoute("/_authenticated/_sidebar-layout")({
+	component: RouteComponent,
+})
+
+function RouteComponent() {
+	return (
+		<SidebarProvider>
+			<div className="flex h-screen w-full">
+				<DashboardSidebar />
+				<SidebarInset>
+					<Outlet />
+				</SidebarInset>
+			</div>
+			<Toaster />
+		</SidebarProvider>
+	)
+}

src/routes/_authenticated/_sidebar-layout/files.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { FilesPage } from "@/files/files-page"
 
-export const Route = createFileRoute("/files")({
+export const Route = createFileRoute("/_authenticated/_sidebar-layout/files")({
 	component: FilesPage,
 })

src/routes/_authenticated/index.tsx

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

src/routes/index.tsx

@@ -1,27 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { HomeIcon } from "lucide-react"
-import { SidebarTrigger } from "@/components/ui/sidebar"
-
-export const Route = createFileRoute("/")({
-	component: Index,
-})
-
-function Index() {
-	return (
-		<>
-			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4">
-				<SidebarTrigger className="-ml-1" />
-				<div className="flex items-center gap-2">
-					<HomeIcon className="h-5 w-5" />
-					<h1 className="text-lg font-semibold">Home</h1>
-				</div>
-			</header>
-			<div className="p-6">
-				<h1 className="text-2xl font-bold">Welcome to FileOne</h1>
-				<p className="text-muted-foreground mt-2">
-					Your file management dashboard
-				</p>
-			</div>
-		</>
-	)
-}

src/routes/login.tsx

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