@shipfox/client-auth 0.2.0

package/src/pages/signup-page.tsx

@@ -0,0 +1,354 @@
+import {signupBodySchema} from '@shipfox/api-auth-dto';
+import {displayNameFieldError} from '@shipfox/client-ui';
+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 {Icon} from '@shipfox/react-ui/icon';
+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 {useRefreshAuth} from '#hooks/api/refresh-auth.js';
+import {useSignupAuth} from '#hooks/api/signup-auth.js';
+import {useResendEmailVerificationAuth} from '#hooks/api/verify-email-auth.js';
+import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
+import {
+  getLocalResendAvailableAt,
+  getResendRemainingSeconds,
+  parseNextResendAvailableAt,
+} from './email-verification-resend-model.js';
+import {signupErrorToFormError} from './form-errors.js';
+import {authErrorMessage} from './form-utils.js';
+import {
+  extractInvitationToken,
+  pendingInvitation,
+  useInvitationContext,
+} from './invitation-context.js';
+
+export function SignupPage() {
+  const signup = useSignupAuth();
+  const resendEmailVerification = useResendEmailVerificationAuth();
+  const refreshAuth = useRefreshAuth();
+  const navigate = useNavigate();
+  const search = useSearch({strict: false}) as {redirect?: unknown};
+  const invitationToken = extractInvitationToken(search.redirect);
+  const invitationPreview = useInvitationContext(invitationToken);
+  const invitationPending = pendingInvitation(invitationPreview.data);
+  const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
+  const [submittedEmail, setSubmittedEmail] = useState<string | undefined>();
+  const [now, setNow] = useState(() => Date.now());
+  const [nextResendAvailableAt, setNextResendAvailableAt] = useState<number | undefined>();
+  const [formError, setFormError] = useState<string | undefined>();
+  const [resendError, setResendError] = useState<string | undefined>();
+  const draftRef = useRef(authFormDraft);
+  draftRef.current = authFormDraft;
+  // Set just before clearing the draft on success so the unmount cleanup
+  // below does not repersist the just-submitted credentials.
+  const skipDraftPersistRef = useRef(false);
+  const resendRemainingSeconds = getResendRemainingSeconds({nextResendAvailableAt, now});
+  const isResendCoolingDown = resendRemainingSeconds > 0;
+
+  const form = useForm({
+    defaultValues: {email: authFormDraft.email, password: authFormDraft.password, name: ''},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        const body = signupBodySchema.parse({
+          email: value.email,
+          password: value.password,
+          name: value.name,
+          ...(invitationToken ? {invitation_token: invitationToken} : {}),
+        });
+        const result = await signup.mutateAsync(body);
+        skipDraftPersistRef.current = true;
+        setAuthFormDraft(initialAuthFormDraft);
+
+        if (invitationToken && result.membership && invitationPending) {
+          try {
+            await refreshAuth();
+          } catch {
+            // Refresh failures don't block the success message — the next API
+            // call's 401 handling will re-route the user.
+          }
+          toast.success(`You joined ${invitationPending.workspace_name}.`);
+          await navigate({
+            to: '/workspaces/$wid',
+            params: {wid: result.membership.workspace_id},
+          });
+          return;
+        }
+
+        if (invitationToken && result.accept_error) {
+          toast.error(result.accept_error.message);
+          await navigate({
+            to: '/invitations/accept',
+            search: {token: invitationToken},
+          });
+          return;
+        }
+
+        setSubmittedEmail(result.user.email);
+        setResendError(undefined);
+        restartLocalCooldown();
+      } catch (error) {
+        const mapped = signupErrorToFormError(error);
+        if (mapped.kind === 'field') {
+          form.setFieldMeta(mapped.field, (prev) => ({
+            ...prev,
+            errorMap: {...prev.errorMap, onServer: mapped.message},
+          }));
+        } else {
+          setFormError(mapped.message);
+        }
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (!submittedEmail || !nextResendAvailableAt) {
+      return;
+    }
+
+    const current = Date.now();
+    setNow(current);
+    if (nextResendAvailableAt <= current) {
+      return;
+    }
+
+    const handle = window.setInterval(() => {
+      const tickNow = Date.now();
+      setNow(tickNow);
+      if (nextResendAvailableAt <= tickNow) {
+        window.clearInterval(handle);
+      }
+    }, 1000);
+    return () => window.clearInterval(handle);
+  }, [nextResendAvailableAt, submittedEmail]);
+
+  function restartLocalCooldown() {
+    const current = Date.now();
+    setNow(current);
+    setNextResendAvailableAt(getLocalResendAvailableAt(current));
+  }
+
+  // When arriving from an invitation link, prefill the email and lock it.
+  useEffect(() => {
+    if (invitationPending && form.state.values.email !== invitationPending.email) {
+      form.setFieldValue('email', invitationPending.email);
+      setAuthFormDraft((current) => ({...current, email: invitationPending.email}));
+    }
+  }, [invitationPending, form, setAuthFormDraft]);
+
+  // Sync form values back to the Jotai draft on unmount (only email + password
+  // — name is intentionally not persisted across navigation). Skipped after a
+  // successful signup because we just intentionally cleared the draft.
+  useEffect(() => {
+    return () => {
+      if (skipDraftPersistRef.current) return;
+      const {email, password} = form.state.values;
+      if (email !== draftRef.current.email || password !== draftRef.current.password) {
+        setAuthFormDraft({email, password});
+      }
+    };
+  }, [form, setAuthFormDraft]);
+
+  async function onResendVerificationEmail() {
+    if (!submittedEmail || isResendCoolingDown || resendEmailVerification.isPending) return;
+
+    setResendError(undefined);
+    try {
+      const result = await resendEmailVerification.mutateAsync({email: submittedEmail});
+      const nextAvailableAt = parseNextResendAvailableAt(result.next_resend_available_at);
+      setNow(Date.now());
+      if (nextAvailableAt !== undefined) {
+        setNextResendAvailableAt(nextAvailableAt);
+      } else {
+        restartLocalCooldown();
+      }
+      toast.success('If another verification email can be sent, it will arrive shortly.');
+    } catch (error) {
+      setResendError(authErrorMessage(error));
+    }
+  }
+
+  if (submittedEmail) {
+    return (
+      <AuthShell
+        title="Check your email"
+        description={`We sent a verification link to ${submittedEmail}.`}
+      >
+        {resendError ? (
+          <Callout role="alert" type="error">
+            {resendError}
+          </Callout>
+        ) : null}
+        <Callout role="alert" type="success">
+          Click the verification link to activate your account, then come back to log in.
+        </Callout>
+        <div className="flex flex-col gap-8">
+          <Button
+            aria-disabled={isResendCoolingDown ? true : undefined}
+            className="w-full aria-disabled:cursor-not-allowed aria-disabled:opacity-70"
+            variant="secondary"
+            type="button"
+            isLoading={resendEmailVerification.isPending}
+            onClick={onResendVerificationEmail}
+          >
+            {resendEmailVerification.isPending
+              ? 'Sending email...'
+              : isResendCoolingDown
+                ? `Resend in ${resendRemainingSeconds}s`
+                : 'Resend verification email'}
+          </Button>
+          <Button
+            className="w-full"
+            variant="transparent"
+            type="button"
+            onClick={() => {
+              setSubmittedEmail(undefined);
+              setResendError(undefined);
+            }}
+          >
+            Use another email
+          </Button>
+        </div>
+        <Text size="sm" className="text-center text-foreground-neutral-subtle">
+          Already verified?{' '}
+          <ButtonLink asChild variant="interactive" underline>
+            <Link to="/auth/login">Log in</Link>
+          </ButtonLink>
+        </Text>
+      </AuthShell>
+    );
+  }
+
+  const headerTitle = invitationPending
+    ? `Join ${invitationPending.workspace_name}`
+    : 'Create your Shipfox account';
+  const headerDescription = invitationPending
+    ? `Create an account to accept your invitation.`
+    : 'Start with your email and a password.';
+  const isInvitationEmailLocked = Boolean(invitationPending);
+  const invitationRedirect = invitationToken
+    ? `/invitations/accept?token=${encodeURIComponent(invitationToken)}`
+    : undefined;
+
+  function persistDraft() {
+    const {email, password} = form.state.values;
+    setAuthFormDraft({email, password});
+  }
+
+  return (
+    <AuthShell title={headerTitle} description={headerDescription}>
+      <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="name"
+          validators={{
+            onBlur: ({value}) => displayNameFieldError(value, 'Name', signupBodySchema.shape.name),
+            onSubmit: ({value}) =>
+              displayNameFieldError(value, 'Name', signupBodySchema.shape.name),
+          }}
+        >
+          {(field) => (
+            <FormField label="Name" id="name" error={fieldError(field)}>
+              <FormFieldInput
+                autoComplete="name"
+                name="name"
+                type="text"
+                value={field.state.value}
+                onChange={(event) => field.handleChange(event.target.value)}
+                onBlur={field.handleBlur}
+              />
+            </FormField>
+          )}
+        </form.Field>
+        <form.Field
+          name="email"
+          validators={{
+            onBlur: signupBodySchema.shape.email,
+            onSubmit: signupBodySchema.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();
+                  persistDraft();
+                }}
+                readOnly={isInvitationEmailLocked}
+                iconRight={
+                  isInvitationEmailLocked ? (
+                    <Icon
+                      aria-hidden="true"
+                      className="size-16 text-foreground-neutral-disabled"
+                      name="lockLine"
+                    />
+                  ) : undefined
+                }
+              />
+            </FormField>
+          )}
+        </form.Field>
+        <form.Field
+          name="password"
+          validators={{
+            onBlur: signupBodySchema.shape.password,
+            onSubmit: signupBodySchema.shape.password,
+          }}
+        >
+          {(field) => (
+            <FormField label="Password" id="password" error={fieldError(field)}>
+              <FormFieldInput
+                autoComplete="new-password"
+                name="password"
+                type="password"
+                value={field.state.value}
+                onChange={(event) => field.handleChange(event.target.value)}
+                onBlur={() => {
+                  field.handleBlur();
+                  persistDraft();
+                }}
+              />
+            </FormField>
+          )}
+        </form.Field>
+        <Button className="w-full" isLoading={signup.isPending} type="submit">
+          {signup.isPending ? 'Creating account...' : 'Create account'}
+        </Button>
+      </form>
+      <Text size="sm" className="text-center text-foreground-neutral-subtle">
+        Already have an account?{' '}
+        <ButtonLink asChild variant="interactive" underline>
+          <Link
+            to="/auth/login"
+            search={invitationRedirect ? {redirect: invitationRedirect} : undefined}
+          >
+            Log in
+          </Link>
+        </ButtonLink>
+      </Text>
+    </AuthShell>
+  );
+}

