@stjoseph/prumo 0.2.0 → 0.4.0

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

@@ -0,0 +1,82 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+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'
+
+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,
+}: {
+  auth: Pick<AuthClient, 'resetPassword' | 'getSession'>
+  email: string
+}) {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  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.refetchQueries({ queryKey: sessionQuery(auth).queryKey })
+    await navigate({ to: '/' })
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} noValidate className="flex flex-col gap-6">
+      <p className="text-sm text-muted-foreground">
+        If <strong>{email}</strong> has an account, a 6-digit code is on its way to it.
+      </p>
+      <FormError errors={errors} />
+      <FieldGroup>
+        <Field data-invalid={errors.code !== undefined}>
+          <FieldLabel htmlFor="code">Code</FieldLabel>
+          <Input
+            id="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            {...form.register('code')}
+          />
+          <FieldError errors={[errors.code]} />
+        </Field>
+        <Field data-invalid={errors.password !== undefined}>
+          <FieldLabel htmlFor="password">New password</FieldLabel>
+          <Input
+            id="password"
+            type="password"
+            autoComplete="new-password"
+            {...form.register('password')}
+          />
+          <FieldError errors={[errors.password]} />
+        </Field>
+      </FieldGroup>
+      <Button type="submit" disabled={isSubmitting}>
+        Set the new password
+      </Button>
+    </form>
+  )
+}

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,21 @@ 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)
+    try {
+      await auth.signIn(values)
+    } catch (error) {
+      // prumo:email
+      // The password was right and the email is not confirmed yet: the code page offers a new code.
+      if ((error as { code?: string }).code === 'email_not_verified') {
+        await navigate({ to: '/verify-email', search: { email: values.email } })
+        return
+      }
 
-    if (result.error !== null) {
-      applyServerError(ApiError.fromAuthError(result.error), ['email', 'password'], form.setError)
+      // prumo:end-email
+      applyServerError(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) {
-      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 })
@@ -77,6 +82,11 @@ export function SignInForm({ auth, redirect }: { auth: AuthClient; redirect: str
       <p className="text-sm text-muted-foreground">
         No account? <Link to="/sign-up">Sign up</Link>
       </p>
+      {/* prumo:email */}
+      <p className="text-sm text-muted-foreground">
+        <Link to="/forgot-password">Forgot your password?</Link>
+      </p>
+      {/* prumo:end-email */}
     </form>
   )
 }

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,13 +30,23 @@ export function SignUpForm({ auth }: { auth: AuthClient }) {
   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) {
+      await navigate({ to: '/verify-email', search: { email: values.email } })
+      return
+    }
+
+    // prumo:end-email
+
     // 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/social-buttons.tsx

@@ -0,0 +1,45 @@
+import type { AuthClient } from '@/api-contract'
+import { buttonVariants } from '@/components/ui/button'
+
+// What the API sends back to sign-in when a provider sign-in does not complete.
+const FAILURES: Record<string, string> = {
+  provider_email_unverified: 'That account’s email is not verified with the provider.',
+  provider_not_configured: 'That sign-in is not set up yet.',
+}
+
+// Plain links: the browser leaves for the provider and comes back signed in, with no script holding a token.
+export function SocialButtons({
+  auth,
+  returnTo,
+  error,
+}: {
+  auth: Pick<AuthClient, 'socialSignInUrl'>
+  returnTo: string | undefined
+  error: string | undefined
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      {error !== undefined && (
+        <p role="alert" className="text-sm text-destructive">
+          {FAILURES[error] ?? 'The sign-in did not complete. Try again.'}
+        </p>
+      )}
+      {/* prumo:google */}
+      <a
+        href={auth.socialSignInUrl('google', 'web', returnTo)}
+        className={buttonVariants({ variant: 'outline' })}
+      >
+        Continue with Google
+      </a>
+      {/* prumo:end-google */}
+      {/* prumo:apple */}
+      <a
+        href={auth.socialSignInUrl('apple', 'web', returnTo)}
+        className={buttonVariants({ variant: 'outline' })}
+      >
+        Continue with Apple
+      </a>
+      {/* prumo:end-apple */}
+    </div>
+  )
+}

package/templates/web/src/features/auth/verify-email-form.tsx

@@ -0,0 +1,84 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+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'
+
+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,
+}: {
+  auth: Pick<AuthClient, 'verifyEmail' | 'requestEmailVerification' | 'getSession'>
+  email: string
+}) {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  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
+    }
+
+    // A confirmed email signs the user in; refetch so the protected routes see the session.
+    await queryClient.refetchQueries({ queryKey: sessionQuery(auth).queryKey })
+    await navigate({ to: '/' })
+  }
+
+  async function resend() {
+    await auth.requestEmailVerification(email)
+    setResent(true)
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} noValidate className="flex flex-col gap-6">
+      <p className="text-sm text-muted-foreground">
+        We sent a 6-digit code to <strong>{email}</strong>.
+      </p>
+      <FormError errors={errors} />
+      <FieldGroup>
+        <Field data-invalid={errors.code !== undefined}>
+          <FieldLabel htmlFor="code">Code</FieldLabel>
+          <Input
+            id="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            {...form.register('code')}
+          />
+          <FieldError errors={[errors.code]} />
+        </Field>
+      </FieldGroup>
+      <Button type="submit" disabled={isSubmitting}>
+        Confirm email
+      </Button>
+      <Button type="button" variant="outline" onClick={resend}>
+        Send a new code
+      </Button>
+      {resent && (
+        <p role="status" className="text-sm text-muted-foreground">
+          A new code is on its way. The previous one no longer works.
+        </p>
+      )}
+    </form>
+  )
+}

