@stjoseph/prumo 0.0.1

package/templates/mobile/jest.config.js

@@ -0,0 +1,21 @@
+const preset = require('jest-expo/jest-preset')
+
+const [nodeModules, ...rest] = preset.transformIgnorePatterns
+const babel = preset.transform['\\.[jt]sx?$']
+
+if (!nodeModules.includes('(?!(') || babel === undefined) {
+  throw new Error(
+    'jest-expo changed its transform settings; re-check the Better Auth entries below',
+  )
+}
+
+module.exports = {
+  preset: 'jest-expo',
+  moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1' },
+  // Better Auth ships ESM only, partly as .mjs, so it joins the packages jest-expo transforms, with the same Babel.
+  transform: { '\\.mjs$': babel },
+  transformIgnorePatterns: [
+    nodeModules.replace('(?!(', '(?!(better-auth|@better-auth|nanostores|'),
+    ...rest,
+  ],
+}

package/templates/mobile/metro.config.js

@@ -0,0 +1,4 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const { withNativeWind } = require('nativewind/metro')
+
+module.exports = withNativeWind(getDefaultConfig(__dirname), { input: './src/global.css' })

package/templates/mobile/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/templates/mobile/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "mobile",
+  "version": "0.0.1",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "ios": "expo start --ios",
+    "android": "expo start --android",
+    "bundle": "expo export --platform ios --platform android",
+    "lint": "biome check",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "prepare": "node .githooks/install.mjs"
+  },
+  "dependencies": {
+    "@better-auth/expo": "1.7.4",
+    "@hookform/resolvers": "5.9.1",
+    "@tanstack/query-sync-storage-persister": "5.102.8",
+    "@tanstack/react-query": "5.102.8",
+    "@tanstack/react-query-persist-client": "5.102.8",
+    "better-auth": "1.7.4",
+    "class-variance-authority": "0.7.1",
+    "expo": "57.0.22",
+    "expo-constants": "57.0.18",
+    "expo-linking": "57.0.10",
+    "expo-network": "57.0.2",
+    "expo-router": "57.0.21",
+    "expo-secure-store": "57.0.4",
+    "expo-splash-screen": "57.0.9",
+    "expo-status-bar": "57.0.1",
+    "expo-system-ui": "57.0.4",
+    "expo-web-browser": "57.0.3",
+    "nativewind": "4.2.6",
+    "react": "19.2.3",
+    "react-hook-form": "7.88.0",
+    "react-native": "0.86.3",
+    "react-native-css-interop": "0.2.6",
+    "react-native-gesture-handler": "2.32.0",
+    "react-native-mmkv": "4.3.2",
+    "react-native-nitro-modules": "0.37.1",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-screens": "4.26.2",
+    "react-native-worklets": "0.10.1",
+    "zod": "4.6.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.13",
+    "@testing-library/react-native": "14.0.1",
+    "@types/jest": "29.5.14",
+    "@types/node": "24.13.4",
+    "@types/react": "19.2.18",
+    "babel-preset-expo": "57.0.11",
+    "jest": "29.7.0",
+    "jest-expo": "57.0.5",
+    "tailwindcss": "3.4.19",
+    "typescript": "6.0.3"
+  },
+  "engines": {
+    "node": ">=22.17.0"
+  }
+}

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

@@ -0,0 +1,51 @@
+export type FieldErrors = Record<string, string[]>
+
+type ProblemDocument = {
+  title?: string
+  status?: number
+  detail?: string
+  requestId?: string
+  errors?: FieldErrors
+}
+
+type AuthClientError = {
+  status: number
+  statusText: string
+  message?: string
+  code?: string
+}
+
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    readonly title: string,
+    readonly detail: string | undefined,
+    readonly requestId: string | undefined,
+    readonly errors: FieldErrors,
+  ) {
+    super(detail ?? title)
+  }
+
+  static async fromResponse(response: Response): Promise<ApiError> {
+    const requestId = response.headers.get('x-request-id') ?? undefined
+    const isProblem = response.headers.get('content-type')?.includes('application/problem+json')
+
+    if (!isProblem) {
+      return new ApiError(response.status, response.statusText, undefined, requestId, {})
+    }
+
+    const problem = (await response.json()) as ProblemDocument
+
+    return new ApiError(
+      response.status,
+      problem.title ?? response.statusText,
+      problem.detail,
+      problem.requestId ?? requestId,
+      problem.errors ?? {},
+    )
+  }
+
+  static fromAuthError(error: AuthClientError): ApiError {
+    return new ApiError(error.status, error.code ?? error.statusText, error.message, undefined, {})
+  }
+}

package/templates/mobile/src/api-contract/client.ts

