@stjoseph/prumo 0.2.0 → 0.3.0

package/templates/web/src/features/oauth/consent-form.tsx

@@ -1,60 +1,91 @@
-import { useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { ApiError, type AuthClient } from '@/api-contract'
 import { Button } from '@/components/ui/button'
-import type { AuthClient } from '@/features/auth/auth-client'
 
-type PublicClient = { client_name?: string }
+type AuthorizationView = {
+  clientId: string
+  clientName: string
+  clientHost: string
+  redirectHost: string
+  redirectsToThisDevice: boolean
+}
+
+type ConsentAuth = Pick<AuthClient, 'baseUrl' | 'fetch'>
+
+async function call<T>(auth: ConsentAuth, path: string, init?: RequestInit): Promise<T> {
+  const response = await auth.fetch(`${auth.baseUrl}/api/oauth${path}`, init)
+
+  if (!response.ok) {
+    throw await ApiError.fromResponse(response)
+  }
+
+  return (await response.json()) as T
+}
 
-// Better Auth checks the signed query on submit; what is shown here comes from the same URL.
+// What the user agrees to is shown by host, not only by name: a name is whatever the client chose to write.
 export function ConsentForm({
   auth,
-  clientId,
-  scopes,
+  requestId,
+  leave,
 }: {
-  auth: AuthClient
-  clientId: string
-  scopes: string[]
+  auth: ConsentAuth
+  requestId: string
+  leave: (url: string) => void
 }) {
-  const [failed, setFailed] = useState(false)
-  const client = useQuery({
-    queryKey: ['oauth-client', clientId],
-    queryFn: async () => {
-      const { data } = await auth.$fetch<PublicClient>('/oauth2/public-client', {
-        query: { client_id: clientId },
-      })
-
-      return data
-    },
+  const view = useQuery({
+    queryKey: ['oauth-authorization', requestId],
+    queryFn: () => call<AuthorizationView>(auth, `/authorizations/${requestId}`),
+    retry: false,
+  })
+  const answer = useMutation({
+    mutationFn: (accept: boolean) =>
+      call<{ redirectTo: string }>(auth, `/authorizations/${requestId}/decision`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ accept }),
+      }),
+    // The answer goes back to the client either way, as the code or as access_denied.
+    onSuccess: ({ redirectTo }) => leave(redirectTo),
   })
-  const name = client.data?.client_name ?? clientId
 
-  async function answer(accept: boolean) {
-    // On success Better Auth sends the browser back to the client, so nothing follows here.
-    const { error } = await auth.$fetch('/oauth2/consent', { method: 'POST', body: { accept } })
+  if (view.isPending) {
+    return null
+  }
 
-    setFailed(error !== null)
+  if (view.isError) {
+    return (
+      <p role="alert" className="text-sm text-destructive">
+        This request has expired or was already answered. Start again from the application.
+      </p>
+    )
   }
 
+  const { clientName, clientHost, redirectHost, redirectsToThisDevice } = view.data
+
   return (
     <div className="flex flex-col gap-6">
       <p>
-        <strong>{name}</strong> wants to act on your behalf.
+        <strong>{clientName}</strong> ({clientHost}) wants to act on your behalf.
+      </p>
+      <p className="text-sm text-muted-foreground">
+        If you allow it, you will be sent to <strong>{redirectHost}</strong>.
       </p>
-      {scopes.length > 0 && (
-        <ul className="list-disc pl-6 text-sm text-muted-foreground">
-          {scopes.map((scope) => (
-            <li key={scope}>{scope}</li>
-          ))}
-        </ul>
+      {redirectsToThisDevice && (
+        <p role="note" className="text-sm text-destructive">
+          It returns to a program on this device. Allow it only if you started this from a program
+          you trust.
+        </p>
       )}
-      {failed && (
+      {answer.isError && (
         <p role="alert" className="text-sm text-destructive">
           The authorization could not be completed. Start again from the application.
         </p>
       )}
       <div className="flex gap-3">
-        <Button onClick={() => answer(true)}>Allow</Button>
-        <Button variant="outline" onClick={() => answer(false)}>
+        <Button onClick={() => answer.mutate(true)} disabled={answer.isPending}>
+          Allow
+        </Button>
+        <Button variant="outline" onClick={() => answer.mutate(false)} disabled={answer.isPending}>
           Deny
         </Button>
       </div>

package/templates/web/src/main.tsx

@@ -2,17 +2,19 @@ import '@/index.css'
 import { QueryClient } from '@tanstack/react-query'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { createClient, type Transport } from '@/api-contract'
-import { createAuth } from '@/features/auth/auth-client'
+import { createAuthClient, createClient, type Transport } from '@/api-contract'
 import { App } from './app'
 import { config } from './config'
 
 const transport: Transport = (input, init) => fetch(input, { ...init, credentials: 'include' })
 
+const auth = createAuthClient({ baseUrl: config.VITE_API_URL, fetch: transport })
+
 const context = {
   queryClient: new QueryClient(),
-  api: createClient({ baseUrl: config.VITE_API_URL, fetch: transport }),
-  auth: createAuth({ baseUrl: config.VITE_API_URL, fetch: transport }),
+  // Through the auth client, so an expired access token is refreshed and the request repeated.
+  api: createClient({ baseUrl: config.VITE_API_URL, fetch: auth.fetch }),
+  auth,
 }
 
 const root = document.getElementById('root')

package/templates/web/src/router.tsx

@@ -1,7 +1,6 @@
 import type { QueryClient } from '@tanstack/react-query'
 import { createRouter, type RouterHistory } from '@tanstack/react-router'
-import type { ApiClient } from '@/api-contract'
-import type { AuthClient } from '@/features/auth/auth-client'
+import type { ApiClient, AuthClient } from '@/api-contract'
 import { routeTree } from './routeTree.gen'
 
 export type RouterContext = {

package/templates/web/src/routes/_authenticated/consent.tsx

@@ -2,20 +2,21 @@ import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 import { ConsentForm } from '@/features/oauth/consent-form'
 
-// Loose, because every parameter Better Auth signed has to stay in the URL for the consent request.
+// The API sends the browser here with the id of the authorization an MCP client asked for. Signing in first, when
+// needed, comes back to this same address.
 export const Route = createFileRoute('/_authenticated/consent')({
-  validateSearch: z.looseObject({ client_id: z.string(), scope: z.string().default('') }),
+  validateSearch: z.object({ request: z.uuid() }),
   component: ConsentPage,
 })
 
 function ConsentPage() {
   const { auth } = Route.useRouteContext()
-  const { client_id, scope } = Route.useSearch()
+  const { request } = Route.useSearch()
 
   return (
     <>
       <h1 className="text-2xl font-semibold">Allow access</h1>
-      <ConsentForm auth={auth} clientId={client_id} scopes={scope.split(' ').filter(Boolean)} />
+      <ConsentForm auth={auth} requestId={request} leave={(url) => window.location.assign(url)} />
     </>
   )
 }

package/templates/web/src/routes/_authenticated.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
-import { sessionQuery } from '@/features/auth/session'
+import { sessionQuery } from '@/api-contract'
 
 export const Route = createFileRoute('/_authenticated')({
   beforeLoad: async ({ context, location }) => {

package/templates/web/test/api-contract/auth.spec.ts

@@ -0,0 +1,155 @@
+import { API_URL, fakeTransport, json } from '@test/support/fake-transport'
+import { describe, expect, it } from 'vitest'
+import { createAuthClient, type TokenStore, type Tokens } from '@/api-contract'
+
+const TOKENS: Tokens = { accessToken: 'access-1', refreshToken: 'refresh-1', expiresIn: 900 }
+
+function memoryStore(initial: Tokens | null = null): TokenStore & { current: Tokens | null } {
+  return {
+    current: initial,
+    async read() {
+      return this.current
+    },
+    async write(tokens) {
+      this.current = tokens
+    },
+  }
+}
+
+describe('createAuthClient on the web', () => {
+  it('refreshes once on a 401, repeats the request, and asks nothing of the body', async () => {
+    const calls: string[] = []
+    let valid = false
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      fetch: fakeTransport({
+        'GET /api/v1/things': () => {
+          calls.push('things')
+          return valid ? json(200, []) : json(401, {})
+        },
+        'POST /api/auth/refresh': (request) => {
+          calls.push(`refresh:${request.headers.get('x-auth-transport')}`)
+          valid = true
+          return new Response(null, { status: 204 })
+        },
+      }),
+    })
+
+    const response = await auth.fetch(`${API_URL}/api/v1/things`)
+
+    expect(response.status).toBe(200)
+    expect(calls).toEqual(['things', 'refresh:null', 'things'])
+  })
+
+  it('makes one refresh for every request refused at once', async () => {
+    let refreshes = 0
+    let valid = false
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      fetch: fakeTransport({
+        'GET /api/v1/things': () => (valid ? json(200, []) : json(401, {})),
+        'POST /api/auth/refresh': async () => {
+          refreshes += 1
+          await new Promise((resolve) => setTimeout(resolve, 10))
+          valid = true
+          return new Response(null, { status: 204 })
+        },
+      }),
+    })
+
+    const responses = await Promise.all([1, 2, 3].map(() => auth.fetch(`${API_URL}/api/v1/things`)))
+
+    expect(responses.map((response) => response.status)).toEqual([200, 200, 200])
+    expect(refreshes).toBe(1)
+  })
+
+  it('repeats the request when another tab rotated the token first', async () => {
+    let valid = false
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      fetch: fakeTransport({
+        'GET /api/v1/things': () => {
+          const response = valid ? json(200, []) : json(401, {})
+          valid = true
+          return response
+        },
+        'POST /api/auth/refresh': () => json(409, {}),
+      }),
+    })
+
+    expect((await auth.fetch(`${API_URL}/api/v1/things`)).status).toBe(200)
+  })
+
+  it('answers a visitor without a session with null', async () => {
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      fetch: fakeTransport({
+        'GET /api/auth/session': () => json(401, {}),
+        'POST /api/auth/refresh': () => json(401, {}),
+      }),
+    })
+
+    expect(await auth.getSession()).toBeNull()
+  })
+})
+
+describe('createAuthClient for a native app', () => {
+  it('keeps the tokens it signs in with, and sends them as a bearer', async () => {
+    const tokens = memoryStore()
+    let authorization: string | null = null
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      tokens,
+      fetch: fakeTransport({
+        'POST /api/auth/sign-in': (request) =>
+          request.headers.get('x-auth-transport') === 'bearer' ? json(200, TOKENS) : json(400, {}),
+        'GET /api/auth/session': (request) => {
+          authorization = request.headers.get('authorization')
+          return json(200, { user: { id: 'user-1', email: 'ana@example.com' } })
+        },
+      }),
+    })
+
+    await auth.signIn({ email: 'ana@example.com', password: 'correct-horse-battery' })
+    await auth.getSession()
+
+    expect(tokens.current).toEqual(TOKENS)
+    expect(authorization).toBe('Bearer access-1')
+  })
+
+  it('refreshes with the stored token, and forgets both when that fails', async () => {
+    const tokens = memoryStore(TOKENS)
+    let sent: unknown
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      tokens,
+      fetch: fakeTransport({
+        'GET /api/auth/session': () => json(401, {}),
+        'POST /api/auth/refresh': async (request) => {
+          sent = await request.json()
+          return json(401, {})
+        },
+      }),
+    })
+
+    expect(await auth.getSession()).toBeNull()
+    expect(sent).toEqual({ refreshToken: 'refresh-1' })
+    expect(tokens.current).toBeNull()
+  })
+
+  it('forgets the tokens on sign-out even when the request never arrives', async () => {
+    const tokens = memoryStore(TOKENS)
+    const auth = createAuthClient({
+      baseUrl: API_URL,
+      tokens,
+      fetch: fakeTransport({
+        'POST /api/auth/sign-out': () => {
+          throw new TypeError('Network request failed')
+        },
+      }),
+    })
+
+    await expect(auth.signOut()).rejects.toThrow('Network request failed')
+    expect(tokens.current).toBeNull()
+  })
+})

