@stjoseph/prumo 0.2.0 → 0.4.0

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

@@ -2,6 +2,7 @@ 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 { SocialButtons } from '@/features/auth/social-buttons' // prumo:social
 import { useClients } from '@/features/clients/clients-context'
 
 export default function SignUpScreen() {
@@ -11,6 +12,9 @@ export default function SignUpScreen() {
   return (
     <SafeAreaView className="flex-1 justify-center gap-6 p-6">
       <Text className="text-2xl font-semibold text-neutral-900">Create an account</Text>
+      {/* prumo:social */}
+      <SocialButtons auth={auth} onSignedIn={() => router.replace('/')} />
+      {/* prumo:end-social */}
       <SignUpForm auth={auth} onSignedUp={() => router.replace('/')} />
       <View className="flex-row gap-1">
         <Text className="text-sm text-neutral-500">Already registered?</Text>

package/templates/mobile/src/app/(auth)/verify-email.tsx

@@ -0,0 +1,18 @@
+import { useLocalSearchParams, useRouter } from 'expo-router'
+import { Text } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { VerifyEmailForm } from '@/features/auth/verify-email-form'
+import { useClients } from '@/features/clients/clients-context'
+
+export default function VerifyEmailScreen() {
+  const { auth } = useClients()
+  const router = useRouter()
+  const { email } = useLocalSearchParams<{ email: string }>()
+
+  return (
+    <SafeAreaView className="flex-1 justify-center gap-6 p-6">
+      <Text className="text-2xl font-semibold text-neutral-900">Confirm your email</Text>
+      <VerifyEmailForm auth={auth} email={email} onVerified={() => router.replace('/')} />
+    </SafeAreaView>
+  )
+}

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

@@ -4,18 +4,18 @@ 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 { createAuthClient, createClient, sessionQuery } from '@/api-contract'
 import { config } from '@/config'
-import { createAuth, withSessionCookie } from '@/features/auth/auth-client'
-import { sessionQuery } from '@/features/auth/session'
+import { secureTokenStore } from '@/features/auth/token-store'
 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) })
+  const auth = createAuthClient({ baseUrl: config.apiUrl, fetch, tokens: secureTokenStore })
+  // Through the auth client, so every request carries the bearer and an expired one is refreshed and repeated.
+  const api = createClient({ baseUrl: config.apiUrl, fetch: auth.fetch })
 
   return { auth, api }
 }

package/templates/mobile/src/features/auth/forgot-password-form.tsx

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Controller, useForm } from 'react-hook-form'
+import { View } from 'react-native'
+import { z } from 'zod'
+import type { AuthClient } 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'
+
+const schema = z.object({ email: z.email() })
+
+type ForgotPasswordValues = z.infer<typeof schema>
+
+export function ForgotPasswordForm({
+  auth,
+  onSent,
+}: {
+  auth: Pick<AuthClient, 'requestPasswordReset'>
+  onSent: (email: string) => void
+}) {
+  const form = useForm<ForgotPasswordValues>({
+    resolver: zodResolver(schema),
+    mode: 'onTouched',
+    defaultValues: { email: '' },
+  })
+  const { errors, isSubmitting } = form.formState
+
+  async function onSubmit(values: ForgotPasswordValues) {
+    try {
+      await auth.requestPasswordReset(values.email)
+    } catch (error) {
+      applyServerError(error, ['email'], form.setError)
+      return
+    }
+
+    // The API answers alike whether the account exists, so the next screen cannot tell either.
+    onSent(values.email)
+  }
+
+  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}
+          />
+        )}
+      />
+      <Button
+        label="Send a reset code"
+        disabled={isSubmitting}
+        onPress={form.handleSubmit(onSubmit)}
+      />
+    </View>
+  )
+}

package/templates/mobile/src/features/auth/reset-password-form.tsx