@@ -0,0 +1,26 @@
+import { ApiError } from './api-error'
+
+export type Transport = typeof fetch
+
+export type ApiClient = ReturnType<typeof createClient>
+
+export function createClient({ baseUrl, fetch }: { baseUrl: string; fetch: Transport }) {
+  async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+    const response = await fetch(`${baseUrl}/api/v1${path}`, {
+      method,
+      headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+      body: body === undefined ? undefined : JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      throw await ApiError.fromResponse(response)
+    }
+
+    return (await response.json()) as T
+  }
+
+  return {
+    get: <T>(path: string) => request<T>('GET', path),
+    patch: <T>(path: string, body: unknown) => request<T>('PATCH', path, body),
+  }
+}

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

@@ -0,0 +1,10 @@
+export { ApiError, type FieldErrors } from './api-error'
+export { type ApiClient, createClient, type Transport } from './client'
+export {
+  LOCALES,
+  type Locale,
+  type Profile,
+  profileQuery,
+  type UpdateProfileRequest,
+  updateProfile,
+} from './profile'

package/templates/mobile/src/api-contract/profile.ts

@@ -0,0 +1,27 @@
+import { queryOptions } from '@tanstack/react-query'
+import type { ApiClient } from './client'
+
+export const LOCALES = ['en', 'pt-BR'] as const
+
+export type Locale = (typeof LOCALES)[number]
+
+export type Profile = {
+  id: string
+  userId: string
+  displayName: string
+  locale: Locale
+  timezone: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type UpdateProfileRequest = Partial<Pick<Profile, 'displayName' | 'locale' | 'timezone'>>
+
+export const profileQuery = (client: ApiClient) =>
+  queryOptions({
+    queryKey: ['profile', 'me'],
+    queryFn: () => client.get<Profile>('/users/me'),
+  })
+
+export const updateProfile = (client: ApiClient, changes: UpdateProfileRequest) =>
+  client.patch<Profile>('/users/me', changes)

package/templates/mobile/src/app/(app)/_layout.tsx

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+import { Redirect, Stack, usePathname } from 'expo-router'
+import { rememberIntendedRoute } from '@/features/auth/intended-route'
+import { sessionQuery } from '@/features/auth/session'
+import { useClients } from '@/features/clients/clients-context'
+
+export default function AuthenticatedLayout() {
+  const { auth } = useClients()
+  const session = useQuery(sessionQuery(auth))
+  const pathname = usePathname()
+
+  if (session.data === null || session.data === undefined) {
+    rememberIntendedRoute(pathname)
+    return <Redirect href="/sign-in" />
+  }
+
+  return <Stack screenOptions={{ headerShown: false }} />
+}

package/templates/mobile/src/app/(app)/index.tsx

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+import { Text } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { profileQuery } from '@/api-contract'
+import { useClients } from '@/features/clients/clients-context'
+import { ProfileForm } from '@/features/profile/profile-form'
+
+export default function ProfileScreen() {
+  const { api } = useClients()
+  const profile = useQuery(profileQuery(api))
+
+  return (
+    <SafeAreaView className="flex-1 justify-center gap-6 p-6">
+      <Text className="text-2xl font-semibold text-neutral-900">Your profile</Text>
+      {profile.data === undefined ? null : <ProfileForm api={api} profile={profile.data} />}
+    </SafeAreaView>
+  )
+}

package/templates/mobile/src/app/(auth)/sign-in.tsx

@@ -0,0 +1,24 @@
+import { Link, useRouter } from 'expo-router'
+import { Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { takeIntendedRoute } from '@/features/auth/intended-route'
+import { SignInForm } from '@/features/auth/sign-in-form'
+import { useClients } from '@/features/clients/clients-context'
+
+export default function SignInScreen() {
+  const { auth } = useClients()
+  const router = useRouter()
+
+  return (
+    <SafeAreaView className="flex-1 justify-center gap-6 p-6">
+      <Text className="text-2xl font-semibold text-neutral-900">Sign in</Text>
+      <SignInForm auth={auth} onSignedIn={() => router.replace(takeIntendedRoute() ?? '/')} />
+      <View className="flex-row gap-1">
+        <Text className="text-sm text-neutral-500">No account?</Text>
+        <Link href="/sign-up" className="text-sm text-neutral-900">
+          Sign up
+        </Link>
+      </View>
+    </SafeAreaView>
+  )
+}

package/templates/mobile/src/app/(auth)/sign-up.tsx

@@ -0,0 +1,23 @@
+import { Link, useRouter } from 'expo-router'
+import { Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { SignUpForm } from '@/features/auth/sign-up-form'
+import { useClients } from '@/features/clients/clients-context'
+
+export default function SignUpScreen() {
+  const { auth } = useClients()
+  const router = useRouter()
+
+  return (
+    <SafeAreaView className="flex-1 justify-center gap-6 p-6">
+      <Text className="text-2xl font-semibold text-neutral-900">Create an account</Text>
+      <SignUpForm auth={auth} onSignedUp={() => router.replace('/')} />
+      <View className="flex-row gap-1">
+        <Text className="text-sm text-neutral-500">Already registered?</Text>
+        <Link href="/sign-in" className="text-sm text-neutral-900">
+          Sign in
+        </Link>
+      </View>
+    </SafeAreaView>
+  )
+}

package/templates/mobile/src/app/_layout.tsx

@@ -0,0 +1,54 @@
+import '@/global.css'
+import { QueryClient, useQuery } from '@tanstack/react-query'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { Stack } from 'expo-router'
+import * as SplashScreen from 'expo-splash-screen'
+import { useEffect, useState } from 'react'
+import { createClient } from '@/api-contract'
+import { config } from '@/config'
+import { createAuth, withSessionCookie } from '@/features/auth/auth-client'
+import { sessionQuery } from '@/features/auth/session'
+import { ClientsProvider, useClients } from '@/features/clients/clients-context'
+import { QUERY_CACHE_MAX_AGE, queryPersister } from '@/features/storage/query-persister'
+
+SplashScreen.preventAutoHideAsync()
+
+function createClients() {
+  const auth = createAuth({ baseUrl: config.apiUrl, fetch })
+  const api = createClient({ baseUrl: config.apiUrl, fetch: withSessionCookie(auth, fetch) })
+
+  return { auth, api }
+}
+
+function Navigation() {
+  const { auth } = useClients()
+  const session = useQuery(sessionQuery(auth))
+
+  useEffect(() => {
+    if (!session.isPending) {
+      SplashScreen.hideAsync()
+    }
+  }, [session.isPending])
+
+  if (session.isPending) {
+    return null
+  }
+
+  return <Stack screenOptions={{ headerShown: false }} />
+}
+
+export default function RootLayout() {
+  const [clients] = useState(createClients)
+  const [queryClient] = useState(() => new QueryClient())
+
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister: queryPersister, maxAge: QUERY_CACHE_MAX_AGE }}
+    >
+      <ClientsProvider clients={clients}>
+        <Navigation />
+      </ClientsProvider>
+    </PersistQueryClientProvider>
+  )
+}