package/templates/web/src/features/oauth/consent-form.tsx

@@ -1,60 +1,97 @@
-import { useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { ApiError, type AuthClient } from '@/api-contract'
 import { Button } from '@/components/ui/button'
-import type { AuthClient } from '@/features/auth/auth-client'
 
-type PublicClient = { client_name?: string }
+type AuthorizationView = {
+  clientId: string
+  clientName: string
+  clientHost: string
+  redirectHost: string
+  redirectsToThisDevice: boolean
+  scopes: { scope: string; description: string }[]
+}
+
+type ConsentAuth = Pick<AuthClient, 'baseUrl' | 'fetch'>
+
+async function call<T>(auth: ConsentAuth, path: string, init?: RequestInit): Promise<T> {
+  const response = await auth.fetch(`${auth.baseUrl}/api/oauth${path}`, init)
+
+  if (!response.ok) {
+    throw await ApiError.fromResponse(response)
+  }
+
+  return (await response.json()) as T
+}
 
-// Better Auth checks the signed query on submit; what is shown here comes from the same URL.
+// What the user agrees to is shown by host, not only by name: a name is whatever the client chose to write.
 export function ConsentForm({
   auth,
-  clientId,
-  scopes,
+  requestId,
+  leave,
 }: {
-  auth: AuthClient
-  clientId: string
-  scopes: string[]
+  auth: ConsentAuth
+  requestId: string
+  leave: (url: string) => void
 }) {
-  const [failed, setFailed] = useState(false)
-  const client = useQuery({
-    queryKey: ['oauth-client', clientId],
-    queryFn: async () => {
-      const { data } = await auth.$fetch<PublicClient>('/oauth2/public-client', {
-        query: { client_id: clientId },
-      })
-
-      return data
-    },
+  const view = useQuery({
+    queryKey: ['oauth-authorization', requestId],
+    queryFn: () => call<AuthorizationView>(auth, `/authorizations/${requestId}`),
+    retry: false,
+  })
+  const answer = useMutation({
+    mutationFn: (accept: boolean) =>
+      call<{ redirectTo: string }>(auth, `/authorizations/${requestId}/decision`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ accept }),
+      }),
+    // The answer goes back to the client either way, as the code or as access_denied.
+    onSuccess: ({ redirectTo }) => leave(redirectTo),
   })
-  const name = client.data?.client_name ?? clientId
 
-  async function answer(accept: boolean) {
-    // On success Better Auth sends the browser back to the client, so nothing follows here.
-    const { error } = await auth.$fetch('/oauth2/consent', { method: 'POST', body: { accept } })
+  if (view.isPending) {
+    return null
+  }
 
-    setFailed(error !== null)
+  if (view.isError) {
+    return (
+      <p role="alert" className="text-sm text-destructive">
+        This request has expired or was already answered. Start again from the application.
+      </p>
+    )
   }
 
+  const { clientName, clientHost, redirectHost, redirectsToThisDevice, scopes } = view.data
+
   return (
     <div className="flex flex-col gap-6">
       <p>
-        <strong>{name}</strong> wants to act on your behalf.
+        <strong>{clientName}</strong> ({clientHost}) wants to act on your behalf.
+      </p>
+      <ul aria-label="What it will be able to do" className="list-disc pl-6 text-sm">
+        {scopes.map(({ scope, description }) => (
+          <li key={scope}>{description}</li>
+        ))}
+      </ul>
+      <p className="text-sm text-muted-foreground">
+        If you allow it, you will be sent to <strong>{redirectHost}</strong>.
       </p>
-      {scopes.length > 0 && (
-        <ul className="list-disc pl-6 text-sm text-muted-foreground">
-          {scopes.map((scope) => (
-            <li key={scope}>{scope}</li>
-          ))}
-        </ul>
+      {redirectsToThisDevice && (
+        <p role="note" className="text-sm text-destructive">
+          It returns to a program on this device. Allow it only if you started this from a program
+          you trust.
+        </p>
       )}
-      {failed && (
+      {answer.isError && (
         <p role="alert" className="text-sm text-destructive">
           The authorization could not be completed. Start again from the application.
         </p>
       )}
       <div className="flex gap-3">
-        <Button onClick={() => answer(true)}>Allow</Button>
-        <Button variant="outline" onClick={() => answer(false)}>
+        <Button onClick={() => answer.mutate(true)} disabled={answer.isPending}>
+          Allow
+        </Button>
+        <Button variant="outline" onClick={() => answer.mutate(false)} disabled={answer.isPending}>
           Deny
         </Button>
       </div>

package/templates/web/src/main.tsx

@@ -2,17 +2,19 @@ import '@/index.css'
 import { QueryClient } from '@tanstack/react-query'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { createClient, type Transport } from '@/api-contract'
-import { createAuth } from '@/features/auth/auth-client'
+import { createAuthClient, createClient, type Transport } from '@/api-contract'
 import { App } from './app'
 import { config } from './config'
 
 const transport: Transport = (input, init) => fetch(input, { ...init, credentials: 'include' })
 
+const auth = createAuthClient({ baseUrl: config.VITE_API_URL, fetch: transport })
+
 const context = {
   queryClient: new QueryClient(),
-  api: createClient({ baseUrl: config.VITE_API_URL, fetch: transport }),
-  auth: createAuth({ baseUrl: config.VITE_API_URL, fetch: transport }),
+  // Through the auth client, so an expired access token is refreshed and the request repeated.
+  api: createClient({ baseUrl: config.VITE_API_URL, fetch: auth.fetch }),
+  auth,
 }
 
 const root = document.getElementById('root')