@@ -0,0 +1,93 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { Controller, useForm } from 'react-hook-form'
+import { Text, View } from 'react-native'
+import { z } from 'zod'
+import { type AuthClient, sessionQuery } 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'
+
+const schema = z.object({
+  code: z.string().regex(/^\d{6}$/, 'Enter the 6 digits from the email'),
+  password: z.string().min(8).max(128),
+})
+
+type ResetPasswordValues = z.infer<typeof schema>
+
+export function ResetPasswordForm({
+  auth,
+  email,
+  onReset,
+}: {
+  auth: Pick<AuthClient, 'resetPassword' | 'getSession'>
+  email: string
+  onReset: () => void
+}) {
+  const queryClient = useQueryClient()
+  const form = useForm<ResetPasswordValues>({
+    resolver: zodResolver(schema),
+    mode: 'onTouched',
+    defaultValues: { code: '', password: '' },
+  })
+  const { errors, isSubmitting } = form.formState
+
+  async function onSubmit(values: ResetPasswordValues) {
+    try {
+      await auth.resetPassword({ email, ...values })
+    } catch (error) {
+      applyServerError(error, ['code', 'password'], form.setError)
+      return
+    }
+
+    // Every other session was ended; this one starts signed in.
+    await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
+    onReset()
+  }
+
+  return (
+    <View className="gap-6">
+      <Text className="text-sm text-neutral-500">
+        If {email} has an account, a 6-digit code is on its way to it.
+      </Text>
+      <FormError errors={errors} />
+      <Controller
+        control={form.control}
+        name="code"
+        render={({ field }) => (
+          <Field
+            label="Code"
+            keyboardType="number-pad"
+            autoComplete="one-time-code"
+            textContentType="oneTimeCode"
+            value={field.value}
+            onChangeText={field.onChange}
+            onBlur={field.onBlur}
+            error={errors.code?.message}
+          />
+        )}
+      />
+      <Controller
+        control={form.control}
+        name="password"
+        render={({ field }) => (
+          <Field
+            label="New password"
+            secureTextEntry
+            autoComplete="new-password"
+            value={field.value}
+            onChangeText={field.onChange}
+            onBlur={field.onBlur}
+            error={errors.password?.message}
+          />
+        )}
+      />
+      <Button
+        label="Set the new password"
+        disabled={isSubmitting}
+        onPress={form.handleSubmit(onSubmit)}
+      />
+    </View>
+  )
+}

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

@@ -1,15 +1,14 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'expo-router' // prumo:email
 import { Controller, useForm } from 'react-hook-form'
 import { View } from 'react-native'
 import { z } from 'zod'