package/src/pages/verify-email-page.test.tsx

@@ -0,0 +1,82 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {screen, waitFor} from '@testing-library/react';
+import {pageUserFactory} from '#test/factories/user.js';
+import {renderAuthPage, renderStrictAuthPage} from '#test/pages.js';
+import {jsonResponse, requestUrl} from '#test/utils.js';
+import {VerifyEmailPage} from './verify-email-page.js';
+
+describe('VerifyEmailPage', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', getAccessToken: undefined});
+  });
+
+  test('only confirms once under StrictMode', async () => {
+    const user = pageUserFactory.build();
+    let didVerify = false;
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/verify-email/confirm')) {
+        didVerify = true;
+        return Promise.resolve(jsonResponse({token: 'verified-access-token', user}));
+      }
+      if (url.endsWith('/auth/refresh')) {
+        return Promise.resolve(
+          didVerify
+            ? jsonResponse({token: 'refreshed-access-token', user})
+            : jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+        );
+      }
+      return Promise.resolve(
+        jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderStrictAuthPage('/auth/verify-email?token=strict-token', <VerifyEmailPage />);
+
+    expect(await screen.findByRole('heading', {name: 'Authenticated home'})).toBeInTheDocument();
+    expect(
+      await screen.findByText('Your email is verified. You are now logged in.'),
+    ).toBeInTheDocument();
+    const verifyCalls = fetchImpl.mock.calls.filter(([input]) =>
+      requestUrl(input).endsWith('/auth/verify-email/confirm'),
+    );
+    expect(verifyCalls).toHaveLength(1);
+  });
+
+  test('reports an invalid token', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/verify-email/confirm')) {
+        return Promise.resolve(
+          jsonResponse({code: 'invalid-token', message: 'Invalid token'}, {status: 400}),
+        );
+      }
+      return Promise.resolve(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/verify-email?token=bad-token', <VerifyEmailPage />);
+
+    expect(await screen.findByText('Invalid token')).toBeInTheDocument();
+  });
+
+  test('handles missing token locally', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({fetchImpl});
+
+    renderAuthPage('/auth/verify-email', <VerifyEmailPage />);
+
+    expect(await screen.findByRole('heading', {name: 'Authenticated home'})).toBeInTheDocument();
+    expect(
+      await screen.findByText('This verification link is missing a token.'),
+    ).toBeInTheDocument();
+    await waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(1));
+  });
+});

