@shipfox/client-auth 0.2.0

package/src/pages/password-reset-page.test.tsx

@@ -0,0 +1,109 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {fireEvent, screen} from '@testing-library/react';
+import {pageUserFactory} from '#test/factories/user.js';
+import {renderAuthPage} from '#test/pages.js';
+import {jsonResponse, requestUrl} from '#test/utils.js';
+import {PasswordResetPage} from './password-reset-page.js';
+
+describe('PasswordResetPage', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', getAccessToken: undefined});
+  });
+
+  test('renders the reset request form and links back to login', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/reset', <PasswordResetPage />);
+
+    expect(await screen.findByRole('heading', {name: 'Reset your password'})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Log in'})).toHaveAttribute('href', '/auth/login');
+  });
+
+  test('requests a reset link for a valid email', async () => {
+    const fetchImpl = vi.fn().mockImplementation((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/password-reset')) {
+        return new Response(null, {status: 204});
+      }
+      if (url.endsWith('/auth/refresh')) {
+        return jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401});
+      }
+
+      return jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404});
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/reset', <PasswordResetPage />);
+    fireEvent.change(await screen.findByLabelText('Email'), {
+      target: {value: 'Reset@Example.com'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Send reset link'}));
+
+    expect(await screen.findByRole('heading', {name: 'Check your email'})).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'If a Shipfox account exists for that email, the reset link will arrive shortly.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test('confirms a password reset token', async () => {
+    const user = pageUserFactory.build({email: 'reset@example.com'});
+    let didConfirm = false;
+    const fetchImpl = vi.fn().mockImplementation((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/password-reset/confirm')) {
+        didConfirm = true;
+        return jsonResponse({token: 'reset-access-token', user});
+      }
+      if (url.endsWith('/auth/refresh')) {
+        return didConfirm
+          ? jsonResponse({token: 'refreshed-access-token', user})
+          : jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401});
+      }
+
+      return jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404});
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/reset?token=reset-token', <PasswordResetPage />);
+    fireEvent.change(await screen.findByLabelText('New password'), {
+      target: {value: 'new password is long'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Update password'}));
+
+    expect(await screen.findByRole('heading', {name: 'Authenticated home'})).toBeInTheDocument();
+    expect(
+      await screen.findByText('Your password has been changed. You are now logged in.'),
+    ).toBeInTheDocument();
+  });
+
+  test('reports invalid reset tokens', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/password-reset/confirm')) {
+        return Promise.resolve(
+          jsonResponse({code: 'token-invalid', message: 'Reset token expired'}, {status: 410}),
+        );
+      }
+
+      return Promise.resolve(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/reset?token=bad-token', <PasswordResetPage />);
+    fireEvent.change(await screen.findByLabelText('New password'), {
+      target: {value: 'new password is long'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Update password'}));
+
+    expect(await screen.findByText('This link is invalid or expired.')).toBeInTheDocument();
+  });
+});

package/src/pages/password-reset-page.tsx

@@ -0,0 +1,222 @@
+import {
+  passwordResetConfirmBodySchema,
+  passwordResetRequestBodySchema,
+} from '@shipfox/api-auth-dto';
+import {Button, ButtonLink} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {toast} from '@shipfox/react-ui/toast';
+import {Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {Link, useNavigate, useSearch} from '@tanstack/react-router';
+import {useAtom} from 'jotai';
+import {useEffect, useRef, useState} from 'react';
+import {AuthShell} from '#/components/auth-shell.js';
+import {
+  useConfirmPasswordResetAuth,
+  useRequestPasswordResetAuth,
+} from '#hooks/api/password-reset-auth.js';
+import {useRefreshAuth} from '#hooks/api/refresh-auth.js';
+import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
+import {
+  passwordResetConfirmErrorToFormError,
+  passwordResetRequestErrorToFormError,
+} from './form-errors.js';
+
+export function PasswordResetPage() {
+  const search = useSearch({strict: false});
+  const token = typeof search.token === 'string' ? search.token : undefined;
+
+  if (token) {
+    return <PasswordResetConfirm token={token} />;
+  }
+
+  return <PasswordResetRequest />;
+}
+
+function PasswordResetRequest() {
+  const requestPasswordReset = useRequestPasswordResetAuth();
+  const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
+  const [submittedEmail, setSubmittedEmail] = useState<string | undefined>();
+  const [formError, setFormError] = useState<string | undefined>();
+  const draftRef = useRef(authFormDraft);
+  draftRef.current = authFormDraft;
+
+  const form = useForm({
+    defaultValues: {email: authFormDraft.email},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        const parsed = passwordResetRequestBodySchema.parse(value);
+        await requestPasswordReset.mutateAsync(parsed);
+        setSubmittedEmail(parsed.email);
+      } catch (error) {
+        const mapped = passwordResetRequestErrorToFormError(error);
+        setFormError(mapped.message);
+      }
+    },
+  });
+
+  useEffect(() => {
+    return () => {
+      const {email} = form.state.values;
+      if (email !== draftRef.current.email) {
+        setAuthFormDraft((current) => ({...current, email}));
+      }
+    };
+  }, [form, setAuthFormDraft]);
+
+  if (submittedEmail) {
+    return (
+      <AuthShell
+        title="Check your email"
+        description={`We sent reset instructions to ${submittedEmail}.`}
+      >
+        <Callout role="alert" type="success">
+          If a Shipfox account exists for that email, the reset link will arrive shortly.
+        </Callout>
+        <Button
+          className="w-full"
+          variant="secondary"
+          type="button"
+          onClick={() => setSubmittedEmail(undefined)}
+        >
+          Use another email
+        </Button>
+        <Text size="sm" className="text-center text-foreground-neutral-subtle">
+          Remembered it?{' '}
+          <ButtonLink asChild variant="interactive" underline>
+            <Link to="/auth/login">Log in</Link>
+          </ButtonLink>
+        </Text>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell title="Reset your password" description="Enter your email to get a reset link.">
+      <form
+        className="flex flex-col gap-18"
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        {formError ? (
+          <Callout role="alert" type="error">
+            {formError}
+          </Callout>
+        ) : null}
+        <form.Field
+          name="email"
+          validators={{
+            onBlur: passwordResetRequestBodySchema.shape.email,
+            onSubmit: passwordResetRequestBodySchema.shape.email,
+          }}
+        >
+          {(field) => (
+            <FormField label="Email" id="email" error={fieldError(field)}>
+              <FormFieldInput
+                autoComplete="email"
+                name="email"
+                type="email"
+                value={field.state.value}
+                onChange={(event) => field.handleChange(event.target.value)}
+                onBlur={() => {
+                  field.handleBlur();
+                  setAuthFormDraft((current) => ({...current, email: field.state.value}));
+                }}
+              />
+            </FormField>
+          )}
+        </form.Field>
+        <Button className="w-full" isLoading={requestPasswordReset.isPending} type="submit">
+          {requestPasswordReset.isPending ? 'Sending link...' : 'Send reset link'}
+        </Button>
+      </form>
+      <Text size="sm" className="text-center text-foreground-neutral-subtle">
+        Remembered it?{' '}
+        <ButtonLink asChild variant="interactive" underline>
+          <Link to="/auth/login">Log in</Link>
+        </ButtonLink>
+      </Text>
+    </AuthShell>
+  );
+}
+
+function PasswordResetConfirm({token}: {token: string}) {
+  const confirmPasswordReset = useConfirmPasswordResetAuth();
+  const refreshAuth = useRefreshAuth();
+  const navigate = useNavigate();
+  const [, setAuthFormDraft] = useAtom(authFormDraftAtom);
+  const [formError, setFormError] = useState<string | undefined>();
+
+  const form = useForm({
+    defaultValues: {new_password: ''},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        const body = passwordResetConfirmBodySchema.parse({
+          token,
+          new_password: value.new_password,
+        });
+        await confirmPasswordReset.mutateAsync(body);
+        await refreshAuth();
+        setAuthFormDraft(initialAuthFormDraft);
+        toast.success('Your password has been changed. You are now logged in.');
+        await navigate({to: '/', replace: true});
+      } catch (error) {
+        const mapped = passwordResetConfirmErrorToFormError(error);
+        setFormError(mapped.message);
+      }
+    },
+  });
+
+  return (
+    <AuthShell title="Set a new password" description="Choose a password for your Shipfox account.">
+      <form
+        className="flex flex-col gap-18"
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        {formError ? (
+          <Callout role="alert" type="error">
+            {formError}
+          </Callout>
+        ) : null}
+        <form.Field
+          name="new_password"
+          validators={{
+            onBlur: passwordResetConfirmBodySchema.shape.new_password,
+            onSubmit: passwordResetConfirmBodySchema.shape.new_password,
+          }}
+        >
+          {(field) => (
+            <FormField label="New password" id="new-password" error={fieldError(field)}>
+              <FormFieldInput
+                autoComplete="new-password"
+                name="new_password"
+                type="password"
+                value={field.state.value}
+                onChange={(event) => field.handleChange(event.target.value)}
+                onBlur={field.handleBlur}
+              />
+            </FormField>
+          )}
+        </form.Field>
+        <Button className="w-full" isLoading={confirmPasswordReset.isPending} type="submit">
+          {confirmPasswordReset.isPending ? 'Updating password...' : 'Update password'}
+        </Button>
+      </form>
+      <ButtonLink asChild variant="subtle" className="self-center">
+        <Link to="/auth/login">Back to login</Link>
+      </ButtonLink>
+    </AuthShell>
+  );
+}