-import { ApiError } from '@/api-contract'
+import { type AuthClient, sessionQuery } 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(),
@@ -18,8 +17,15 @@ const schema = z.object({
 
 type SignInValues = z.infer<typeof schema>
 
-export function SignInForm({ auth, onSignedIn }: { auth: SessionAuth; onSignedIn: () => void }) {
+export function SignInForm({
+  auth,
+  onSignedIn,
+}: {
+  auth: Pick<AuthClient, 'signIn' | 'getSession'>
+  onSignedIn: () => void
+}) {
   const queryClient = useQueryClient()
+  const router = useRouter() // prumo:email
   const form = useForm<SignInValues>({
     resolver: zodResolver(schema),
     mode: 'onTouched',
@@ -29,10 +35,18 @@ export function SignInForm({ auth, onSignedIn }: { auth: SessionAuth; onSignedIn
   const { errors, isSubmitting } = form.formState
 
   async function onSubmit(values: SignInValues) {
-    const { error } = await auth.signIn.email(values)
+    try {
+      await auth.signIn(values)
+    } catch (error) {
+      // prumo:email
+      // The password was right and the email is not confirmed yet: the code screen offers a new code.
+      if ((error as { code?: string }).code === 'email_not_verified') {
+        router.push({ pathname: '/verify-email', params: { email: values.email } })
+        return
+      }
 
-    if (error !== null) {
-      applyServerError(ApiError.fromAuthError(error), ['email', 'password'], form.setError)
+      // prumo:end-email
+      applyServerError(error, ['email', 'password'], form.setError)
       return
     }
 

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

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
+import type { AuthClient } from '@/api-contract'
 import { Button } from '@/components/ui/button'
 import { clearUserData } from '@/features/storage/storage'
-import type { AuthClient } from './auth-client'
 
 export type SignOutAuth = Pick<AuthClient, 'signOut'>
 
@@ -18,11 +18,11 @@ export function SignOutButton({
     try {
       await auth.signOut()
     } catch {
-      // A failed request leaves nothing on the device to act on: the Expo plugin deletes the stored cookie before it
-      // sends. The server's session outlives it until it expires, and signing out locally is still what was asked.
+      // A failed request leaves nothing on the device to act on: the auth client forgets the tokens either way. The
+      // server's session outlives them until it expires, and signing out locally is still what was asked.
     }
 
-    // What the plugin cannot know is the rest of this user's data: the query cache and every user-scoped key, or the
+    // What the auth client cannot know is the rest of this user's data: the query cache and every user-scoped key, or the
     // next person on this device reads them.
     queryClient.clear()
     clearUserData()

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

@@ -1,26 +1,32 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'expo-router' // prumo:email
 import { Controller, useForm } from 'react-hook-form'
 import { View } from 'react-native'
 import { z } from 'zod'
-import { ApiError } from '@/api-contract'
+import { type AuthClient, sessionQuery } 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({
   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, onSignedUp }: { auth: SessionAuth; onSignedUp: () => void }) {
+export function SignUpForm({
+  auth,
+  onSignedUp,
+}: {
+  auth: Pick<AuthClient, 'signUp' | 'getSession'>
+  onSignedUp: () => void
+}) {
   const queryClient = useQueryClient()
+  const router = useRouter() // prumo:email
   const form = useForm<SignUpValues>({
     resolver: zodResolver(schema),
     mode: 'onTouched',
@@ -30,13 +36,23 @@ export function SignUpForm({ auth, onSignedUp }: { auth: SessionAuth; onSignedUp
   const { errors, isSubmitting } = form.formState
 
   async function onSubmit(values: SignUpValues) {
-    const { error } = await auth.signUp.email(values)
+    const result = await auth.signUp(values).catch((error: unknown) => {
+      applyServerError(error, ['name', 'email', 'password'], form.setError)
+      return undefined
+    })
 
-    if (error !== null) {
-      applyServerError(ApiError.fromAuthError(error), ['name', 'email', 'password'], form.setError)
+    if (result === undefined) {
       return
     }
 
+    // prumo:email
+    if (result.verificationRequired) {
+      router.push({ pathname: '/verify-email', params: { email: values.email } })
+      return
+    }
+
+    // prumo:end-email
+
     await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
     onSignedUp()
   }

package/templates/mobile/src/features/auth/social-buttons.tsx

@@ -0,0 +1,79 @@
+import { useQueryClient } from '@tanstack/react-query'
+import * as Linking from 'expo-linking'
+import * as WebBrowser from 'expo-web-browser'
+import { useState } from 'react'
+import { Text, View } from 'react-native'
+import { type AuthClient, type SocialProvider, sessionQuery } from '@/api-contract'
+import { Button } from '@/components/ui/button'
+
+// Read by hand: the return URL carries one parameter, and parsing it needs nothing from the platform.
+function codeFrom(url: string): string | undefined {
+  for (const pair of (url.split('?')[1] ?? '').split('&')) {
+    const [key, value] = pair.split('=')
+
+    if (key === 'code' && value !== undefined && value !== '') {
+      return decodeURIComponent(value)
+    }
+  }
+
+  return undefined
+}
+
+// The system browser signs in at the provider and comes back to this app's scheme with a one-time code; the code,
+// not a token, is what travels in the URL, and the app trades it for its tokens.
+export function SocialButtons({
+  auth,
+  onSignedIn,
+}: {
+  auth: Pick<AuthClient, 'socialSignInUrl' | 'exchangeSocialCode' | 'getSession'>
+  onSignedIn: () => void
+}) {
+  const queryClient = useQueryClient()
+  const [failed, setFailed] = useState(false)
+
+  async function signInWith(provider: SocialProvider) {
+    setFailed(false)
+
+    const result = await WebBrowser.openAuthSessionAsync(
+      auth.socialSignInUrl(provider, 'mobile'),
+      Linking.createURL('social'),
+    )
+
+    // Closing the browser is a decision, not a failure.
+    if (result.type !== 'success') {
+      return
+    }
+
+    const code = codeFrom(result.url)
+
+    try {
+      if (code === undefined) {
+        throw new Error('The provider sign-in came back without a code')
+      }
+
+      await auth.exchangeSocialCode(code)
+    } catch {
+      setFailed(true)
+      return
+    }
+
+    await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
+    onSignedIn()
+  }
+
+  return (
+    <View className="gap-3">
+      {failed ? (
+        <Text accessibilityRole="alert" className="text-sm text-red-600">
+          The sign-in did not complete. Try again.
+        </Text>
+      ) : null}
+      {/* prumo:google */}
+      <Button label="Continue with Google" variant="outline" onPress={() => signInWith('google')} />
+      {/* prumo:end-google */}
+      {/* prumo:apple */}
+      <Button label="Continue with Apple" variant="outline" onPress={() => signInWith('apple')} />
+      {/* prumo:end-apple */}
+    </View>
+  )
+}

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/auth/verify-email-form.tsx

@@ -0,0 +1,81 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { Text, View } from 'react-native'
+import { z } from 'zod'
+import { type AuthClient, sessionQuery } 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'
+
+const schema = z.object({ code: z.string().regex(/^\d{6}$/, 'Enter the 6 digits from the email') })
+
+type VerifyEmailValues = z.infer<typeof schema>
+
+export function VerifyEmailForm({
+  auth,
+  email,
+  onVerified,
+}: {
+  auth: Pick<AuthClient, 'verifyEmail' | 'requestEmailVerification' | 'getSession'>
+  email: string
+  onVerified: () => void
+}) {
+  const queryClient = useQueryClient()
+  const [resent, setResent] = useState(false)
+  const form = useForm<VerifyEmailValues>({
+    resolver: zodResolver(schema),
+    mode: 'onTouched',
+    defaultValues: { code: '' },
+  })
+  const { errors, isSubmitting } = form.formState
+
+  async function onSubmit(values: VerifyEmailValues) {
+    try {
+      await auth.verifyEmail({ email, code: values.code })
+    } catch (error) {
+      applyServerError(error, ['code'], form.setError)
+      return
+    }
+
+    await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
+    onVerified()
+  }
+
+  async function resend() {
+    await auth.requestEmailVerification(email)
+    setResent(true)
+  }
+
+  return (
+    <View className="gap-6">
+      <Text className="text-sm text-neutral-500">We sent a 6-digit code to {email}.</Text>
+      <FormError errors={errors} />
+      <Controller
+        control={form.control}
+        name="code"
+        render={({ field }) => (
+          <Field
+            label="Code"
+            keyboardType="number-pad"
+            autoComplete="one-time-code"
+            textContentType="oneTimeCode"
+            value={field.value}
+            onChangeText={field.onChange}
+            onBlur={field.onBlur}
+            error={errors.code?.message}
+          />
+        )}
+      />
+      <Button label="Confirm email" disabled={isSubmitting} onPress={form.handleSubmit(onSubmit)} />
+      <Button label="Send a new code" variant="outline" onPress={resend} />
+      {resent ? (
+        <Text accessibilityRole="text" className="text-sm text-neutral-500">
+          A new code is on its way. The previous one no longer works.
+        </Text>
+      ) : null}
+    </View>
+  )
+}

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()
   })