@shipfox/client-auth 0.2.0 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "0.2.0",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -11,55 +11,32 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "imports": {
-    "#*": {
-      "types": "./src/*",
-      "workspace-source": "./src/*",
-      "development": "./src/*",
-      "default": "./dist/*"
-    },
+    "#*": "./dist/*",
     "#test/*": "./test/*"
   },
   "exports": {
     ".": {
-      "development": {
-        "types": "./src/index.ts",
-        "default": "./src/index.ts"
-      },
-      "default": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./feature": {
-      "development": {
-        "types": "./src/feature.ts",
-        "default": "./src/feature.ts"
-      },
-      "default": {
-        "types": "./dist/feature.d.ts",
-        "default": "./dist/feature.js"
-      }
+      "types": "./dist/feature.d.ts",
+      "default": "./dist/feature.js"
     },
     "./routes/*": {
-      "development": {
-        "types": "./src/routes/*.tsx",
-        "default": "./src/routes/*.tsx"
-      },
-      "default": {
-        "types": "./dist/routes/*.d.ts",
-        "default": "./dist/routes/*.js"
-      }
+      "types": "./dist/routes/*.d.ts",
+      "default": "./dist/routes/*.js"
     }
   },
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-auth-dto": "2.0.0",
-    "@shipfox/api-workspaces-dto": "2.0.0",
-    "@shipfox/client-shell": "0.2.0",
-    "@shipfox/client-api": "0.2.0",
-    "@shipfox/client-ui": "0.2.0",
-    "@shipfox/react-ui": "0.3.1"
+    "@shipfox/api-auth-dto": "6.0.0",
+    "@shipfox/client-api": "1.0.0",
+    "@shipfox/client-shell": "2.0.0",
+    "@shipfox/api-workspaces-dto": "6.0.0",
+    "@shipfox/client-ui": "2.0.0",
+    "@shipfox/react-ui": "0.3.3"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",
@@ -95,12 +72,12 @@
     "tailwindcss": "^4.1.13",
     "vite": "^8.0.3",
     "vitest": "^4.1.5",
-    "@shipfox/biome": "1.8.1",
-    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/client-test-setup": "0.0.3",
+    "@shipfox/swc": "1.2.6",
+    "@shipfox/vitest": "1.2.3",
+    "@shipfox/typescript": "1.1.7",
     "@shipfox/ts-config": "1.3.8",