package/templates/mobile/src/components/ui/button.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Pressable, type PressableProps, Text } from 'react-native'
+
+const buttonVariants = cva('h-11 items-center justify-center rounded-lg px-4', {
+  variants: {
+    variant: {
+      default: 'bg-neutral-900',
+      outline: 'border border-neutral-300 bg-transparent',
+    },
+    disabled: { true: 'opacity-50', false: '' },
+  },
+  defaultVariants: { variant: 'default', disabled: false },
+})
+
+const labelVariants = cva('text-base font-medium', {
+  variants: {
+    variant: { default: 'text-white', outline: 'text-neutral-900' },
+  },
+  defaultVariants: { variant: 'default' },
+})
+
+type ButtonProps = Omit<PressableProps, 'children'> &
+  VariantProps<typeof buttonVariants> & { label: string }
+
+export function Button({ label, variant, disabled, className, ...props }: ButtonProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled === true}
+      className={buttonVariants({ variant, disabled: disabled === true, className })}
+      {...props}
+    >
+      <Text className={labelVariants({ variant })}>{label}</Text>
+    </Pressable>
+  )
+}

package/templates/mobile/src/components/ui/field.tsx

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority'
+import { forwardRef } from 'react'
+import { Text, TextInput, type TextInputProps, View } from 'react-native'
+
+const inputVariants = cva('h-11 rounded-lg border px-3 text-base text-neutral-900', {
+  variants: {
+    invalid: { true: 'border-red-600', false: 'border-neutral-300' },
+  },
+  defaultVariants: { invalid: false },
+})
+
+type FieldProps = TextInputProps & { label: string; error: string | undefined }
+
+export const Field = forwardRef<TextInput, FieldProps>(function Field(
+  { label, error, className, ...props },
+  ref,
+) {
+  return (
+    <View testID={`field-${label}`} className="gap-1.5">
+      <Text className="text-sm font-medium text-neutral-900">{label}</Text>
+      <TextInput
+        ref={ref}
+        accessibilityLabel={label}
+        className={inputVariants({ invalid: error !== undefined, className })}
+        {...props}
+      />
+      {error === undefined ? null : <Text className="text-sm text-red-600">{error}</Text>}
+    </View>
+  )
+})

package/templates/mobile/src/config.ts

@@ -0,0 +1,3 @@
+export const config = {
+  apiUrl: process.env.EXPO_PUBLIC_API_URL as string,
+}

package/templates/mobile/src/features/auth/auth-client.ts

