@stjoseph/prumo 0.2.0 → 0.4.0

package/templates/web/src/routeTree.gen.ts

@@ -10,8 +10,11 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
+import { Route as ForgotPasswordRouteImport } from './routes/forgot-password'
+import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as SignInRouteImport } from './routes/sign-in'
 import { Route as SignUpRouteImport } from './routes/sign-up'
+import { Route as VerifyEmailRouteImport } from './routes/verify-email'
 import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
 import { Route as AuthenticatedConsentRouteImport } from './routes/_authenticated/consent'
 
@@ -19,6 +22,16 @@ const AuthenticatedRoute = AuthenticatedRouteImport.update({
   id: '/_authenticated',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ForgotPasswordRoute = ForgotPasswordRouteImport.update({
+  id: '/forgot-password',
+  path: '/forgot-password',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ResetPasswordRoute = ResetPasswordRouteImport.update({
+  id: '/reset-password',
+  path: '/reset-password',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const SignInRoute = SignInRouteImport.update({
   id: '/sign-in',
   path: '/sign-in',
@@ -29,6 +42,11 @@ const SignUpRoute = SignUpRouteImport.update({
   path: '/sign-up',
   getParentRoute: () => rootRouteImport,
 } as any)
+const VerifyEmailRoute = VerifyEmailRouteImport.update({
+  id: '/verify-email',
+  path: '/verify-email',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -42,42 +60,71 @@ const AuthenticatedConsentRoute = AuthenticatedConsentRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof AuthenticatedIndexRoute
+  '/forgot-password': typeof ForgotPasswordRoute
+  '/reset-password': typeof ResetPasswordRoute
   '/sign-in': typeof SignInRoute
   '/sign-up': typeof SignUpRoute
+  '/verify-email': typeof VerifyEmailRoute
   '/consent': typeof AuthenticatedConsentRoute
 }
 export interface FileRoutesByTo {
+  '/forgot-password': typeof ForgotPasswordRoute
+  '/reset-password': typeof ResetPasswordRoute
   '/sign-in': typeof SignInRoute
   '/sign-up': typeof SignUpRoute
+  '/verify-email': typeof VerifyEmailRoute
   '/consent': typeof AuthenticatedConsentRoute
   '/': typeof AuthenticatedIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_authenticated': typeof AuthenticatedRouteWithChildren
+  '/forgot-password': typeof ForgotPasswordRoute
+  '/reset-password': typeof ResetPasswordRoute
   '/sign-in': typeof SignInRoute
   '/sign-up': typeof SignUpRoute
+  '/verify-email': typeof VerifyEmailRoute
   '/_authenticated/consent': typeof AuthenticatedConsentRoute
   '/_authenticated/': typeof AuthenticatedIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/sign-in' | '/sign-up' | '/consent'
+  fullPaths:
+    | '/'
+    | '/forgot-password'
+    | '/reset-password'
+    | '/sign-in'
+    | '/sign-up'
+    | '/verify-email'
+    | '/consent'
   fileRoutesByTo: FileRoutesByTo
-  to: '/sign-in' | '/sign-up' | '/consent' | '/'
+  to:
+    | '/forgot-password'
+    | '/reset-password'
+    | '/sign-in'
+    | '/sign-up'
+    | '/verify-email'
+    | '/consent'
+    | '/'
   id:
     | '__root__'
     | '/_authenticated'
+    | '/forgot-password'
+    | '/reset-password'
     | '/sign-in'
     | '/sign-up'
+    | '/verify-email'
     | '/_authenticated/consent'
     | '/_authenticated/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
+  ForgotPasswordRoute: typeof ForgotPasswordRoute
+  ResetPasswordRoute: typeof ResetPasswordRoute
   SignInRoute: typeof SignInRoute
   SignUpRoute: typeof SignUpRoute
+  VerifyEmailRoute: typeof VerifyEmailRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -89,6 +136,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/forgot-password': {
+      id: '/forgot-password'
+      path: '/forgot-password'
+      fullPath: '/forgot-password'
+      preLoaderRoute: typeof ForgotPasswordRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/reset-password': {
+      id: '/reset-password'
+      path: '/reset-password'
+      fullPath: '/reset-password'
+      preLoaderRoute: typeof ResetPasswordRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/sign-in': {
       id: '/sign-in'
       path: '/sign-in'
@@ -103,6 +164,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SignUpRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/verify-email': {
+      id: '/verify-email'
+      path: '/verify-email'
+      fullPath: '/verify-email'
+      preLoaderRoute: typeof VerifyEmailRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authenticated/': {
       id: '/_authenticated/'
       path: '/'
@@ -136,8 +204,11 @@ const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
 
 const rootRouteChildren: RootRouteChildren = {
   AuthenticatedRoute: AuthenticatedRouteWithChildren,
+  ForgotPasswordRoute: ForgotPasswordRoute,
+  ResetPasswordRoute: ResetPasswordRoute,
   SignInRoute: SignInRoute,
   SignUpRoute: SignUpRoute,
+  VerifyEmailRoute: VerifyEmailRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

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/src/routes/forgot-password.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ForgotPasswordForm } from '@/features/auth/forgot-password-form'
+
+export const Route = createFileRoute('/forgot-password')({
+  component: ForgotPasswordPage,
+})
+
+function ForgotPasswordPage() {
+  const { auth } = Route.useRouteContext()
+
+  return (
+    <>
+      <h1 className="text-2xl font-semibold">Reset your password</h1>
+      <ForgotPasswordForm auth={auth} />
+    </>
+  )
+}

package/templates/web/src/routes/reset-password.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+import { ResetPasswordForm } from '@/features/auth/reset-password-form'
+
+export const Route = createFileRoute('/reset-password')({
+  validateSearch: z.object({ email: z.email() }),
+  component: ResetPasswordPage,
+})
+
+function ResetPasswordPage() {
+  const { auth } = Route.useRouteContext()
+  const { email } = Route.useSearch()
+
+  return (
+    <>
+      <h1 className="text-2xl font-semibold">Choose a new password</h1>
+      <ResetPasswordForm auth={auth} email={email} />
+    </>
+  )
+}

package/templates/web/src/routes/sign-in.tsx

@@ -1,20 +1,27 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 import { SignInForm } from '@/features/auth/sign-in-form'
+import { SocialButtons } from '@/features/auth/social-buttons' // prumo:social
 
 export const Route = createFileRoute('/sign-in')({
-  validateSearch: z.object({ redirect: z.string().optional() }),
+  validateSearch: z.object({
+    redirect: z.string().optional(),
+    error: z.string().optional(), // prumo:social
+  }),
   component: SignInPage,
 })
 
 function SignInPage() {
   const { auth } = Route.useRouteContext()
-  const { redirect } = Route.useSearch()
+  const search = Route.useSearch()
 
   return (
     <>
       <h1 className="text-2xl font-semibold">Sign in</h1>
-      <SignInForm auth={auth} redirect={redirect} />
+      {/* prumo:social */}
+      <SocialButtons auth={auth} returnTo={search.redirect} error={search.error} />
+      {/* prumo:end-social */}
+      <SignInForm auth={auth} redirect={search.redirect} />
     </>
   )
 }

package/templates/web/src/routes/sign-up.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { SignUpForm } from '@/features/auth/sign-up-form'
+import { SocialButtons } from '@/features/auth/social-buttons' // prumo:social
 
 export const Route = createFileRoute('/sign-up')({
   component: SignUpPage,
@@ -11,6 +12,9 @@ function SignUpPage() {
   return (
     <>
       <h1 className="text-2xl font-semibold">Create an account</h1>
+      {/* prumo:social */}
+      <SocialButtons auth={auth} returnTo={undefined} error={undefined} />
+      {/* prumo:end-social */}
       <SignUpForm auth={auth} />
     </>
   )

package/templates/web/src/routes/verify-email.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+import { VerifyEmailForm } from '@/features/auth/verify-email-form'
+
+export const Route = createFileRoute('/verify-email')({
+  validateSearch: z.object({ email: z.email() }),
+  component: VerifyEmailPage,
+})
+
+function VerifyEmailPage() {
+  const { auth } = Route.useRouteContext()
+  const { email } = Route.useSearch()
+
+  return (
+    <>
+      <h1 className="text-2xl font-semibold">Confirm your email</h1>
+      <VerifyEmailForm auth={auth} email={email} />
+    </>
+  )
+}

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')