@stjoseph/prumo 0.3.0 → 0.4.0

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

@@ -10,6 +10,19 @@ export type SignUpRequest = { name: string; email: string; password: string }
 
 export type SignInRequest = { email: string; password: string }
 
+// prumo:email
+export type VerifyEmailRequest = { email: string; code: string }
+
+export type ResetPasswordRequest = { email: string; code: string; password: string }
+
+// prumo:end-email
+// prumo:social
+export type SocialProvider = 'google' | 'apple'
+
+// prumo:end-social
+// An account that must confirm its email first gets no session from signing up, and says so.
+export type SignUpResult = { verificationRequired: boolean }
+
 // 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>
@@ -48,16 +61,36 @@ export function createAuthClient({
     })
   }
 
-  async function begin(path: string, body: unknown): Promise<void> {
+  async function begin(path: string, body: unknown): Promise<SignUpResult> {
     const response = await send(path, body)
 
     if (!response.ok) {
       throw await ApiError.fromResponse(response)
     }
 
-    await tokens?.write((await response.json()) as Tokens)
+    // The web's answer is empty: its session arrived as cookies.
+    const text = await response.text()
+    const answer = text === '' ? {} : (JSON.parse(text) as Partial<Tokens & SignUpResult>)
+
+    if (answer.verificationRequired === true) {
+      return { verificationRequired: true }
+    }
+
+    await tokens?.write(answer as Tokens)
+    return { verificationRequired: false }
   }
 
+  // prumo:email
+  async function ask(path: string, body: unknown): Promise<void> {
+    const response = await send(path, body)
+
+    if (!response.ok) {
+      throw await ApiError.fromResponse(response)
+    }
+  }
+
+  // prumo:end-email
+
   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
@@ -125,7 +158,34 @@ export function createAuthClient({
 
     signUp: (request: SignUpRequest) => begin('/sign-up', request),
 
-    signIn: (request: SignInRequest) => begin('/sign-in', request),
+    signIn: async (request: SignInRequest): Promise<void> => {
+      await begin('/sign-in', request)
+    },
+
+    // prumo:email
+    // Each answers alike for an unknown email, so a form can say "if the account exists, a code is on its way".
+    requestEmailVerification: (email: string) => ask('/email/verification', { email }),
+
+    verifyEmail: async (request: VerifyEmailRequest): Promise<void> => {
+      await begin('/email/verify', request)
+    },
+
+    requestPasswordReset: (email: string) => ask('/password/forgot', { email }),
+
+    resetPassword: async (request: ResetPasswordRequest): Promise<void> => {
+      await begin('/password/reset', request)
+    },
+    // prumo:end-email
+    // prumo:social
+    // Where to send the browser to sign in with a provider: the API takes it there and back. The web comes back
+    // signed in; a mobile app comes back with a code to exchange.
+    socialSignInUrl: (provider: SocialProvider, client: 'web' | 'mobile', returnTo = '/') =>
+      `${url(`/social/${provider}`)}?${new URLSearchParams({ client, returnTo })}`,
+
+    exchangeSocialCode: async (code: string): Promise<void> => {
+      await begin('/social/exchange', { code })
+    },
+    // prumo:end-social
 
     // The device forgets the tokens whether or not the request arrives: signing out locally is what was asked.
     async signOut(): Promise<void> {

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

@@ -2,12 +2,16 @@ export { ApiError, type FieldErrors } from './api-error'
 export {
   type AuthClient,
   createAuthClient,
+  type ResetPasswordRequest, // prumo:email
   type Session,
   type SignInRequest,
   type SignUpRequest,
+  type SignUpResult,
+  type SocialProvider, // prumo:social
   sessionQuery,
   type TokenStore,
   type Tokens,
+  type VerifyEmailRequest, // prumo:email
 } from './auth'
 export { type ApiClient, createClient, type Transport } from './client'
 export {

package/templates/mobile/src/app/(auth)/forgot-password.tsx

@@ -0,0 +1,20 @@
+import { useRouter } from 'expo-router'
+import { Text } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { ForgotPasswordForm } from '@/features/auth/forgot-password-form'
+import { useClients } from '@/features/clients/clients-context'
+
+export default function ForgotPasswordScreen() {
+  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">Reset your password</Text>
+      <ForgotPasswordForm
+        auth={auth}
+        onSent={(email) => router.push({ pathname: '/reset-password', params: { email } })}
+      />
+    </SafeAreaView>
+  )
+}

package/templates/mobile/src/app/(auth)/reset-password.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 { ResetPasswordForm } from '@/features/auth/reset-password-form'
+import { useClients } from '@/features/clients/clients-context'
+
+export default function ResetPasswordScreen() {
+  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">Choose a new password</Text>
+      <ResetPasswordForm auth={auth} email={email} onReset={() => router.replace('/')} />
+    </SafeAreaView>
+  )
+}

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

@@ -3,6 +3,7 @@ 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 { SocialButtons } from '@/features/auth/social-buttons' // prumo:social
 import { useClients } from '@/features/clients/clients-context'
 
 export default function SignInScreen() {
@@ -12,6 +13,9 @@ export default function SignInScreen() {
   return (
     <SafeAreaView className="flex-1 justify-center gap-6 p-6">
       <Text className="text-2xl font-semibold text-neutral-900">Sign in</Text>
+      {/* prumo:social */}
+      <SocialButtons auth={auth} onSignedIn={() => router.replace(takeIntendedRoute() ?? '/')} />
+      {/* prumo:end-social */}
       <SignInForm auth={auth} onSignedIn={() => router.replace(takeIntendedRoute() ?? '/')} />
       <View className="flex-row gap-1">
         <Text className="text-sm text-neutral-500">No account?</Text>
@@ -19,6 +23,11 @@ export default function SignInScreen() {
           Sign up
         </Link>
       </View>
+      {/* prumo:email */}
+      <Link href="/forgot-password" className="text-sm text-neutral-900">
+        Forgot your password?
+      </Link>
+      {/* prumo:end-email */}
     </SafeAreaView>
   )
 }

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/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,5 +1,6 @@
 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'
@@ -24,6 +25,7 @@ export function SignInForm({
   onSignedIn: () => void
 }) {
   const queryClient = useQueryClient()
+  const router = useRouter() // prumo:email
   const form = useForm<SignInValues>({
     resolver: zodResolver(schema),
     mode: 'onTouched',
@@ -36,6 +38,14 @@ export function SignInForm({
     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
+      }
+
+      // prumo:end-email
       applyServerError(error, ['email', 'password'], form.setError)
       return
     }

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

@@ -1,5 +1,6 @@
 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'
@@ -25,6 +26,7 @@ export function SignUpForm({
   onSignedUp: () => void
 }) {
   const queryClient = useQueryClient()
+  const router = useRouter() // prumo:email
   const form = useForm<SignUpValues>({
     resolver: zodResolver(schema),
     mode: 'onTouched',
@@ -34,13 +36,23 @@ export function SignUpForm({
   const { errors, isSubmitting } = form.formState
 
   async function onSubmit(values: SignUpValues) {
-    try {
-      await auth.signUp(values)
-    } catch (error) {
+    const result = await auth.signUp(values).catch((error: unknown) => {
       applyServerError(error, ['name', 'email', 'password'], form.setError)
+      return undefined
+    })
+
+    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/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>
+  )
+}