@@ -0,0 +1,27 @@
+import { expoClient } from '@better-auth/expo/client'
+import { createAuthClient } from 'better-auth/react'
+import * as SecureStore from 'expo-secure-store'
+import type { Transport } from '@/api-contract'
+
+export type AuthClient = ReturnType<typeof createAuth>
+
+export type SessionAuth = Pick<AuthClient, 'signIn' | 'signUp' | 'getSession'>
+
+export function createAuth({ baseUrl, fetch }: { baseUrl: string; fetch: Transport }) {
+  return createAuthClient({
+    baseURL: baseUrl,
+    basePath: '/api/auth',
+    fetchOptions: { customFetchImpl: fetch },
+    plugins: [expoClient({ storage: SecureStore })],
+  })
+}
+
+export function withSessionCookie(auth: AuthClient, fetch: Transport): Transport {
+  return async (input, init) => {
+    const headers = new Headers(init?.headers)
+
+    headers.set('cookie', await auth.getCookie())
+
+    return fetch(input, { ...init, headers, credentials: 'omit' })
+  }
+}

package/templates/mobile/src/features/auth/intended-route.ts

@@ -0,0 +1,11 @@
+let intended: string | undefined
+
+export function rememberIntendedRoute(path: string): void {
+  intended = path
+}
+
+export function takeIntendedRoute(): string | undefined {
+  const path = intended
+  intended = undefined
+  return path
+}

package/templates/mobile/src/features/auth/session.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query'
+import { ApiError } from '@/api-contract'
+import type { SessionAuth } from './auth-client'
+
+export const sessionQuery = (auth: SessionAuth) =>
+  queryOptions({
+    queryKey: ['session'],
+    queryFn: async () => {
+      const { data, error } = await auth.getSession()
+
+      if (error !== null) {
+        throw ApiError.fromAuthError(error)
+      }
+
+      return data
+    },
+  })

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

@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, userEvent } from '@testing-library/react-native'
+import { createAuthClient } from 'better-auth/react'
+import { API_URL, fakeTransport, json } from '../../../test/fake-transport'
+import { SignInForm } from './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' }),
+        }),
+      },
+    })
+    const user = userEvent.setup()
+
+    await render(
+      <QueryClientProvider client={new QueryClient()}>
+        <SignInForm auth={auth} onSignedIn={onSignedIn} />
+      </QueryClientProvider>,
+    )
+
+    await user.type(screen.getByLabelText('Email'), 'ana@example.com')
+    await user.type(screen.getByLabelText('Password'), 'wrong-password')
+    await user.press(screen.getByRole('button', { name: 'Sign in' }))
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('Invalid email or password')
+    expect(onSignedIn).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,80 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { Controller, useForm } from 'react-hook-form'
+import { View } from 'react-native'
+import { z } from 'zod'
+import { ApiError } from '@/api-contract'
+import { Button } from '@/components/ui/button'
+import { Field } from '@/components/ui/field'
+import { FormError } from '@/features/forms/form-error'
+import { applyServerError } from '@/features/forms/server-errors'
+import type { SessionAuth } from './auth-client'
+import { sessionQuery } from './session'
+
+const schema = z.object({
+  email: z.email(),
+  password: z.string().min(1),
+})
+
+type SignInValues = z.infer<typeof schema>
+
+export function SignInForm({ auth, onSignedIn }: { auth: SessionAuth; onSignedIn: () => void }) {
+  const queryClient = useQueryClient()
+  const form = useForm<SignInValues>({
+    resolver: zodResolver(schema),
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  })
+  const { errors, isSubmitting } = form.formState
+
+  async function onSubmit(values: SignInValues) {
+    const { error } = await auth.signIn.email(values)
+
+    if (error !== null) {
+      applyServerError(ApiError.fromAuthError(error), ['email', 'password'], form.setError)
+      return
+    }
+
+    await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
+    onSignedIn()
+  }
+
+  return (
+    <View className="gap-6">
+      <FormError errors={errors} />
+      <Controller
+        control={form.control}
+        name="email"
+        render={({ field }) => (
+          <Field
+            label="Email"
+            autoCapitalize="none"
+            autoComplete="email"
+            keyboardType="email-address"
+            value={field.value}
+            onChangeText={field.onChange}
+            onBlur={field.onBlur}
+            error={errors.email?.message}
+          />
+        )}
+      />
+      <Controller
+        control={form.control}
+        name="password"
+        render={({ field }) => (
+          <Field
+            label="Password"
+            secureTextEntry
+            autoComplete="current-password"
+            value={field.value}
+            onChangeText={field.onChange}
+            onBlur={field.onBlur}
+            error={errors.password?.message}
+          />
+        )}
+      />
+      <Button label="Sign in" disabled={isSubmitting} onPress={form.handleSubmit(onSubmit)} />
+    </View>
+  )
+}