work-one/file-one
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial auth config

Browse Source
This commit is contained in:
Kenneth
2025-09-14 21:46:38 +00:00
parent 1d2ef37827
commit 02506181e9
15 changed files with 626 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/dashboard/dashboard-sidebar.tsx
View File

@@ -13,7 +13,7 @@ import {
SidebarRail,
} from "@/components/ui/sidebar"
function DashboardSidebar() {
export function DashboardSidebar() {
return (
<Sidebar collapsible="icon">
<SidebarHeader>
@@ -75,5 +75,3 @@ function UserSwitcher() {
</DropdownMenu>
)
}
export default DashboardSidebar

21
src/dashboard/dashboard.tsx
View File

@@ -1,21 +0,0 @@
import { createRouter, RouterProvider } from "@tanstack/react-router"
import "./index.css"
// Import the generated route tree
import { routeTree } from "../routeTree.gen"
// Create a new router instance
const router = createRouter({ routeTree })
// Register the router instance for type safety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router
}
}
export function App() {
return <RouterProvider router={router} />
}
export default App

9
src/dashboard/entry.tsx → src/entry.tsx
View File

@@ -5,16 +5,21 @@
* It is included in `src/index.html`.
*/
import { createRouter, RouterProvider } from "@tanstack/react-router"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App } from "./dashboard"
import { ThemeProvider } from "@/components/theme-provider"
// Import the generated route tree
import { routeTree } from "./routeTree.gen"
// Create a new router instance
const router = createRouter({ routeTree })
const elem = document.getElementById("root")!
const app = (
<StrictMode>
<ThemeProvider defaultTheme="system" storageKey="fileone-ui-theme">
<App />
<RouterProvider router={router} />
</ThemeProvider>
</StrictMode>
)

2
src/index.html
View File

@@ -7,6 +7,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="./dashboard/entry.tsx"></script>
<script type="module" src="./entry.tsx"></script>
</body>
</html>

136
src/routeTree.gen.ts
View File