package/templates/web/test/app.spec.tsx

@@ -5,9 +5,17 @@ import userEvent from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
 import type { Profile } from '@/api-contract'
 
-const user = { id: 'user-1', email: 'ana@example.com', name: 'Ana' }
+const user = { id: 'user-1', email: 'ana@example.com' }
 
-const session = { session: { id: 'session-1', userId: user.id }, user }
+const session = { user }
+
+const empty = (status: number) => new Response(null, { status })
+
+// What the API answers a visitor without cookies: no session, and nothing to refresh it with.
+const signedOut = {
+  'GET /api/auth/session': () => json(401, {}),
+  'POST /api/auth/refresh': () => json(401, {}),
+}
 
 const profile: Profile = {
   id: 'profile-1',
@@ -21,7 +29,7 @@ const profile: Profile = {
 
 describe('App', () => {
   it('sends a visitor without a session to sign in', async () => {
-    renderApp('/', fakeTransport({ 'GET /api/auth/get-session': () => json(200, null) }))
+    renderApp('/', fakeTransport(signedOut))
 
     expect(await screen.findByRole('heading', { name: 'Sign in' })).toBeInTheDocument()
   })
@@ -35,10 +43,11 @@ describe('App', () => {
     renderApp(
       '/',
       fakeTransport({
-        'GET /api/auth/get-session': () => json(200, signedIn ? session : null),
-        'POST /api/auth/sign-in/email': () => {
+        ...signedOut,
+        'GET /api/auth/session': () => (signedIn ? json(200, session) : json(401, {})),
+        'POST /api/auth/sign-in': () => {
           signedIn = true
-          return json(200, { redirect: false, token: 'token-1', user })
+          return empty(204)
         },
         'GET /api/v1/users/me': () => json(200, profile),
       }),
@@ -59,17 +68,18 @@ describe('App', () => {
     renderApp(
       '/',
       fakeTransport({
-        'GET /api/auth/get-session': () => json(200, registered ? session : null),
-        'POST /api/auth/sign-up/email': () => {
+        ...signedOut,
+        'GET /api/auth/session': () => (registered ? json(200, session) : json(401, {})),
+        'POST /api/auth/sign-up': () => {
           registered = true
-          return json(200, { token: 'token-1', user })
+          return empty(201)
         },
         'GET /api/v1/users/me': () => json(200, profile),
       }),
     )
 
     await visitor.click(await screen.findByRole('link', { name: 'Sign up' }))
-    await visitor.type(await screen.findByLabelText('Name'), user.name)
+    await visitor.type(await screen.findByLabelText('Name'), 'Ana')
     await visitor.type(screen.getByLabelText('Email'), user.email)
     await visitor.type(screen.getByLabelText('Password'), 'correct-horse-battery')
     await visitor.click(screen.getByRole('button', { name: 'Create account' }))
@@ -82,7 +92,7 @@ describe('App', () => {
     const people = {
       ana: { user, profile },
       bruno: {
-        user: { id: 'user-2', email: 'bruno@example.com', name: 'Bruno' },
+        user: { id: 'user-2', email: 'bruno@example.com' },
         profile: { ...profile, id: 'profile-2', userId: 'user-2', displayName: 'Bruno' },
       },
     }
@@ -91,20 +101,16 @@ describe('App', () => {
     renderApp(
       '/',
       fakeTransport({
-        'GET /api/auth/get-session': () =>
-          json(
-            200,
-            current === null
-              ? null
-              : { session: { id: `session-${current}` }, user: people[current].user },
-          ),
+        ...signedOut,
+        'GET /api/auth/session': () =>
+          current === null ? json(401, {}) : json(200, { user: people[current].user }),
         'POST /api/auth/sign-out': () => {
           current = null
-          return json(200, { success: true })
+          return empty(204)
         },
-        'POST /api/auth/sign-in/email': () => {
+        'POST /api/auth/sign-in': () => {
           current = 'bruno'
-          return json(200, { redirect: false, token: 'token-2', user: people.bruno.user })
+          return empty(204)
         },
         'GET /api/v1/users/me': () => json(200, current === null ? null : people[current].profile),
       }),
@@ -121,13 +127,32 @@ describe('App', () => {
     expect(screen.getByLabelText('Display name')).toHaveValue('Bruno')
   })
 
+  // Fifteen minutes in, the access cookie has expired: the next request is refused once, refreshed, and repeated.
+  it('keeps a visitor signed in across an expired access token', async () => {
+    let refreshed = false
+
+    renderApp(
+      '/',
+      fakeTransport({
+        'GET /api/auth/session': () => (refreshed ? json(200, session) : json(401, {})),
+        'POST /api/auth/refresh': () => {
+          refreshed = true
+          return empty(204)
+        },
+        'GET /api/v1/users/me': () => json(200, profile),
+      }),
+    )
+
+    expect(await screen.findByRole('heading', { name: 'Your profile' })).toBeInTheDocument()
+  })
+
   it('signs a visitor out of this tab even when the sign-out request never arrives', async () => {
     const visitor = userEvent.setup()
 
     renderApp(
       '/',
       fakeTransport({
-        'GET /api/auth/get-session': () => json(200, session),
+        'GET /api/auth/session': () => json(200, session),
         'GET /api/v1/users/me': () => json(200, profile),
         'POST /api/auth/sign-out': () => {
           throw new TypeError('Failed to fetch')

package/templates/web/test/features/auth/sign-in-form.spec.tsx

@@ -11,8 +11,12 @@ describe('SignInForm', () => {
     renderApp(
       '/sign-in',
       fakeTransport({
-        'POST /api/auth/sign-in/email': () =>
-          json(401, { message: 'Invalid email or password', code: 'INVALID_EMAIL_OR_PASSWORD' }),
+        'POST /api/auth/sign-in': () =>
+          json(
+            401,
+            { title: 'Unauthorized', status: 401, detail: 'Invalid email or password' },
+            'application/problem+json',
+          ),
       }),
     )
 

package/templates/web/test/features/oauth/consent-form.spec.tsx

@@ -1,45 +1,102 @@
-import { fakeTransport, json } from '@test/support/fake-transport'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { API_URL, fakeTransport, json } from '@test/support/fake-transport'
 import { renderApp } from '@test/support/render-app'
-import { screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
+import { createAuthClient } from '@/api-contract'
+import { ConsentForm } from '@/features/oauth/consent-form'
 
-const user = { id: 'user-1', email: 'ana@example.com', name: 'Ana' }
+const REQUEST = '0199a7e2-0000-7000-8000-000000000000'
 
-// The shape Better Auth signs: every signed name listed in ba_param, then the signature.
-const SIGNED =
-  'client_id=client-1&scope=openid+profile&ba_param=ba_param&ba_param=client_id&ba_param=scope&sig=signature'
+const view = {
+  clientId: 'https://claude.example.com/client.json',
+  clientName: 'Claude',
+  clientHost: 'claude.example.com',
+  redirectHost: 'claude.example.com',
+  redirectsToThisDevice: false,
+}
 
-afterEach(() => {
-  window.history.replaceState(null, '', '/')
-})
+function renderForm(routes: Parameters<typeof fakeTransport>[0]) {
+  const leave = vi.fn()
+  const auth = createAuthClient({ baseUrl: API_URL, fetch: fakeTransport(routes) })
+
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <ConsentForm auth={auth} requestId={REQUEST} leave={leave} />
+    </QueryClientProvider>,
+  )
+
+  return leave
+}
 
 describe('ConsentForm', () => {
-  it('names the client, lists the scopes and sends the signed query with the answer', async () => {
+  it('names the client and both hosts, and sends the browser where the API says', async () => {
     const visitor = userEvent.setup()
-    let consent: Record<string, unknown> | undefined
+    let decision: unknown
+    const leave = renderForm({
+      [`GET /api/oauth/authorizations/${REQUEST}`]: () => json(200, view),
+      [`POST /api/oauth/authorizations/${REQUEST}/decision`]: async (request) => {
+        decision = await request.json()
+        return json(200, { redirectTo: 'https://claude.example.com/callback?code=c' })
+      },
+    })
 
-    // The OAuth client plugin reads the browser's own URL, not the router's memory history.
-    window.history.replaceState(null, '', `/consent?${SIGNED}&unrelated=1`)
+    expect(await screen.findByText('Claude')).toBeInTheDocument()
+    expect(screen.getByText(/claude\.example\.com\)/)).toBeInTheDocument()
+
+    await visitor.click(screen.getByRole('button', { name: 'Allow' }))
+
+    expect(decision).toEqual({ accept: true })
+    expect(leave).toHaveBeenCalledWith('https://claude.example.com/callback?code=c')
+  })
+
+  it('warns when the code returns to a program on this device', async () => {
+    renderForm({
+      [`GET /api/oauth/authorizations/${REQUEST}`]: () =>
+        json(200, { ...view, redirectHost: 'localhost:33418', redirectsToThisDevice: true }),
+    })
+
+    expect(await screen.findByRole('note')).toHaveTextContent('a program on this device')
+  })
+
+  it('says so when the request has expired', async () => {
+    renderForm({
+      [`GET /api/oauth/authorizations/${REQUEST}`]: () =>
+        json(404, { title: 'Not Found', status: 404 }, 'application/problem+json'),
+    })
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('expired')
+  })
+})
+
+describe('the consent route', () => {
+  // The MCP client opened the browser at the API, which sent it here; without a session, sign-in comes first.
+  it('sends a visitor to sign in first, and back to the same request after', async () => {
+    const visitor = userEvent.setup()
+    let signedIn = false
 
     renderApp(
-      `/consent?${SIGNED}`,
+      `/consent?request=${REQUEST}`,
       fakeTransport({
-        'GET /api/auth/get-session': () =>
-          json(200, { session: { id: 's-1', userId: user.id }, user }),
-        'GET /api/auth/oauth2/public-client': () => json(200, { client_name: 'Claude' }),
-        'POST /api/auth/oauth2/consent': async (request) => {
-          consent = await request.json()
-          return json(200, { redirect: false })
+        'GET /api/auth/session': () =>
+          signedIn
+            ? json(200, { user: { id: 'user-1', email: 'ana@example.com' } })
+            : json(401, {}),
+        'POST /api/auth/refresh': () => json(401, {}),
+        'POST /api/auth/sign-in': () => {
+          signedIn = true
+          return new Response(null, { status: 204 })
         },
+        [`GET /api/oauth/authorizations/${REQUEST}`]: () => json(200, view),
       }),
     )
 
-    expect(await screen.findByText('Claude')).toBeInTheDocument()
-    expect(screen.getByText('profile')).toBeInTheDocument()
+    await visitor.type(await screen.findByLabelText('Email'), 'ana@example.com')
+    await visitor.type(screen.getByLabelText('Password'), 'correct-horse-battery')
+    await visitor.click(screen.getByRole('button', { name: 'Sign in' }))
 
-    await visitor.click(screen.getByRole('button', { name: 'Allow' }))
-
-    expect(consent).toMatchObject({ accept: true, oauth_query: SIGNED })
+    expect(await screen.findByRole('heading', { name: 'Allow access' })).toBeInTheDocument()
+    expect(await screen.findByText('Claude')).toBeInTheDocument()
   })
 })

package/templates/web/test/support/render-app.tsx

@@ -2,15 +2,15 @@ import { QueryClient } from '@tanstack/react-query'
 import { createMemoryHistory } from '@tanstack/react-router'
 import { API_URL } from '@test/support/fake-transport'
 import { render } from '@testing-library/react'
-import { createClient, type Transport } from '@/api-contract'
+import { createAuthClient, createClient, type Transport } from '@/api-contract'
 import { App } from '@/app'
-import { createAuth } from '@/features/auth/auth-client'
 
 export function renderApp(path: string, transport: Transport) {
+  const auth = createAuthClient({ baseUrl: API_URL, fetch: transport })
   const context = {
     queryClient: new QueryClient({ defaultOptions: { queries: { retry: false } } }),
-    api: createClient({ baseUrl: API_URL, fetch: transport }),
-    auth: createAuth({ baseUrl: API_URL, fetch: transport }),
+    api: createClient({ baseUrl: API_URL, fetch: auth.fetch }),
+    auth,
   }
 
   return render(<App context={context} history={createMemoryHistory({ initialEntries: [path] })} />)