package/src/pages/signup-page.test.tsx

@@ -0,0 +1,289 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {act, fireEvent, screen} from '@testing-library/react';
+import {pageUserFactory} from '#test/factories/user.js';
+import {renderAuthPage} from '#test/pages.js';
+import {jsonResponse, requestUrl} from '#test/utils.js';
+import {SignupPage} from './signup-page.js';
+
+const SUBMITTED_EMAIL_RE = /new@example.com/;
+const RESEND_COUNTDOWN_RE = /^Resend in \d+s$/;
+
+describe('SignupPage', () => {
+  beforeEach(() => {
+    vi.useRealTimers();
+    configureApiClient({baseUrl: 'https://api.example.test', getAccessToken: undefined});
+  });
+
+  test('shows check-email state after success', async () => {
+    const user = pageUserFactory.build({email: 'new@example.com', name: 'New User'});
+    let signupBody: unknown;
+    const fetchImpl = vi.fn().mockImplementation(async (input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url === 'https://api.example.test/auth/me') {
+        return jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401});
+      }
+      if (url === 'https://api.example.test/auth/signup' && input instanceof Request) {
+        signupBody = await input.json();
+        return jsonResponse({user}, {status: 201});
+      }
+      throw new Error(`Unexpected request: ${url}`);
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: '  New User  '}});
+    fireEvent.change(screen.getByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+
+    expect(await screen.findByRole('heading', {name: 'Check your email'})).toBeInTheDocument();
+    expect(signupBody).toEqual({
+      email: 'new@example.com',
+      password: 'long secure password',
+      name: 'New User',
+    });
+    expect(screen.getByText(SUBMITTED_EMAIL_RE)).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: RESEND_COUNTDOWN_RE})).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    expect(screen.getByRole('button', {name: 'Use another email'})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Log in'})).toHaveAttribute('href', '/auth/login');
+  });
+
+  test('keeps credentials when switching to login', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Email'), {
+      target: {value: 'existing@example.com'},
+    });
+    fireEvent.change(screen.getByLabelText('Password'), {
+      target: {value: 'long secure password'},
+    });
+    fireEvent.click(screen.getByRole('link', {name: 'Log in'}));
+
+    expect(await screen.findByRole('heading', {name: 'Connect to Shipfox'})).toBeInTheDocument();
+    expect(screen.getByLabelText('Email')).toHaveValue('existing@example.com');
+    expect(screen.getByLabelText('Password')).toHaveValue('long secure password');
+  });
+
+  test('preserves invitation state when switching to login', async () => {
+    const invitationToken = 'invite-token';
+    const redirect = `/invitations/accept?token=${encodeURIComponent(invitationToken)}`;
+    const fetchImpl = vi.fn().mockImplementation((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url === 'https://api.example.test/auth/me') {
+        return Promise.resolve(
+          jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+        );
+      }
+      if (url.includes('/invitations/preview?')) {
+        return Promise.resolve(
+          jsonResponse({
+            status: 'pending',
+            workspace_id: 'workspace-1',
+            workspace_name: 'Invite Workspace',
+            email: 'invitee@example.com',
+            invited_by_display: 'owner@example.com',
+            expires_at: '2026-05-18T00:00:00.000Z',
+          }),
+        );
+      }
+      throw new Error(`Unexpected request: ${url}`);
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(`/auth/signup?redirect=${encodeURIComponent(redirect)}`, <SignupPage />);
+    await screen.findByRole('heading', {name: 'Join Invite Workspace'});
+
+    expect(screen.getByRole('link', {name: 'Log in'})).toHaveAttribute(
+      'href',
+      `/auth/login?redirect=${encodeURIComponent(redirect)}`,
+    );
+  });
+
+  test('surfaces duplicate-email errors', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      )
+      .mockResolvedValueOnce(
+        jsonResponse(
+          {code: 'email-already-exists', message: 'Email already exists'},
+          {status: 409},
+        ),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New User'}});
+    fireEvent.change(await screen.findByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('Email already exists');
+  });
+
+  test('validates the name locally', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New\u202eUser'}});
+    fireEvent.change(screen.getByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+
+    expect(
+      await screen.findByText(
+        'Name cannot include line breaks, tabs, or hidden formatting characters.',
+      ),
+    ).toBeInTheDocument();
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
+
+  test('requires the name locally', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+
+    expect(await screen.findByText('Name is required.')).toBeInTheDocument();
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
+
+  test('enables resend after the signup cooldown expires', async () => {
+    vi.useFakeTimers({toFake: ['Date', 'setInterval', 'clearInterval']});
+    const clearIntervalSpy = vi.spyOn(window, 'clearInterval');
+    const user = pageUserFactory.build({email: 'new@example.com', name: 'New User'});
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      )
+      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}));
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New User'}});
+    fireEvent.change(await screen.findByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+    expect(await screen.findByRole('button', {name: RESEND_COUNTDOWN_RE})).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(60_000);
+    });
+
+    expect(screen.getByRole('button', {name: 'Resend verification email'})).not.toHaveAttribute(
+      'aria-disabled',
+    );
+    expect(clearIntervalSpy).toHaveBeenCalled();
+  });
+
+  test('resends verification email and restarts cooldown from the server response', async () => {
+    vi.useFakeTimers({toFake: ['Date', 'setInterval', 'clearInterval']});
+    const user = pageUserFactory.build({email: 'new@example.com', name: 'New User'});
+    const nextResendAvailableAt = new Date(Date.now() + 120_000).toISOString();
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      )
+      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}))
+      .mockResolvedValueOnce(
+        jsonResponse({next_resend_available_at: nextResendAvailableAt}, {status: 200}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New User'}});
+    fireEvent.change(await screen.findByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+    await screen.findByRole('heading', {name: 'Check your email'});
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(60_000);
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Resend verification email'}));
+
+    expect(
+      await screen.findByText('If another verification email can be sent, it will arrive shortly.'),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: RESEND_COUNTDOWN_RE})).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+  });
+
+  test('surfaces resend failures without leaving the check-email state', async () => {
+    vi.useFakeTimers({toFake: ['Date', 'setInterval', 'clearInterval']});
+    const user = pageUserFactory.build({email: 'new@example.com', name: 'New User'});
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      )
+      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}))
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'server-error', message: 'Server error'}, {status: 500}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New User'}});
+    fireEvent.change(await screen.findByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+    await screen.findByRole('heading', {name: 'Check your email'});
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(60_000);
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Resend verification email'}));
+
+    expect(await screen.findByText('Server error')).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Check your email'})).toBeInTheDocument();
+  });
+
+  test('returns to the signup form when choosing another email', async () => {
+    const user = pageUserFactory.build({email: 'new@example.com', name: 'New User'});
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      )
+      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}));
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/signup', <SignupPage />);
+    fireEvent.change(await screen.findByLabelText('Name'), {target: {value: 'New User'}});
+    fireEvent.change(await screen.findByLabelText('Email'), {target: {value: 'new@example.com'}});
+    fireEvent.change(screen.getByLabelText('Password'), {target: {value: 'long secure password'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Create account'}));
+    await screen.findByRole('heading', {name: 'Check your email'});
+    fireEvent.click(screen.getByRole('button', {name: 'Use another email'}));
+
+    expect(screen.getByRole('heading', {name: 'Create your Shipfox account'})).toBeInTheDocument();
+  });
+});