@stjoseph/prumo 0.3.0 → 0.4.0

package/templates/mobile/test/features/auth/email-flows.spec.tsx

@@ -0,0 +1,86 @@
+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 { userEvent } from '@testing-library/react-native'
+import { renderRouter, screen } from 'expo-router/testing-library'
+import type { ReactNode } from 'react'
+import { Text } from 'react-native'
+import { createAuthClient, createClient } from '@/api-contract'
+import ForgotPasswordScreen from '@/app/(auth)/forgot-password'
+import ResetPasswordScreen from '@/app/(auth)/reset-password'
+import SignUpScreen from '@/app/(auth)/sign-up'
+import VerifyEmailScreen from '@/app/(auth)/verify-email'
+import { ClientsProvider } from '@/features/clients/clients-context'
+
+const TOKENS = { accessToken: 'access-1', refreshToken: 'refresh-1', expiresIn: 900 }
+
+async function renderAt(initialUrl: string, routes: Parameters<typeof fakeTransport>[0]) {
+  const transport = fakeTransport(routes)
+  const auth = createAuthClient({ baseUrl: API_URL, fetch: transport, tokens: memoryTokenStore() })
+  const clients = { auth, api: createClient({ baseUrl: API_URL, fetch: auth.fetch }) }
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+
+  function Providers({ children }: { children: ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ClientsProvider clients={clients}>{children}</ClientsProvider>
+      </QueryClientProvider>
+    )
+  }
+
+  await renderRouter(
+    {
+      index: () => <Text>Your profile</Text>,
+      '(auth)/sign-up': SignUpScreen,
+      '(auth)/verify-email': VerifyEmailScreen,
+      '(auth)/forgot-password': ForgotPasswordScreen,
+      '(auth)/reset-password': ResetPasswordScreen,
+    },
+    { initialUrl, wrapper: Providers },
+  )
+}
+
+describe('email verification on mobile', () => {
+  it('takes a new account to the code, and in once it is entered', async () => {
+    const user = userEvent.setup()
+
+    await renderAt('/sign-up', {
+      'POST /api/auth/sign-up': () => json(201, { verificationRequired: true }),
+      'POST /api/auth/email/verify': () => json(200, TOKENS),
+    })
+
+    await user.type(screen.getByLabelText('Name'), 'Ana')
+    await user.type(screen.getByLabelText('Email'), 'ana@example.com')
+    await user.type(screen.getByLabelText('Password'), 'correct-horse-battery')
+    await user.press(screen.getByRole('button', { name: 'Create account' }))
+
+    expect(await screen.findByText('Confirm your email')).toBeOnTheScreen()
+
+    await user.type(screen.getByLabelText('Code'), '123456')
+    await user.press(screen.getByRole('button', { name: 'Confirm email' }))
+
+    expect(await screen.findByText('Your profile')).toBeOnTheScreen()
+  })
+})
+
+describe('password reset on mobile', () => {
+  it('goes from forgot to reset and in', async () => {
+    const user = userEvent.setup()
+
+    await renderAt('/forgot-password', {
+      'POST /api/auth/password/forgot': () => new Response(null, { status: 204 }),
+      'POST /api/auth/password/reset': () => json(200, TOKENS),
+    })
+
+    await user.type(screen.getByLabelText('Email'), 'ana@example.com')
+    await user.press(screen.getByRole('button', { name: 'Send a reset code' }))
+
+    expect(await screen.findByText('Choose a new password')).toBeOnTheScreen()
+
+    await user.type(screen.getByLabelText('Code'), '123456')
+    await user.type(screen.getByLabelText('New password'), 'another-good-password')
+    await user.press(screen.getByRole('button', { name: 'Set the new password' }))
+
+    expect(await screen.findByText('Your profile')).toBeOnTheScreen()
+  })
+})

package/templates/mobile/test/features/auth/social-buttons.spec.tsx