package/src/pages/verify-email-page.tsx

@@ -0,0 +1,48 @@
+import {toast} from '@shipfox/react-ui/toast';
+import {useNavigate, useSearch} from '@tanstack/react-router';
+import {useEffect} from 'react';
+import {useRefreshAuth} from '#hooks/api/refresh-auth.js';
+import {useVerifyEmailAuth} from '#hooks/api/verify-email-auth.js';
+import {authErrorMessage} from './form-utils.js';
+
+const verificationRequests = new Map<string, Promise<void>>();
+const toastedVerificationTokens = new Set<string>();
+
+export function VerifyEmailPage() {
+  const verifyEmail = useVerifyEmailAuth();
+  const refreshAuth = useRefreshAuth();
+  const navigate = useNavigate();
+  const search = useSearch({strict: false});
+  const token = typeof search.token === 'string' ? search.token : undefined;
+
+  useEffect(() => {
+    if (!token) {
+      toast.error('This verification link is missing a token.');
+      navigate({to: '/', replace: true});
+      return;
+    }
+
+    let request = verificationRequests.get(token);
+    if (!request) {
+      request = verifyEmail.mutateAsync({token}).then(async () => {
+        await refreshAuth();
+      });
+      verificationRequests.set(token, request);
+    }
+
+    request
+      .then(() => {
+        if (toastedVerificationTokens.has(token)) return;
+        toastedVerificationTokens.add(token);
+        toast.success('Your email is verified. You are now logged in.');
+        navigate({to: '/', replace: true});
+      })
+      .catch((error) => {
+        if (toastedVerificationTokens.has(token)) return;
+        toastedVerificationTokens.add(token);
+        toast.error(authErrorMessage(error));
+      });
+  }, [navigate, refreshAuth, token, verifyEmail.mutateAsync]);
+
+  return null;
+}

