feat(pkce)!: consume storage-owned verifier cookie API (authkit-session 0.4.0)

example/src/components/sign-in-button.tsx

@@ -2,7 +2,7 @@ import { Button, Flex } from '@radix-ui/themes';
 import { Link } from '@tanstack/react-router';
 import type { User } from '@workos/authkit-tanstack-react-start';
 
-export default function SignInButton({ large, user, url }: { large?: boolean; user: User | null; url: string }) {
+export default function SignInButton({ large, user }: { large?: boolean; user: User | null }) {
   if (user) {
     return (
       <Flex gap="3">
@@ -17,7 +17,7 @@ export default function SignInButton({ large, user, url }: { large?: boolean; us
 
   return (
     <Button asChild size={large ? '3' : '2'}>
-      <a href={url}>Sign In{large && ' with AuthKit'}</a>
+      <a href="/api/auth/sign-in">Sign In{large && ' with AuthKit'}</a>
     </Button>
   );
 }

example/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as ClientRouteImport } from './routes/client'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AuthenticatedAccountRouteImport } from './routes/_authenticated/account'
+import { Route as ApiAuthSignInRouteImport } from './routes/api/auth/sign-in'
 import { Route as ApiAuthCallbackRouteImport } from './routes/api/auth/callback'
 
 const LogoutRoute = LogoutRouteImport.update({
@@ -40,6 +41,11 @@ const AuthenticatedAccountRoute = AuthenticatedAccountRouteImport.update({
   path: '/account',
   getParentRoute: () => AuthenticatedRoute,
 } as any)
+const ApiAuthSignInRoute = ApiAuthSignInRouteImport.update({
+  id: '/api/auth/sign-in',
+  path: '/api/auth/sign-in',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiAuthCallbackRoute = ApiAuthCallbackRouteImport.update({
   id: '/api/auth/callback',
   path: '/api/auth/callback',
@@ -52,13 +58,15 @@ export interface FileRoutesByFullPath {
   '/logout': typeof LogoutRoute
   '/account': typeof AuthenticatedAccountRoute
   '/api/auth/callback': typeof ApiAuthCallbackRoute
+  '/api/auth/sign-in': typeof ApiAuthSignInRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/client': typeof ClientRoute
   '/logout': typeof LogoutRoute
   '/account': typeof AuthenticatedAccountRoute
   '/api/auth/callback': typeof ApiAuthCallbackRoute
+  '/api/auth/sign-in': typeof ApiAuthSignInRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -68,12 +76,25 @@ export interface FileRoutesById {
   '/logout': typeof LogoutRoute
   '/_authenticated/account': typeof AuthenticatedAccountRoute
   '/api/auth/callback': typeof ApiAuthCallbackRoute
+  '/api/auth/sign-in': typeof ApiAuthSignInRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/client' | '/logout' | '/account' | '/api/auth/callback'
+  fullPaths:
+    | '/'
+    | '/client'
+    | '/logout'
+    | '/account'
+    | '/api/auth/callback'
+    | '/api/auth/sign-in'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/client' | '/logout' | '/account' | '/api/auth/callback'
+  to:
+    | '/'
+    | '/client'
+    | '/logout'
+    | '/account'
+    | '/api/auth/callback'
+    | '/api/auth/sign-in'
   id:
     | '__root__'
     | '/'
@@ -82,6 +103,7 @@ export interface FileRouteTypes {
     | '/logout'
     | '/_authenticated/account'
     | '/api/auth/callback'
+    | '/api/auth/sign-in'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -90,6 +112,7 @@ export interface RootRouteChildren {
   ClientRoute: typeof ClientRoute
   LogoutRoute: typeof LogoutRoute
   ApiAuthCallbackRoute: typeof ApiAuthCallbackRoute
+  ApiAuthSignInRoute: typeof ApiAuthSignInRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -129,6 +152,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedAccountRouteImport
       parentRoute: typeof AuthenticatedRoute
     }
+    '/api/auth/sign-in': {
+      id: '/api/auth/sign-in'
+      path: '/api/auth/sign-in'
+      fullPath: '/api/auth/sign-in'
+      preLoaderRoute: typeof ApiAuthSignInRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/auth/callback': {
       id: '/api/auth/callback'
       path: '/api/auth/callback'
@@ -157,6 +187,7 @@ const rootRouteChildren: RootRouteChildren = {
   ClientRoute: ClientRoute,
   LogoutRoute: LogoutRoute,
   ApiAuthCallbackRoute: ApiAuthCallbackRoute,
+  ApiAuthSignInRoute: ApiAuthSignInRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

example/src/routes/__root.tsx

@@ -3,7 +3,6 @@ import { HeadContent, Link, Outlet, Scripts, createRootRoute } from '@tanstack/r
 import appCssUrl from '../app.css?url';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 import { Suspense } from 'react';
-import { getSignInUrl } from '@workos/authkit-tanstack-react-start';
 import { AuthKitProvider, Impersonation, getAuthAction } from '@workos/authkit-tanstack-react-start/client';
 import Footer from '../components/footer';
 import SignInButton from '../components/sign-in-button';
@@ -29,18 +28,14 @@ export const Route = createRootRoute({
     // getAuthAction() returns auth state without accessToken, safe for client
     // Pass to AuthKitProvider as initialAuth to avoid loading flicker
     const auth = await getAuthAction();
-    const url = await getSignInUrl();
-    return {
-      auth,
-      url,
-    };
+    return { auth };
   },
   component: RootComponent,
   notFoundComponent: () => <div>Not Found</div>,
 });
 
 function RootComponent() {
-  const { auth, url } = Route.useLoaderData();
+  const { auth } = Route.useLoaderData();
   return (
     <RootDocument>
       <AuthKitProvider initialAuth={auth}>
@@ -67,7 +62,7 @@ function RootComponent() {
                         </Flex>
 
                         <Suspense fallback={<div>Loading...</div>}>
-                          <SignInButton user={auth.user} url={url} />
+                          <SignInButton user={auth.user} />
                         </Suspense>
                       </header>
                     </Flex>

example/src/routes/_authenticated.tsx

@@ -1,14 +1,13 @@
 import { redirect, createFileRoute } from '@tanstack/react-router';
-import { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';
+import { getAuth } from '@workos/authkit-tanstack-react-start';
 
 export const Route = createFileRoute('/_authenticated')({
   loader: async ({ location }) => {
     // Loader runs on server (even during client-side navigation via RPC)
     const { user } = await getAuth();
     if (!user) {
-      const path = location.pathname;
-      const href = await getSignInUrl({ data: { returnPathname: path } });
-      throw redirect({ href });
+      const returnPathname = encodeURIComponent(location.pathname);
+      throw redirect({ href: `/api/auth/sign-in?returnPathname=${returnPathname}` });
     }
   },
 });

example/src/routes/api/auth/sign-in.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { getSignInUrl } from '@workos/authkit-tanstack-react-start';
+
+export const Route = createFileRoute('/api/auth/sign-in')({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        const returnPathname = new URL(request.url).searchParams.get('returnPathname');
+        const url = await getSignInUrl(returnPathname ? { data: { returnPathname } } : undefined);
+        return new Response(null, {
+          status: 307,
+          headers: { Location: url },
+        });
+      },
+    },
+  },
+});

example/src/routes/index.tsx

@@ -1,19 +1,18 @@
 import { Button, Flex, Heading, Text } from '@radix-ui/themes';
 import { Link, createFileRoute } from '@tanstack/react-router';
-import { getAuth, getSignInUrl } from '@workos/authkit-tanstack-react-start';
+import { getAuth } from '@workos/authkit-tanstack-react-start';
 import SignInButton from '../components/sign-in-button';
 
 export const Route = createFileRoute('/')({
   component: Home,
   loader: async () => {
     const { user } = await getAuth();
-    const url = await getSignInUrl();
-    return { user, url };
+    return { user };
   },
 });
 
 function Home() {
-  const { user, url } = Route.useLoaderData();
+  const { user } = Route.useLoaderData();
 
   return (
     <Flex direction="column" align="center" gap="2">
@@ -27,7 +26,7 @@ function Home() {
             <Button asChild size="3" variant="soft">
               <Link to="/account">View account</Link>
             </Button>
-            <SignInButton url={url} user={user} large />
+            <SignInButton user={user} large />
           </Flex>
         </>
       ) : (
@@ -37,7 +36,7 @@ function Home() {
           <Text size="5" color="gray" mb="4">
             Sign in to view your account details
           </Text>
-          <SignInButton user={user} url={url} large />
+          <SignInButton user={user} large />
         </>
       )}
     </Flex>

package.json

@@ -64,7 +64,7 @@
     "url": "https://github.com/workos/authkit-tanstack-start/issues"
   },
   "dependencies": {
-    "@workos/authkit-session": "0.3.4"
+    "@workos/authkit-session": "0.4.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": ">=1.0.0",
@@ -97,6 +97,9 @@
     "onlyBuiltDependencies": [
       "@parcel/watcher",
       "esbuild"
-    ]
+    ],
+    "overrides": {
+      "@workos/authkit-session": "link:../authkit-session"
+    }
   }
 }