-    "@shipfox/typescript": "1.1.6",
-    "@shipfox/swc": "1.2.5",
-    "@shipfox/vitest": "1.2.2"
+    "@shipfox/biome": "1.8.2"
   },
   "scripts": {
     "build": "shipfox-swc",

package/src/feature.ts

@@ -8,7 +8,6 @@ export const authFeature = defineClientFeature({
     {path: '/auth/logout', parent: 'root', impl: '@shipfox/client-auth/routes/logout'},
     {path: '/auth/reset', parent: 'root', impl: '@shipfox/client-auth/routes/reset'},
     {path: '/auth/signup', parent: 'root', impl: '@shipfox/client-auth/routes/signup'},
-    {path: '/auth/verify-email', parent: 'root', impl: '@shipfox/client-auth/routes/verify-email'},
     {
       path: '/setup/workspaces/new',
       parent: 'root',

package/src/index.ts

@@ -8,7 +8,6 @@ export * from './pages/login-page.js';
 export * from './pages/logout-page.js';
 export * from './pages/password-reset-page.js';
 export * from './pages/signup-page.js';
-export * from './pages/verify-email-page.js';
 export * from './pages/workspace-onboarding-page.js';
 export * from './state/auth.js';
 export {

package/src/pages/email-verification-resend-model.test.ts

@@ -1,19 +1,9 @@
-import {EMAIL_VERIFICATION_RESEND_COOLDOWN_SECONDS} from '@shipfox/api-auth-dto';
 import {
-  getLocalResendAvailableAt,
   getResendRemainingSeconds,
   parseNextResendAvailableAt,
 } from './email-verification-resend-model.js';
 
 describe('email verification resend model', () => {
-  test('creates local cooldown targets from the shared cooldown', () => {
-    const now = Date.UTC(2026, 4, 11, 12, 0, 0);
-
-    const result = getLocalResendAvailableAt(now);
-
-    expect(result).toBe(now + EMAIL_VERIFICATION_RESEND_COOLDOWN_SECONDS * 1000);
-  });
-
   test('rounds remaining cooldown seconds up for display', () => {
     const now = Date.UTC(2026, 4, 11, 12, 0, 0);
 

package/src/pages/email-verification-resend-model.ts

@@ -1,9 +1,3 @@
-import {EMAIL_VERIFICATION_RESEND_COOLDOWN_SECONDS} from '@shipfox/api-auth-dto';
-
-export function getLocalResendAvailableAt(now: number): number {
-  return now + EMAIL_VERIFICATION_RESEND_COOLDOWN_SECONDS * 1000;
-}
-
 export function getResendRemainingSeconds(params: {
   nextResendAvailableAt: number | undefined;
   now: number;

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

@@ -1,5 +1,5 @@
 import {configureApiClient} from '@shipfox/client-api';
-import {act, fireEvent, screen} from '@testing-library/react';
+import {act, fireEvent, screen, waitFor} from '@testing-library/react';
 import {pageUserFactory} from '#test/factories/user.js';
 import {renderAuthPage} from '#test/pages.js';
 import {jsonResponse, requestUrl} from '#test/utils.js';
@@ -7,6 +7,12 @@ import {SignupPage} from './signup-page.js';
 
 const SUBMITTED_EMAIL_RE = /new@example.com/;
 const RESEND_COUNTDOWN_RE = /^Resend in \d+s$/;
+function emailChallenge() {
+  return {
+    id: '019f814f-3cfd-779a-82f2-6588eefd572c',
+    next_resend_available_at: new Date(Date.now() + 60_000).toISOString(),
+  };
+}
 
 describe('SignupPage', () => {
   beforeEach(() => {
@@ -24,7 +30,7 @@ describe('SignupPage', () => {
       }
       if (url === 'https://api.example.test/auth/signup' && input instanceof Request) {
         signupBody = await input.json();
-        return jsonResponse({user}, {status: 201});
+        return jsonResponse({user, email_challenge: emailChallenge()}, {status: 201});
       }
       throw new Error(`Unexpected request: ${url}`);
     });
@@ -51,6 +57,50 @@ describe('SignupPage', () => {
     expect(screen.getByRole('link', {name: 'Log in'})).toHaveAttribute('href', '/auth/login');
   });
 
+  test('submits the eight-digit verification code with its signup challenge', async () => {
+    const user = pageUserFactory.build({email: 'new@example.com', name: 'New User'});
+    let confirmBody: unknown;
+    const session = {token: 'access-token', user};
+    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') {
+        return jsonResponse({user, email_challenge: emailChallenge()}, {status: 201});
+      }
+      if (
+        url === 'https://api.example.test/auth/verify-email/confirm' &&
+        input instanceof Request
+      ) {
+        confirmBody = await input.json();
+        return jsonResponse(session);
+      }
+      if (url === 'https://api.example.test/auth/refresh') {
+        return jsonResponse(session);
+      }
+      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: user.email}});
+    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.change(screen.getByLabelText('Verification code'), {target: {value: '12345678'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Verify email'}));
+
+    await waitFor(() => {
+      expect(confirmBody).toEqual({
+        email: user.email,
+        challenge_id: emailChallenge().id,
+        code: '12345678',
+      });
+    });
+  });
+
   test('keeps credentials when switching to login', async () => {
     const fetchImpl = vi
       .fn()
@@ -179,7 +229,9 @@ describe('SignupPage', () => {
       .mockResolvedValueOnce(
         jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
       )
-      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}));
+      .mockResolvedValueOnce(
+        jsonResponse({user, email_challenge: emailChallenge()}, {status: 201}),
+      );
     configureApiClient({fetchImpl});
 
     renderAuthPage('/auth/signup', <SignupPage />);
@@ -211,7 +263,7 @@ describe('SignupPage', () => {
       .mockResolvedValueOnce(
         jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
       )
-      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}))
+      .mockResolvedValueOnce(jsonResponse({user, email_challenge: emailChallenge()}, {status: 201}))
       .mockResolvedValueOnce(
         jsonResponse({next_resend_available_at: nextResendAvailableAt}, {status: 200}),
       );
@@ -245,7 +297,7 @@ describe('SignupPage', () => {
       .mockResolvedValueOnce(
         jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
       )
-      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}))
+      .mockResolvedValueOnce(jsonResponse({user, email_challenge: emailChallenge()}, {status: 201}))
       .mockResolvedValueOnce(
         jsonResponse({code: 'server-error', message: 'Server error'}, {status: 500}),
       );
@@ -273,7 +325,9 @@ describe('SignupPage', () => {
       .mockResolvedValueOnce(
         jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
       )
-      .mockResolvedValueOnce(jsonResponse({user}, {status: 201}));
+      .mockResolvedValueOnce(
+        jsonResponse({user, email_challenge: emailChallenge()}, {status: 201}),
+      );
     configureApiClient({fetchImpl});
 
     renderAuthPage('/auth/signup', <SignupPage />);

package/src/pages/signup-page.tsx

@@ -1,4 +1,4 @@
-import {signupBodySchema} from '@shipfox/api-auth-dto';
+import {signupBodySchema, verifyEmailConfirmBodySchema} 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';
@@ -13,10 +13,9 @@ 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 {useResendEmailVerificationAuth, useVerifyEmailAuth} from '#hooks/api/verify-email-auth.js';
 import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
 import {
-  getLocalResendAvailableAt,
   getResendRemainingSeconds,
   parseNextResendAvailableAt,
 } from './email-verification-resend-model.js';
@@ -30,6 +29,7 @@ import {
 
 export function SignupPage() {
   const signup = useSignupAuth();
+  const verifyEmail = useVerifyEmailAuth();
   const resendEmailVerification = useResendEmailVerificationAuth();
   const refreshAuth = useRefreshAuth();
   const navigate = useNavigate();
@@ -38,7 +38,7 @@ export function SignupPage() {
   const invitationPreview = useInvitationContext(invitationToken);
   const invitationPending = pendingInvitation(invitationPreview.data);
   const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
-  const [submittedEmail, setSubmittedEmail] = useState<string | undefined>();
+  const [emailChallenge, setEmailChallenge] = useState<{email: string; id: string} | undefined>();
   const [now, setNow] = useState(() => Date.now());
   const [nextResendAvailableAt, setNextResendAvailableAt] = useState<number | undefined>();
   const [formError, setFormError] = useState<string | undefined>();
@@ -90,9 +90,16 @@ export function SignupPage() {
           return;
         }
 
-        setSubmittedEmail(result.user.email);
+        if (!result.email_challenge) {
+          throw new Error('Signup did not return an email verification challenge');
+        }
+        setEmailChallenge({email: result.user.email, id: result.email_challenge.id});
+        verificationForm.reset();
         setResendError(undefined);
-        restartLocalCooldown();
+        setNow(Date.now());
+        setNextResendAvailableAt(
+          parseNextResendAvailableAt(result.email_challenge.next_resend_available_at),
+        );
       } catch (error) {
         const mapped = signupErrorToFormError(error);
         if (mapped.kind === 'field') {
@@ -107,8 +114,29 @@ export function SignupPage() {
     },
   });
 
+  const verificationForm = useForm({
+    defaultValues: {code: ''},
+    onSubmit: async ({value}) => {
+      if (!emailChallenge || verifyEmail.isPending) return;
+
+      setResendError(undefined);
+      try {
+        await verifyEmail.mutateAsync({
+          email: emailChallenge.email,
+          challenge_id: emailChallenge.id,
+          code: value.code,
+        });
+        await refreshAuth();
+        toast.success('Your email is verified. You are now logged in.');
+        await navigate({to: '/', replace: true});
+      } catch (error) {
+        setResendError(authErrorMessage(error));
+      }
+    },
+  });
+
   useEffect(() => {
-    if (!submittedEmail || !nextResendAvailableAt) {
+    if (!emailChallenge || !nextResendAvailableAt) {
       return;
     }
 
@@ -126,13 +154,7 @@ export function SignupPage() {
       }
     }, 1000);
     return () => window.clearInterval(handle);
-  }, [nextResendAvailableAt, submittedEmail]);
-
-  function restartLocalCooldown() {
-    const current = Date.now();
-    setNow(current);
-    setNextResendAvailableAt(getLocalResendAvailableAt(current));
-  }
+  }, [emailChallenge, nextResendAvailableAt]);
 
   // When arriving from an invitation link, prefill the email and lock it.
   useEffect(() => {
@@ -156,17 +178,18 @@ export function SignupPage() {
   }, [form, setAuthFormDraft]);
 
   async function onResendVerificationEmail() {
-    if (!submittedEmail || isResendCoolingDown || resendEmailVerification.isPending) return;
+    if (!emailChallenge || isResendCoolingDown || resendEmailVerification.isPending) return;
 
     setResendError(undefined);
     try {
-      const result = await resendEmailVerification.mutateAsync({email: submittedEmail});
+      const result = await resendEmailVerification.mutateAsync({
+        email: emailChallenge.email,
+        challenge_id: emailChallenge.id,
+      });
       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) {
@@ -174,21 +197,49 @@ export function SignupPage() {
     }
   }
 
-  if (submittedEmail) {
+  if (emailChallenge) {
     return (
       <AuthShell
         title="Check your email"
-        description={`We sent a verification link to ${submittedEmail}.`}
+        description={`We sent an eight-digit verification code to ${emailChallenge.email}.`}
       >
         {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">
+        <form
+          className="flex flex-col gap-8"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            void verificationForm.handleSubmit();
+          }}
+        >
+          <verificationForm.Field
+            name="code"
+            validators={{
+              onBlur: verifyEmailConfirmBodySchema.shape.code,
+              onSubmit: verifyEmailConfirmBodySchema.shape.code,
+            }}
+          >
+            {(field) => (
+              <FormField label="Verification code" id="verification-code" error={fieldError(field)}>
+                <FormFieldInput
+                  autoComplete="one-time-code"
+                  inputMode="numeric"
+                  maxLength={8}
+                  pattern="[0-9]{8}"
+                  value={field.state.value}
+                  onChange={(event) => field.handleChange(event.target.value.replace(/\D/gu, ''))}
+                  onBlur={field.handleBlur}
+                />
+              </FormField>
+            )}
+          </verificationForm.Field>
+          <Button className="w-full" type="submit" isLoading={verifyEmail.isPending}>
+            Verify email
+          </Button>
           <Button
             aria-disabled={isResendCoolingDown ? true : undefined}
             className="w-full aria-disabled:cursor-not-allowed aria-disabled:opacity-70"
@@ -203,18 +254,18 @@ export function SignupPage() {
                 ? `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>
+        </form>
+        <Button
+          className="w-full"
+          variant="transparent"
+          type="button"
+          onClick={() => {
+            setEmailChallenge(undefined);
+            setResendError(undefined);
+          }}
+        >
+          Use another email
+        </Button>
         <Text size="sm" className="text-center text-foreground-neutral-subtle">
           Already verified?{' '}
           <ButtonLink asChild variant="interactive" underline>

package/test/pages.tsx

@@ -13,7 +13,6 @@ import {AuthProvider} from '#components/auth-provider.js';
 import {LoginPage} from '#pages/login-page.js';
 import {PasswordResetPage} from '#pages/password-reset-page.js';
 import {SignupPage} from '#pages/signup-page.js';
-import {VerifyEmailPage} from '#pages/verify-email-page.js';
 
 function createTestRouter(path: string, element: ReactElement) {
   const rootRoute = createRootRoute({
@@ -44,18 +43,12 @@ function createTestRouter(path: string, element: ReactElement) {
     path: '/auth/reset',
     component: () => (path.split('?')[0] === '/auth/reset' ? element : <PasswordResetPage />),
   });
-  const verifyEmailRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/auth/verify-email',
-    component: () => (path.split('?')[0] === '/auth/verify-email' ? element : <VerifyEmailPage />),
-  });
   const routeTree = rootRoute.addChildren([
     indexRoute,
     workspaceRoute,
     loginRoute,
     signupRoute,
     passwordResetRoute,
-    verifyEmailRoute,
   ]);
   return createRouter({
     history: createMemoryHistory({initialEntries: [path]}),