diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 20a48e5..0f51951 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -9,38 +9,61 @@ // 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 ProtectedRouteImport } from './routes/_protected' import { Route as IndexRouteImport } from './routes/index' +import { Route as ProtectedAdminIndexRouteImport } from './routes/_protected/admin/index' +const ProtectedRoute = ProtectedRouteImport.update({ + id: '/_protected', + getParentRoute: () => rootRouteImport, +} as any) const IndexRoute = IndexRouteImport.update({ id: '/', path: '/', getParentRoute: () => rootRouteImport, } as any) +const ProtectedAdminIndexRoute = ProtectedAdminIndexRouteImport.update({ + id: '/admin/', + path: '/admin/', + getParentRoute: () => ProtectedRoute, +} as any) export interface FileRoutesByFullPath { '/': typeof IndexRoute + '/admin/': typeof ProtectedAdminIndexRoute } export interface FileRoutesByTo { '/': typeof IndexRoute + '/admin': typeof ProtectedAdminIndexRoute } export interface FileRoutesById { __root__: typeof rootRouteImport '/': typeof IndexRoute + '/_protected': typeof ProtectedRouteWithChildren + '/_protected/admin/': typeof ProtectedAdminIndexRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' + fullPaths: '/' | '/admin/' fileRoutesByTo: FileRoutesByTo - to: '/' - id: '__root__' | '/' + to: '/' | '/admin' + id: '__root__' | '/' | '/_protected' | '/_protected/admin/' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute + ProtectedRoute: typeof ProtectedRouteWithChildren } declare module '@tanstack/react-router' { interface FileRoutesByPath { + '/_protected': { + id: '/_protected' + path: '' + fullPath: '/' + preLoaderRoute: typeof ProtectedRouteImport + parentRoute: typeof rootRouteImport + } '/': { id: '/' path: '/' @@ -48,11 +71,31 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexRouteImport parentRoute: typeof rootRouteImport } + '/_protected/admin/': { + id: '/_protected/admin/' + path: '/admin' + fullPath: '/admin/' + preLoaderRoute: typeof ProtectedAdminIndexRouteImport + parentRoute: typeof ProtectedRoute + } } } +interface ProtectedRouteChildren { + ProtectedAdminIndexRoute: typeof ProtectedAdminIndexRoute +} + +const ProtectedRouteChildren: ProtectedRouteChildren = { + ProtectedAdminIndexRoute: ProtectedAdminIndexRoute, +} + +const ProtectedRouteWithChildren = ProtectedRoute._addFileChildren( + ProtectedRouteChildren, +) + const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, + ProtectedRoute: ProtectedRouteWithChildren, } export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren) diff --git a/src/routes/_protected.tsx b/src/routes/_protected.tsx new file mode 100644 index 0000000..918ca0d --- /dev/null +++ b/src/routes/_protected.tsx @@ -0,0 +1,28 @@ +import { auth, clerkClient } from '@clerk/tanstack-react-start/server' +import { createFileRoute, redirect } from '@tanstack/react-router' +import { createServerFn } from '@tanstack/react-start' + +// Server function to check auth and redirect to login if not authenticated +const checkAuth = createServerFn().handler(async () => { + try { + const { isAuthenticated, userId } = await auth() + if (!isAuthenticated) { + throw redirect({ to: '/' }) + } + + // Get the user's full `Backend User` object + const user = await clerkClient().users.getUser(userId) + + return { userId, firstName: user?.firstName } + } catch (error) { + throw redirect({ to: '/' }) + } +}) + +// Protected route with auth check +export const Route = createFileRoute('/_protected')({ + beforeLoad: async () => await checkAuth(), + loader: async ({ context }) => { + return { userId: context.userId, firstName: context.firstName } + }, +}) \ No newline at end of file diff --git a/src/routes/_protected/admin/index.tsx b/src/routes/_protected/admin/index.tsx new file mode 100644 index 0000000..650e944 --- /dev/null +++ b/src/routes/_protected/admin/index.tsx @@ -0,0 +1,16 @@ +import { UserButton } from '@clerk/tanstack-react-start'; +import { createFileRoute, useLoaderData } from '@tanstack/react-router' + +export const Route = createFileRoute('/_protected/admin/')({ + component: RouteComponent, +}) + +function RouteComponent() { + const { firstName } = useLoaderData({ from: '/_protected' }); + return ( +
Hello {firstName}!
+