Skip to content

Commit 4a09897

Browse files
committed
clean up and fixes
1 parent 0c7be89 commit 4a09897

File tree

8 files changed

+87
-48
lines changed

8 files changed

+87
-48
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import '@radix-ui/themes/styles.css';

examples/react/start-workos/src/routeTree.gen.ts

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
import { Route as rootRouteImport } from './routes/__root'
1212
import { Route as LogoutRouteImport } from './routes/logout'
13+
import { Route as ClientRouteImport } from './routes/client'
1314
import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
1415
import { Route as IndexRouteImport } from './routes/index'
1516
import { Route as AuthenticatedAccountRouteImport } from './routes/_authenticated/account'
@@ -20,6 +21,11 @@ const LogoutRoute = LogoutRouteImport.update({
2021
path: '/logout',
2122
getParentRoute: () => rootRouteImport,
2223
} as any)
24+
const ClientRoute = ClientRouteImport.update({
25+
id: '/client',
26+
path: '/client',
27+
getParentRoute: () => rootRouteImport,
28+
} as any)
2329
const AuthenticatedRoute = AuthenticatedRouteImport.update({
2430
id: '/_authenticated',
2531
getParentRoute: () => rootRouteImport,
@@ -42,12 +48,14 @@ const ApiAuthCallbackRoute = ApiAuthCallbackRouteImport.update({
4248

4349
export interface FileRoutesByFullPath {
4450
'/': typeof IndexRoute
51+
'/client': typeof ClientRoute
4552
'/logout': typeof LogoutRoute
4653
'/account': typeof AuthenticatedAccountRoute
4754
'/api/auth/callback': typeof ApiAuthCallbackRoute
4855
}
4956
export interface FileRoutesByTo {
5057
'/': typeof IndexRoute
58+
'/client': typeof ClientRoute
5159
'/logout': typeof LogoutRoute
5260
'/account': typeof AuthenticatedAccountRoute
5361
'/api/auth/callback': typeof ApiAuthCallbackRoute
@@ -56,19 +64,21 @@ export interface FileRoutesById {
5664
__root__: typeof rootRouteImport
5765
'/': typeof IndexRoute
5866
'/_authenticated': typeof AuthenticatedRouteWithChildren
67+
'/client': typeof ClientRoute
5968
'/logout': typeof LogoutRoute
6069
'/_authenticated/account': typeof AuthenticatedAccountRoute
6170
'/api/auth/callback': typeof ApiAuthCallbackRoute
6271
}
6372
export interface FileRouteTypes {
6473
fileRoutesByFullPath: FileRoutesByFullPath
65-
fullPaths: '/' | '/logout' | '/account' | '/api/auth/callback'
74+
fullPaths: '/' | '/client' | '/logout' | '/account' | '/api/auth/callback'
6675
fileRoutesByTo: FileRoutesByTo
67-
to: '/' | '/logout' | '/account' | '/api/auth/callback'
76+
to: '/' | '/client' | '/logout' | '/account' | '/api/auth/callback'
6877
id:
6978
| '__root__'
7079
| '/'
7180
| '/_authenticated'
81+
| '/client'
7282
| '/logout'
7383
| '/_authenticated/account'
7484
| '/api/auth/callback'
@@ -77,6 +87,7 @@ export interface FileRouteTypes {
7787
export interface RootRouteChildren {
7888
IndexRoute: typeof IndexRoute
7989
AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
90+
ClientRoute: typeof ClientRoute
8091
LogoutRoute: typeof LogoutRoute
8192
ApiAuthCallbackRoute: typeof ApiAuthCallbackRoute
8293
}
@@ -90,6 +101,13 @@ declare module '@tanstack/react-router' {
90101
preLoaderRoute: typeof LogoutRouteImport
91102
parentRoute: typeof rootRouteImport
92103
}
104+
'/client': {
105+
id: '/client'
106+
path: '/client'
107+
fullPath: '/client'
108+
preLoaderRoute: typeof ClientRouteImport
109+
parentRoute: typeof rootRouteImport
110+
}
93111
'/_authenticated': {
94112
id: '/_authenticated'
95113
path: ''
@@ -136,6 +154,7 @@ const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
136154
const rootRouteChildren: RootRouteChildren = {
137155
IndexRoute: IndexRoute,
138156
AuthenticatedRoute: AuthenticatedRouteWithChildren,
157+
ClientRoute: ClientRoute,
139158
LogoutRoute: LogoutRoute,
140159
ApiAuthCallbackRoute: ApiAuthCallbackRoute,
141160
}
@@ -144,10 +163,11 @@ export const routeTree = rootRouteImport
144163
._addFileTypes<FileRouteTypes>()
145164

146165
import type { getRouter } from './router.tsx'
147-
import type { createStart } from '@tanstack/react-start'
166+
import type { startInstance } from './start.ts'
148167
declare module '@tanstack/react-start' {
149168
interface Register {
150169
ssr: true
151170
router: Awaited<ReturnType<typeof getRouter>>
171+
config: Awaited<ReturnType<typeof startInstance.getOptions>>
152172
}
153173
}

examples/react/start-workos/src/routes/__root.tsx

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Box, Button, Card, Container, Flex, Theme } from '@radix-ui/themes';
2-
import '@radix-ui/themes/styles.css';
32
import { HeadContent, Link, Outlet, Scripts, createRootRoute } from '@tanstack/react-router';
43
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
54
import { Suspense } from 'react';
65
import { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';
6+
import { AuthKitProvider } from '@workos/authkit-tanstack-react-start/client';
77
import Footer from '../components/footer';
88
import SignInButton from '../components/sign-in-button';
99
import type { ReactNode } from 'react';
10+
import appCssUrl from '../app.css?url';
1011

1112
export const Route = createRootRoute({
1213
head: () => ({
@@ -19,9 +20,10 @@ export const Route = createRootRoute({
1920
content: 'width=device-width, initial-scale=1',
2021
},
2122
{
22-
title: '@workos/authkit-tanstack-react-start',
23+
title: 'AuthKit Example in TanStack Start',
2324
},
2425
],
26+
links: [{ rel: 'stylesheet', href: appCssUrl }],
2527
}),
2628
loader: async () => {
2729
// getAuth() is a server function - works during client-side navigation
@@ -40,50 +42,56 @@ function RootComponent() {
4042
const { user, url } = Route.useLoaderData();
4143
return (
4244
<RootDocument>
43-
<Theme accentColor="iris" panelBackground="solid" style={{ backgroundColor: 'var(--gray-1)' }}>
44-
<Container style={{ backgroundColor: 'var(--gray-1)' }}>
45-
<Flex direction="column" gap="5" p="5" height="100vh">
46-
<Box asChild flexGrow="1">
47-
<Card size="4">
48-
<Flex direction="column" height="100%">
49-
<Flex asChild justify="between">
50-
<header>
51-
<Flex gap="4">
52-
<Button asChild variant="soft">
53-
<Link to="/">Home</Link>
54-
</Button>
45+
<AuthKitProvider>
46+
<Theme accentColor="iris" panelBackground="solid" style={{ backgroundColor: 'var(--gray-1)' }}>
47+
<Container style={{ backgroundColor: 'var(--gray-1)' }}>
48+
<Flex direction="column" gap="5" p="5" height="100vh">
49+
<Box asChild flexGrow="1">
50+
<Card size="4">
51+
<Flex direction="column" height="100%">
52+
<Flex asChild justify="between">
53+
<header>
54+
<Flex gap="4">
55+
<Button asChild variant="soft">
56+
<Link to="/">Home</Link>
57+
</Button>
5558

56-
<Button asChild variant="soft">
57-
<Link to="/account">Account</Link>
58-
</Button>
59-
</Flex>
59+
<Button asChild variant="soft">
60+
<Link to="/account">Account</Link>
61+
</Button>
6062

61-
<Suspense fallback={<div>Loading...</div>}>
62-
<SignInButton user={user} url={url} />
63-
</Suspense>
64-
</header>
65-
</Flex>
63+
<Button asChild variant="soft">
64+
<Link to="/client">Client Demo</Link>
65+
</Button>
66+
</Flex>
67+
68+
<Suspense fallback={<div>Loading...</div>}>
69+
<SignInButton user={user} url={url} />
70+
</Suspense>
71+
</header>
72+
</Flex>
6673

67-
<Flex flexGrow="1" align="center" justify="center">
68-
<main>
69-
<Outlet />
70-
</main>
74+
<Flex flexGrow="1" align="center" justify="center">
75+
<main>
76+
<Outlet />
77+
</main>
78+
</Flex>
7179
</Flex>
72-
</Flex>
73-
</Card>
74-
</Box>
75-
<Footer />
76-
</Flex>
77-
</Container>
78-
</Theme>
79-
<TanStackRouterDevtools position="bottom-right" />
80+
</Card>
81+
</Box>
82+
<Footer />
83+
</Flex>
84+
</Container>
85+
</Theme>
86+
<TanStackRouterDevtools position="bottom-right" />
87+
</AuthKitProvider>
8088
</RootDocument>
8189
);
8290
}
8391

8492
function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
8593
return (
86-
<html>
94+
<html lang="en">
8795
<head>
8896
<HeadContent />
8997
</head>

examples/react/start-workos/src/routes/_authenticated.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { redirect, createFileRoute } from '@tanstack/react-router';
1+
import { createFileRoute, redirect } from '@tanstack/react-router';
22
import { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';
33

44
export const Route = createFileRoute('/_authenticated')({

examples/react/start-workos/src/routes/client.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { createFileRoute, Link } from '@tanstack/react-router';
2-
import { Badge, Box, Button, Code, Flex, Heading, Text, TextField, Callout } from '@radix-ui/themes';
1+
import { Link, createFileRoute } from '@tanstack/react-router';
2+
import { Badge, Box, Button, Callout, Code, Flex, Heading, Text, TextField } from '@radix-ui/themes';
33
import { useAccessToken, useAuth } from '@workos/authkit-tanstack-react-start/client';
44
import { useState } from 'react';
55

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.css?url' {
4+
const url: string;
5+
export default url;
6+
}

packages/start-server-core/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"devDependencies": {
7676
"@standard-schema/spec": "^1.0.0",
7777
"cookie-es": "^2.0.0",
78-
"fetchdts": "^0.1.6"
78+
"fetchdts": "^0.1.6",
79+
"vite": "^7.1.7"
7980
}
8081
}

pnpm-lock.yaml

Lines changed: 8 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)