@@ -9,68 +9,146 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
import { Route as FilesRouteImport } from './routes/files'
import { Route as IndexRouteImport } from './routes/index'
import { Route as LoginRouteImport } from './routes/login'
import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
import { Route as AuthenticatedSidebarLayoutRouteImport } from './routes/_authenticated/_sidebar-layout'
import { Route as AuthenticatedSidebarLayoutFilesRouteImport } from './routes/_authenticated/_sidebar-layout/files'
const FilesRoute = FilesRouteImport.update({
id: '/files',
path: '/files',
const LoginRoute = LoginRouteImport.update({
id: '/login',
path: '/login',
getParentRoute: () => rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
const AuthenticatedRoute = AuthenticatedRouteImport.update({
id: '/_authenticated',
getParentRoute: () => rootRouteImport,
} as any)
const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => rootRouteImport,
getParentRoute: () => AuthenticatedRoute,
} as any)
const AuthenticatedSidebarLayoutRoute =
AuthenticatedSidebarLayoutRouteImport.update({
id: '/_sidebar-layout',
getParentRoute: () => AuthenticatedRoute,
} as any)
const AuthenticatedSidebarLayoutFilesRoute =
AuthenticatedSidebarLayoutFilesRouteImport.update({
id: '/files',
path: '/files',
getParentRoute: () => AuthenticatedSidebarLayoutRoute,
} as any)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/files': typeof FilesRoute
'/login': typeof LoginRoute
'/': typeof AuthenticatedIndexRoute
'/files': typeof AuthenticatedSidebarLayoutFilesRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
'/files': typeof FilesRoute
'/login': typeof LoginRoute
'/': typeof AuthenticatedIndexRoute
'/files': typeof AuthenticatedSidebarLayoutFilesRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
'/files': typeof FilesRoute
'/_authenticated': typeof AuthenticatedRouteWithChildren
'/login': typeof LoginRoute
'/_authenticated/_sidebar-layout': typeof AuthenticatedSidebarLayoutRouteWithChildren
'/_authenticated/': typeof AuthenticatedIndexRoute
'/_authenticated/_sidebar-layout/files': typeof AuthenticatedSidebarLayoutFilesRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/' | '/files'
fullPaths: '/login' | '/' | '/files'
fileRoutesByTo: FileRoutesByTo
to: '/' | '/files'
id: '__root__' | '/' | '/files'
to: '/login' | '/' | '/files'
id:
| '__root__'
| '/_authenticated'
| '/login'
| '/_authenticated/_sidebar-layout'
| '/_authenticated/'
| '/_authenticated/_sidebar-layout/files'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
FilesRoute: typeof FilesRoute
AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
LoginRoute: typeof LoginRoute
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/files': {
id: '/files'
path: '/files'
fullPath: '/files'
preLoaderRoute: typeof FilesRouteImport
'/login': {
id: '/login'
path: '/login'
fullPath: '/login'
preLoaderRoute: typeof LoginRouteImport
parentRoute: typeof rootRouteImport
}
'/': {
id: '/'
'/_authenticated': {
id: '/_authenticated'
path: ''
fullPath: ''
preLoaderRoute: typeof AuthenticatedRouteImport
parentRoute: typeof rootRouteImport
}
'/_authenticated/': {
id: '/_authenticated/'
path: '/'
fullPath: '/'
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
preLoaderRoute: typeof AuthenticatedIndexRouteImport
parentRoute: typeof AuthenticatedRoute
}
'/_authenticated/_sidebar-layout': {
id: '/_authenticated/_sidebar-layout'
path: ''
fullPath: ''
preLoaderRoute: typeof AuthenticatedSidebarLayoutRouteImport
parentRoute: typeof AuthenticatedRoute
}
'/_authenticated/_sidebar-layout/files': {
id: '/_authenticated/_sidebar-layout/files'
path: '/files'
fullPath: '/files'
preLoaderRoute: typeof AuthenticatedSidebarLayoutFilesRouteImport
parentRoute: typeof AuthenticatedSidebarLayoutRoute
}
}
}
interface AuthenticatedSidebarLayoutRouteChildren {
AuthenticatedSidebarLayoutFilesRoute: typeof AuthenticatedSidebarLayoutFilesRoute
}
const AuthenticatedSidebarLayoutRouteChildren: AuthenticatedSidebarLayoutRouteChildren =
{
AuthenticatedSidebarLayoutFilesRoute: AuthenticatedSidebarLayoutFilesRoute,
}
const AuthenticatedSidebarLayoutRouteWithChildren =
AuthenticatedSidebarLayoutRoute._addFileChildren(
AuthenticatedSidebarLayoutRouteChildren,
)
interface AuthenticatedRouteChildren {
AuthenticatedSidebarLayoutRoute: typeof AuthenticatedSidebarLayoutRouteWithChildren
AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
}
const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
AuthenticatedSidebarLayoutRoute: AuthenticatedSidebarLayoutRouteWithChildren,
AuthenticatedIndexRoute: AuthenticatedIndexRoute,
}
const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
AuthenticatedRouteChildren,
)
const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
FilesRoute: FilesRoute,
AuthenticatedRoute: AuthenticatedRouteWithChildren,
LoginRoute: LoginRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)

30
src/routes/__root.tsx
View File

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

19
src/routes/_authenticated.tsx Normal file
View File

@@ -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>
</>
)
}

22
src/routes/_authenticated/_sidebar-layout.tsx Normal file
View File

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

2
src/routes/files.tsx → src/routes/_authenticated/_sidebar-layout/files.tsx
View File

@@ -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,
})

9
src/routes/_authenticated/index.tsx Normal file
View File

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

27
src/routes/index.tsx
View File

@@ -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>
</>
)
}

9
src/routes/login.tsx Normal file
View File

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