package/src/pages/workspace-onboarding-page.test.tsx

@@ -0,0 +1,161 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {AuthGuard, WorkspaceGuard} from '#components/auth-guard.js';
+import {pageUserFactory} from '#test/factories/user.js';
+import {renderAuthPage} from '#test/pages.js';
+import {jsonResponse, requestUrl} from '#test/utils.js';
+
+describe('WorkspaceOnboardingPage', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    configureApiClient({baseUrl: 'https://api.example.test', getAccessToken: undefined});
+  });
+
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  test('creates a workspace before showing the signed-in app', async () => {
+    const user = pageUserFactory.build({email: 'workspace@example.com'});
+    let didCreateWorkspace = false;
+    let createWorkspaceBody: unknown;
+    const fetchImpl = vi.fn().mockImplementation(async (input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      const method = input instanceof Request ? input.method : 'GET';
+      if (url.endsWith('/auth/refresh')) {
+        return jsonResponse({
+          token: didCreateWorkspace ? 'workspace-access-token' : 'access-token',
+          user,
+        });
+      }
+      if (url.endsWith('/workspaces') && method === 'GET') {
+        return jsonResponse({
+          memberships: didCreateWorkspace
+            ? [
+                {
+                  id: '22222222-2222-4222-8222-222222222222',
+                  user_id: user.id,
+                  workspace_id: '33333333-3333-4333-8333-333333333333',
+                  workspace_name: 'Acme',
+                  created_at: '2026-04-27T00:00:00.000Z',
+                  updated_at: '2026-04-27T00:00:00.000Z',
+                },
+              ]
+            : [],
+        });
+      }
+      if (url.endsWith('/workspaces') && method === 'POST') {
+        didCreateWorkspace = true;
+        createWorkspaceBody = input instanceof Request ? await input.json() : undefined;
+        return jsonResponse(
+          {
+            id: '33333333-3333-4333-8333-333333333333',
+            name: 'Acme',
+            status: 'active',
+            settings: {},
+            created_at: '2026-04-27T00:00:00.000Z',
+            updated_at: '2026-04-27T00:00:00.000Z',
+          },
+          {status: 201},
+        );
+      }
+
+      return jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404});
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(
+      '/',
+      <AuthGuard>
+        <WorkspaceGuard>
+          <h1>Authenticated home</h1>
+        </WorkspaceGuard>
+      </AuthGuard>,
+    );
+    fireEvent.change(await screen.findByLabelText('Workspace name'), {
+      target: {value: '  Acme  '},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Create workspace'}));
+
+    await waitFor(() => expect(didCreateWorkspace).toBe(true));
+    expect(createWorkspaceBody).toEqual({name: 'Acme'});
+  });
+
+  test('requires the workspace name locally', async () => {
+    const user = pageUserFactory.build({email: 'workspace@example.com'});
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/refresh')) {
+        return Promise.resolve(jsonResponse({token: 'access-token', user}));
+      }
+      if (url.endsWith('/workspaces')) {
+        return Promise.resolve(jsonResponse({memberships: []}));
+      }
+
+      return Promise.resolve(
+        jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(
+      '/',
+      <AuthGuard>
+        <WorkspaceGuard>
+          <h1>Authenticated home</h1>
+        </WorkspaceGuard>
+      </AuthGuard>,
+    );
+    fireEvent.click(await screen.findByRole('button', {name: 'Create workspace'}));
+
+    expect(await screen.findByText('Workspace name is required.')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByLabelText('Workspace name')).toBeInvalid());
+    expect(workspacePostCount(fetchImpl)).toBe(0);
+  });
+
+  test('rejects control characters in the workspace name locally', async () => {
+    const user = pageUserFactory.build({email: 'workspace@example.com'});
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/refresh')) {
+        return Promise.resolve(jsonResponse({token: 'access-token', user}));
+      }
+      if (url.endsWith('/workspaces')) {
+        return Promise.resolve(jsonResponse({memberships: []}));
+      }
+
+      return Promise.resolve(
+        jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(
+      '/',
+      <AuthGuard>
+        <WorkspaceGuard>
+          <h1>Authenticated home</h1>
+        </WorkspaceGuard>
+      </AuthGuard>,
+    );
+    fireEvent.change(await screen.findByLabelText('Workspace name'), {
+      target: {value: 'Acme\u202eLabs'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Create workspace'}));
+
+    expect(
+      await screen.findByText(
+        'Workspace name cannot include line breaks, tabs, or hidden formatting characters.',
+      ),
+    ).toBeInTheDocument();
+    expect(workspacePostCount(fetchImpl)).toBe(0);
+  });
+});
+
+function workspacePostCount(fetchImpl: ReturnType<typeof vi.fn>): number {
+  return fetchImpl.mock.calls.filter(([input]) => {
+    const url = requestUrl(input as RequestInfo | URL);
+    const method = input instanceof Request ? input.method : 'GET';
+    return url.endsWith('/workspaces') && method === 'POST';
+  }).length;
+}