@stjoseph/prumo 0.2.0 → 0.3.0

package/templates/mobile/src/features/auth/token-store.ts

@@ -0,0 +1,21 @@
+import * as SecureStore from 'expo-secure-store'
+import type { TokenStore, Tokens } from '@/api-contract'
+
+const KEY = 'auth.tokens'
+
+// The Keychain on iOS and the Keystore on Android: the tokens never sit in plain storage, MMKV included.
+export const secureTokenStore: TokenStore = {
+  async read() {
+    const value = await SecureStore.getItemAsync(KEY)
+
+    return value === null ? null : (JSON.parse(value) as Tokens)
+  },
+
+  async write(tokens) {
+    if (tokens === null) {
+      await SecureStore.deleteItemAsync(KEY)
+    } else {
+      await SecureStore.setItemAsync(KEY, JSON.stringify(tokens))
+    }
+  },
+}

package/templates/mobile/src/features/clients/clients-context.tsx

@@ -1,6 +1,5 @@
 import { createContext, type ReactNode, useContext } from 'react'
-import type { ApiClient } from '@/api-contract'
-import type { AuthClient } from '@/features/auth/auth-client'
+import type { ApiClient, AuthClient } from '@/api-contract'
 
 type Clients = { api: ApiClient; auth: AuthClient }
 

package/templates/mobile/test/features/auth/authenticated-layout.spec.tsx

@@ -1,26 +1,28 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { API_URL, fakeTransport, json } from '@test/support/fake-transport'
-import { createAuthClient } from 'better-auth/react'
+import { memoryTokenStore } from '@test/support/memory-token-store'
 import { renderRouter, screen } from 'expo-router/testing-library'
 import type { ReactNode } from 'react'
 import { Text } from 'react-native'
-import { createClient } from '@/api-contract'
+import { createAuthClient, createClient } from '@/api-contract'
 import AuthenticatedLayout from '@/app/(app)/_layout'
-import type { AuthClient } from '@/features/auth/auth-client'
 import { ClientsProvider } from '@/features/clients/clients-context'
 