@@ -0,0 +1,77 @@
+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, waitFor } from '@testing-library/react-native'
+import * as WebBrowser from 'expo-web-browser'
+import { createAuthClient } from '@/api-contract'
+import { SocialButtons } from '@/features/auth/social-buttons'
+
+jest.mock('expo-web-browser', () => ({ openAuthSessionAsync: jest.fn() }))
+// jest-expo leaves the app manifest empty, so expo-linking cannot know the app's scheme; this one stands in for it.
+jest.mock('expo-linking', () => ({
+  ...jest.requireActual('expo-linking'),
+  createURL: (path: string) => `acme://${path}`,
+}))
+
+// Whichever provider the project kept: each button runs the same trip.
+const firstProvider = () => screen.getAllByRole('button', { name: /^Continue with / })[0] as never
+
+const TOKENS = { accessToken: 'access-1', refreshToken: 'refresh-1', expiresIn: 900 }
+
+async function renderButtons(exchange: () => Response) {
+  const tokens = memoryTokenStore()
+  const onSignedIn = jest.fn()
+  const auth = createAuthClient({
+    baseUrl: API_URL,
+    tokens,
+    fetch: fakeTransport({ 'POST /api/auth/social/exchange': exchange }),
+  })
+
+  await render(
+    <QueryClientProvider client={new QueryClient()}>
+      <SocialButtons auth={auth} onSignedIn={onSignedIn} />
+    </QueryClientProvider>,
+  )
+
+  return { tokens, onSignedIn }
+}
+
+describe('SocialButtons', () => {
+  beforeEach(() => jest.mocked(WebBrowser.openAuthSessionAsync).mockReset())
+
+  it('opens the provider through the API and trades the code it comes back with', async () => {
+    jest
+      .mocked(WebBrowser.openAuthSessionAsync)
+      .mockResolvedValue({ type: 'success', url: 'acme://social?code=flow.secret' })
+    const { tokens, onSignedIn } = await renderButtons(() => json(200, TOKENS))
+
+    await userEvent.setup().press(firstProvider())
+
+    await waitFor(() => expect(onSignedIn).toHaveBeenCalled())
+    expect(jest.mocked(WebBrowser.openAuthSessionAsync).mock.calls[0]?.[0]).toMatch(
+      new RegExp(`^${API_URL}/api/auth/social/\\w+\\?client=mobile&returnTo=%2F$`),
+    )
+    expect(await tokens.read()).toEqual(TOKENS)
+  })
+
+  it('does nothing when the browser is closed, and says so when the code is refused', async () => {
+    jest
+      .mocked(WebBrowser.openAuthSessionAsync)
+      .mockResolvedValueOnce({ type: 'cancel' } as Awaited<
+        ReturnType<typeof WebBrowser.openAuthSessionAsync>
+      >)
+    const { onSignedIn } = await renderButtons(() => json(401, {}))
+    const user = userEvent.setup()
+
+    await user.press(firstProvider())
+    expect(screen.queryByRole('alert')).toBeNull()
+
+    jest
+      .mocked(WebBrowser.openAuthSessionAsync)
+      .mockResolvedValueOnce({ type: 'success', url: 'acme://social?code=used' })
+    await user.press(firstProvider())
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(/did not complete/)
+    expect(onSignedIn).not.toHaveBeenCalled()
+  })
+})

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

@@ -5,6 +5,7 @@ type ProblemDocument = {
   status?: number
   detail?: string
   requestId?: string
+  code?: string
   errors?: FieldErrors
 }
 
@@ -15,6 +16,8 @@ export class ApiError extends Error {
     readonly detail: string | undefined,
     readonly requestId: string | undefined,
     readonly errors: FieldErrors,
+    // A stable name for a refusal the client acts on, such as `email_not_verified`.
+    readonly code?: string,
   ) {
     super(detail ?? title)
   }
@@ -35,6 +38,7 @@ export class ApiError extends Error {
       problem.detail,
       problem.requestId ?? requestId,
       problem.errors ?? {},
+      problem.code,
     )
   }
 }

package/templates/web/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/web/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/web/src/features/auth/forgot-password-form.tsx

@@ -0,0 +1,52 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useNavigate } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import type { AuthClient } 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({ email: z.email() })
+
+type ForgotPasswordValues = z.infer<typeof schema>
+
+export function ForgotPasswordForm({ auth }: { auth: Pick<AuthClient, 'requestPasswordReset'> }) {
+  const navigate = useNavigate()
+  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 page cannot tell either.
+    await navigate({ to: '/reset-password', search: { email: values.email } })
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} noValidate className="flex flex-col gap-6">
+      <FormError errors={errors} />
+      <FieldGroup>
+        <Field data-invalid={errors.email !== undefined}>
+          <FieldLabel htmlFor="email">Email</FieldLabel>
+          <Input id="email" type="email" autoComplete="email" {...form.register('email')} />
+          <FieldError errors={[errors.email]} />
+        </Field>
+      </FieldGroup>
+      <Button type="submit" disabled={isSubmitting}>
+        Send a reset code
+      </Button>
+    </form>
+  )
+}

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

@@ -38,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 page offers a new code.
+      if ((error as { code?: string }).code === 'email_not_verified') {
+        await navigate({ to: '/verify-email', search: { email: values.email } })
+        return
+      }
+
+      // prumo:end-email
       applyServerError(error, ['email', 'password'], form.setError)
       return
     }
@@ -74,6 +82,11 @@ export function SignInForm({
       <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-up-form.tsx

@@ -30,13 +30,23 @@ export function SignUpForm({ auth }: { auth: Pick<AuthClient, 'signUp' | 'getSes
   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) {
+      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

@@ -8,6 +8,7 @@ type AuthorizationView = {
   clientHost: string
   redirectHost: string
   redirectsToThisDevice: boolean
+  scopes: { scope: string; description: string }[]
 }
 
 type ConsentAuth = Pick<AuthClient, 'baseUrl' | 'fetch'>
@@ -60,13 +61,18 @@ export function ConsentForm({
     )
   }
 
-  const { clientName, clientHost, redirectHost, redirectsToThisDevice } = view.data
+  const { clientName, clientHost, redirectHost, redirectsToThisDevice, scopes } = view.data
 
   return (
     <div className="flex flex-col gap-6">
       <p>
         <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>