-const user = { id: 'user-1', email: 'ana@example.com', name: 'Ana' }
+const user = { id: 'user-1', email: 'ana@example.com' }
+
+const TOKENS = { accessToken: 'access-1', refreshToken: 'refresh-1', expiresIn: 900 }
 
 async function renderAt(getSession: () => Response | Promise<Response>) {
-  const transport = fakeTransport({ 'GET /api/auth/get-session': getSession })
-  // jest-expo leaves the app manifest empty, and the Expo plugin needs it to build an origin; the layout depends only on
-  // what getSession returns, which the plugin does not change.
+  const transport = fakeTransport({
+    'GET /api/auth/session': getSession,
+    'POST /api/auth/refresh': () => json(401, {}),
+  })
   const auth = createAuthClient({
-    baseURL: API_URL,
-    basePath: '/api/auth',
-    fetchOptions: { customFetchImpl: transport },
-  }) as unknown as AuthClient
-  const clients = { auth, api: createClient({ baseUrl: API_URL, fetch: transport }) }
+    baseUrl: API_URL,
+    fetch: transport,
+    tokens: memoryTokenStore(TOKENS),
+  })
+  const clients = { auth, api: createClient({ baseUrl: API_URL, fetch: auth.fetch }) }
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
 
   function Providers({ children }: { children: ReactNode }) {
@@ -46,7 +48,7 @@ describe('AuthenticatedLayout', () => {
   it('waits for a session still on its way instead of sending a signed-in visitor to sign in', async () => {
     await renderAt(async () => {
       await new Promise((resolve) => setTimeout(resolve, 50))
-      return json(200, { session: { id: 'session-1', userId: user.id }, user })
+      return json(200, { user })
     })
 
     expect(await screen.findByText('Your profile')).toBeOnTheScreen()
@@ -54,7 +56,7 @@ describe('AuthenticatedLayout', () => {
   })
 
   it('sends a visitor without a session to sign in', async () => {
-    await renderAt(() => json(200, null))
+    await renderAt(() => json(401, {}))
 
     expect(await screen.findByText('Sign in')).toBeOnTheScreen()
   })

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

@@ -1,23 +1,24 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { API_URL, fakeTransport, json } from '@test/support/fake-transport'
+import { memoryTokenStore } from '@test/support/memory-token-store'
 import { render, screen, userEvent } from '@testing-library/react-native'
-import { createAuthClient } from 'better-auth/react'
+import { createAuthClient } from '@/api-contract'
 import { SignInForm } from '@/features/auth/sign-in-form'
 
 describe('SignInForm', () => {
   it('shows a rejected sign-in as a form-level error', async () => {
     const onSignedIn = jest.fn()
-    // jest-expo leaves the app manifest empty, and the Expo plugin needs it to build an origin; the form under test
-    // depends only on the error Better Auth returns, which the plugin does not change.
     const auth = createAuthClient({
-      baseURL: API_URL,
-      basePath: '/api/auth',
-      fetchOptions: {
-        customFetchImpl: fakeTransport({
-          'POST /api/auth/sign-in/email': () =>
-            json(401, { message: 'Invalid email or password', code: 'INVALID_EMAIL_OR_PASSWORD' }),
-        }),
-      },
+      baseUrl: API_URL,
+      tokens: memoryTokenStore(),
+      fetch: fakeTransport({
+        'POST /api/auth/sign-in': () =>
+          json(
+            401,
+            { title: 'Unauthorized', status: 401, detail: 'Invalid email or password' },
+            'application/problem+json',
+          ),
+      }),
     })
     const user = userEvent.setup()
 

package/templates/mobile/test/features/auth/sign-out-button.spec.tsx

@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { API_URL, fakeTransport, json } from '@test/support/fake-transport'
+import { API_URL, fakeTransport } from '@test/support/fake-transport'
+import { memoryTokenStore } from '@test/support/memory-token-store'
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native'
-import { createAuthClient } from 'better-auth/react'
+import { createAuthClient } from '@/api-contract'
 import { SignOutButton } from '@/features/auth/sign-out-button'
 import { clearUserData } from '@/features/storage/storage'
 
@@ -11,15 +12,13 @@ jest.mock('@/features/storage/storage', () => ({ clearUserData: jest.fn() }))
 async function signOutWith(signOut: () => Response | Promise<Response>) {
   const queryClient = new QueryClient()
   const onSignedOut = jest.fn()
-  // jest-expo leaves the app manifest empty, and the Expo plugin needs it to build an origin; the button depends only on
-  // signOut resolving or failing, which the plugin does not change.
   const auth = createAuthClient({
-    baseURL: API_URL,
-    basePath: '/api/auth',
-    fetchOptions: { customFetchImpl: fakeTransport({ 'POST /api/auth/sign-out': signOut }) },
+    baseUrl: API_URL,
+    tokens: memoryTokenStore({ accessToken: 'a', refreshToken: 'r', expiresIn: 900 }),
+    fetch: fakeTransport({ 'POST /api/auth/sign-out': signOut }),
   })
 
-  queryClient.setQueryData(['session'], { session: { id: 'session-1' }, user: { id: 'user-1' } })
+  queryClient.setQueryData(['session'], { user: { id: 'user-1', email: 'ana@example.com' } })
   queryClient.setQueryData(['profile', 'me'], { id: 'profile-1', displayName: 'Ana' })
 
   await render(
@@ -38,7 +37,7 @@ describe('SignOutButton', () => {
   beforeEach(() => jest.mocked(clearUserData).mockClear())
 
   it('leaves nothing of the user behind for the next person on the device', async () => {
-    const queryClient = await signOutWith(() => json(200, { success: true }))
+    const queryClient = await signOutWith(() => new Response(null, { status: 204 }))
 
     expect(queryClient.getQueryCache().getAll()).toHaveLength(0)
     expect(clearUserData).toHaveBeenCalledTimes(1)

package/templates/mobile/test/support/memory-token-store.ts

@@ -0,0 +1,15 @@
+import type { TokenStore, Tokens } from '@/api-contract'
+
+// expo-secure-store needs the native Keychain or Keystore, which Jest does not have.
+export function memoryTokenStore(initial: Tokens | null = null): TokenStore {
+  let current = initial
+
+  return {
+    async read() {
+      return current
+    },
+    async write(tokens) {
+      current = tokens
+    },
+  }
+}

package/templates/site/scripts/ports.mjs

@@ -25,7 +25,7 @@ const APPS = {
 // A port that moves takes these with it: the key to write, in which app, from which app's port.
 const FOLLOWERS = {
   api: [
-    { app: 'api', key: 'BETTER_AUTH_URL' },
+    { app: 'api', key: 'API_URL' },
     { app: 'web', key: 'VITE_API_URL' },
     { app: 'mobile', key: 'EXPO_PUBLIC_API_URL' },
   ],

package/templates/web/package.json

@@ -16,13 +16,10 @@
   },
   "dependencies": {
     "@base-ui/react": "1.8.0",
-    "@better-auth/core": "1.7.7",
-    "@better-auth/oauth-provider": "1.7.7",
     "@fontsource-variable/geist": "5.3.0",
     "@hookform/resolvers": "5.9.1",
     "@tanstack/react-query": "5.102.8",
     "@tanstack/react-router": "1.170.36",
-    "better-auth": "1.7.7",
     "class-variance-authority": "0.7.1",
     "cn": "0.3.0",
     "lucide-react": "1.45.0",

package/templates/web/scripts/ports.mjs

@@ -25,7 +25,7 @@ const APPS = {
 // A port that moves takes these with it: the key to write, in which app, from which app's port.
 const FOLLOWERS = {
   api: [
-    { app: 'api', key: 'BETTER_AUTH_URL' },
+    { app: 'api', key: 'API_URL' },
     { app: 'web', key: 'VITE_API_URL' },
     { app: 'mobile', key: 'EXPO_PUBLIC_API_URL' },
   ],

package/templates/web/src/api-contract/api-error.ts

@@ -8,13 +8,6 @@ type ProblemDocument = {
   errors?: FieldErrors
 }
 
-type AuthClientError = {
-  status: number
-  statusText: string
-  message?: string
-  code?: string
-}
-
 export class ApiError extends Error {
   constructor(
     readonly status: number,
@@ -44,8 +37,4 @@ export class ApiError extends Error {
       problem.errors ?? {},
     )
   }
-
-  static fromAuthError(error: AuthClientError): ApiError {
-    return new ApiError(error.status, error.code ?? error.statusText, error.message, undefined, {})
-  }
 }

package/templates/web/src/api-contract/auth.ts

@@ -0,0 +1,161 @@
+import { queryOptions } from '@tanstack/react-query'
+import { ApiError } from './api-error'
+import type { Transport } from './client'
+
+export type Session = { user: { id: string; email: string } }
+
+export type Tokens = { accessToken: string; refreshToken: string; expiresIn: number }
+
+export type SignUpRequest = { name: string; email: string; password: string }
+
+export type SignInRequest = { email: string; password: string }
+
+// Where a native client keeps its tokens. The web passes none: its tokens live in cookies no script can read.
+export type TokenStore = {
+  read(): Promise<Tokens | null>
+  write(tokens: Tokens | null): Promise<void>
+}
+
+export type AuthClient = ReturnType<typeof createAuthClient>
+
+export function createAuthClient({
+  baseUrl,
+  fetch,
+  tokens,
+}: {
+  baseUrl: string
+  fetch: Transport
+  tokens?: TokenStore
+}) {
+  const url = (path: string) => `${baseUrl}/api/auth${path}`
+
+  function send(path: string, body?: unknown): Promise<Response> {
+    const headers = new Headers()
+
+    // Asking for the tokens in the body is what makes the API leave cookies out.
+    if (tokens !== undefined) {
+      headers.set('x-auth-transport', 'bearer')
+    }
+
+    if (body !== undefined) {
+      headers.set('content-type', 'application/json')
+    }
+
+    return fetch(url(path), {
+      method: 'POST',
+      headers,
+      body: body === undefined ? undefined : JSON.stringify(body),
+    })
+  }
+
+  async function begin(path: string, body: unknown): Promise<void> {
+    const response = await send(path, body)
+
+    if (!response.ok) {
+      throw await ApiError.fromResponse(response)
+    }
+
+    await tokens?.write((await response.json()) as Tokens)
+  }
+
+  let refreshing: Promise<boolean> | undefined
+
+  // Every request that meets a 401 at once waits on the same refresh: a second refresh would present a token the
+  // first has already rotated.
+  function refresh(): Promise<boolean> {
+    refreshing ??= (async () => {
+      try {
+        // The web has no store and sends its cookie; a native client with nothing stored has nothing to send.
+        const stored = tokens === undefined ? undefined : await tokens.read()
+
+        if (stored === null) {
+          return false
+        }
+
+        const response = await send(
+          '/refresh',
+          stored === undefined ? undefined : { refreshToken: stored.refreshToken },
+        )
+
+        // Another tab rotated the token a moment ago, and the browser already holds the new one.
+        if (response.status === 409) {
+          return true
+        }
+
+        if (!response.ok) {
+          await tokens?.write(null)
+          return false
+        }
+
+        await tokens?.write((await response.json()) as Tokens)
+        return true
+      } finally {
+        refreshing = undefined
+      }
+    })()
+
+    return refreshing
+  }
+
+  // Every request to the API goes through here: with a bearer when there is one, and refreshed once on a 401.
+  const authorized: Transport = async (input, init) => {
+    const attempt = async () => {
+      const headers = new Headers(init?.headers)
+      const stored = await tokens?.read()
+
+      if (stored !== null && stored !== undefined) {
+        headers.set('authorization', `Bearer ${stored.accessToken}`)
+      }
+
+      return fetch(input, { ...init, headers })
+    }
+    const response = await attempt()
+
+    if (response.status !== 401 || !(await refresh())) {
+      return response
+    }
+
+    return attempt()
+  }
+
+  return {
+    baseUrl,
+    fetch: authorized,
+    refresh,
+
+    signUp: (request: SignUpRequest) => begin('/sign-up', request),
+
+    signIn: (request: SignInRequest) => begin('/sign-in', request),
+
+    // The device forgets the tokens whether or not the request arrives: signing out locally is what was asked.
+    async signOut(): Promise<void> {
+      try {
+        const response = await authorized(url('/sign-out'), { method: 'POST' })
+
+        if (!response.ok && response.status !== 401) {
+          throw await ApiError.fromResponse(response)
+        }
+      } finally {
+        await tokens?.write(null)
+      }
+    },
+
+    // A visitor without a session is not an error: the answer is null.
+    async getSession(): Promise<Session | null> {
+      const response = await authorized(url('/session'))
+
+      if (response.status === 401) {
+        return null
+      }
+
+      if (!response.ok) {
+        throw await ApiError.fromResponse(response)
+      }
+
+      return (await response.json()) as Session
+    },
+  }
+}
+
+export const sessionQuery = (auth: Pick<AuthClient, 'getSession'>) =>
+  queryOptions({ queryKey: ['session'], queryFn: () => auth.getSession() })

package/templates/web/src/api-contract/index.ts

@@ -1,4 +1,14 @@
 export { ApiError, type FieldErrors } from './api-error'
+export {
+  type AuthClient,
+  createAuthClient,
+  type Session,
+  type SignInRequest,
+  type SignUpRequest,
+  sessionQuery,
+  type TokenStore,
+  type Tokens,
+} from './auth'
 export { type ApiClient, createClient, type Transport } from './client'
 export {
   LOCALES,

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

@@ -3,14 +3,12 @@ import { useQueryClient } from '@tanstack/react-query'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { ApiError } from '@/api-contract'
+import { type AuthClient, sessionQuery } from '@/api-contract'
 import { Button } from '@/components/ui/button'
 import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { FormError } from '@/features/forms/form-error'
 import { applyServerError } from '@/features/forms/server-errors'
-import type { AuthClient } from './auth-client'
-import { sessionQuery } from './session'
 
 const schema = z.object({
   email: z.email(),
@@ -19,7 +17,13 @@ const schema = z.object({
 
 type SignInValues = z.infer<typeof schema>
 
-export function SignInForm({ auth, redirect }: { auth: AuthClient; redirect: string | undefined }) {
+export function SignInForm({
+  auth,
+  redirect,
+}: {
+  auth: Pick<AuthClient, 'signIn' | 'getSession'>
+  redirect: string | undefined
+}) {
   const queryClient = useQueryClient()
   const navigate = useNavigate()
   const form = useForm<SignInValues>({
@@ -31,20 +35,13 @@ export function SignInForm({ auth, redirect }: { auth: AuthClient; redirect: str
   const { errors, isSubmitting } = form.formState
 
   async function onSubmit(values: SignInValues) {
-    const result = await auth.signIn.email(values)
-
-    if (result.error !== null) {
-      applyServerError(ApiError.fromAuthError(result.error), ['email', 'password'], form.setError)
-      return
-    }
-
-    // prumo:mcp
-    // Signing in during an MCP client's authorization: Better Auth has already sent the browser on.
-    if (result.data.redirect) {
+    try {
+      await auth.signIn(values)
+    } catch (error) {
+      applyServerError(error, ['email', 'password'], form.setError)
       return
     }
 
-    // prumo:end-mcp
     // Invalidating is not enough: nothing observes the session, and the protected route's ensureQueryData
     // would keep returning the cached null. Refetching replaces it before the route reads it.
     await queryClient.refetchQueries({ queryKey: sessionQuery(auth).queryKey })

package/templates/web/src/features/auth/sign-out-button.tsx

@@ -1,9 +1,9 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from '@tanstack/react-router'
+import type { AuthClient } from '@/api-contract'
 import { Button } from '@/components/ui/button'
-import type { AuthClient } from './auth-client'
 
-export function SignOutButton({ auth }: { auth: AuthClient }) {
+export function SignOutButton({ auth }: { auth: Pick<AuthClient, 'signOut'> }) {
   const queryClient = useQueryClient()
   const navigate = useNavigate()
 
@@ -11,8 +11,8 @@ export function SignOutButton({ auth }: { auth: AuthClient }) {
     try {
       await auth.signOut()
     } catch {
-      // Better Auth throws when the request never arrives. The cache is cleared regardless, because data left behind
-      // for the next person on this tab is the worse error; the cookie survives until the server's session expires.
+      // The request may never arrive. The cache is cleared regardless, because data left behind for the next person
+      // on this tab is the worse error; the cookies then survive until the access token expires and the refresh fails.
     }
 
     // The whole cache, not only the session: a query about "me" belongs to whoever was signed in.

package/templates/web/src/features/auth/sign-up-form.tsx

@@ -3,24 +3,22 @@ import { useQueryClient } from '@tanstack/react-query'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { ApiError } from '@/api-contract'
+import { type AuthClient, sessionQuery } from '@/api-contract'
 import { Button } from '@/components/ui/button'
 import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { FormError } from '@/features/forms/form-error'
 import { applyServerError } from '@/features/forms/server-errors'
-import type { AuthClient } from './auth-client'
-import { sessionQuery } from './session'
 
 const schema = z.object({
   name: z.string().min(1).max(80),
   email: z.email(),
-  password: z.string().min(8),
+  password: z.string().min(8).max(128),
 })
 
 type SignUpValues = z.infer<typeof schema>
 
-export function SignUpForm({ auth }: { auth: AuthClient }) {
+export function SignUpForm({ auth }: { auth: Pick<AuthClient, 'signUp' | 'getSession'> }) {
   const queryClient = useQueryClient()
   const navigate = useNavigate()
   const form = useForm<SignUpValues>({
@@ -32,10 +30,10 @@ export function SignUpForm({ auth }: { auth: AuthClient }) {
   const { errors, isSubmitting } = form.formState
 
   async function onSubmit(values: SignUpValues) {
-    const { error } = await auth.signUp.email(values)
-
-    if (error !== null) {
-      applyServerError(ApiError.fromAuthError(error), ['name', 'email', 'password'], form.setError)
+    try {
+      await auth.signUp(values)
+    } catch (error) {
+      applyServerError(error, ['name', 'email', 'password'], form.setError)
       return
     }