@shipfox/client-auth 2.0.0 → 4.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -23,6 +23,10 @@
       "types": "./dist/feature.d.ts",
       "default": "./dist/feature.js"
     },
+    "./continuation": {
+      "types": "./dist/continuation.d.ts",
+      "default": "./dist/continuation.js"
+    },
     "./routes/*": {
       "types": "./dist/routes/*.d.ts",
       "default": "./dist/routes/*.js"
@@ -31,12 +35,12 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-auth-dto": "6.0.0",
-    "@shipfox/client-api": "1.0.0",
-    "@shipfox/client-shell": "2.0.0",
+    "@shipfox/api-auth-dto": "7.1.0",
     "@shipfox/api-workspaces-dto": "6.0.0",
-    "@shipfox/client-ui": "2.0.0",
-    "@shipfox/react-ui": "0.3.3"
+    "@shipfox/client-api": "4.0.0",
+    "@shipfox/client-shell": "4.0.0",
+    "@shipfox/client-ui": "4.0.0",
+    "@shipfox/react-ui": "0.3.5"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",
@@ -45,40 +49,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "devDependencies": {
-    "@argos-ci/cli": "^5.0.0",
-    "@argos-ci/storybook": "^6.0.0",
-    "@faker-js/faker": "^10.4.0",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/react": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@tanstack/react-query": "^5.101.0",
-    "@tanstack/react-router": "^1.170.16",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/browser-playwright": "^4.1.5",
-    "fishery": "^2.4.0",
-    "jotai": "^2.19.1",
-    "jsdom": "^29.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "storybook": "^10.0.0",
-    "storybook-addon-pseudo-states": "^10.0.0",
-    "tailwindcss": "^4.1.13",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.5",
-    "@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/biome": "1.8.2"
-  },
   "scripts": {
     "build": "shipfox-swc",
     "check": "shipfox-biome-check",

package/src/components/auth-provider.test.tsx

@@ -1,6 +1,8 @@
 import {configureApiClient} from '@shipfox/client-api';
+import {QueryClient, useQuery} from '@tanstack/react-query';
 import {render, screen, waitFor} from '@testing-library/react';
 import {useEffect, useRef} from 'react';
+import {useLoginAuth} from '#hooks/api/login-auth.js';
 import {useLogoutAuth} from '#hooks/api/logout-auth.js';
 import {useRefreshAuth} from '#hooks/api/refresh-auth.js';
 import {useAuthState} from '#hooks/use-auth-state.js';
@@ -16,6 +18,8 @@ const user = {
   updated_at: '2026-04-27T00:00:00.000Z',
 };
 
+const otherUser = {...user, id: '22222222-2222-4222-8222-222222222222', email: 'other@example.com'};
+
 function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
   return new Response(JSON.stringify(body), {
     headers: {'content-type': 'application/json'},
@@ -39,6 +43,28 @@ function StatusProbe() {
   );
 }
 
+function PrivateDataProbe() {
+  const auth = useAuthState();
+  const privateData = useQuery({
+    queryKey: ['private-data'],
+    queryFn: () => new Promise<string>(() => undefined),
+    enabled: auth.isAuthenticated,
+  });
+  const login = useLoginAuth();
+
+  return (
+    <div>
+      <span data-testid="private-data">{privateData.data ?? 'loading'}</span>
+      <button
+        type="button"
+        onClick={() => void login.mutateAsync({email: 'other@example.com', password: 'password'})}
+      >
+        Switch user
+      </button>
+    </div>
+  );
+}
+
 describe('AuthProvider', () => {
   beforeEach(() => {
     configureApiClient({
@@ -50,7 +76,9 @@ describe('AuthProvider', () => {
   });
 
   test('boots from a successful refresh', async () => {
-    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse({token: 'access-token', user}));
+    const fetchImpl = vi
+      .fn()
+      .mockImplementation(() => Promise.resolve(jsonResponse({token: 'access-token', user})));
     configureApiClient({fetchImpl});
 
     render(
@@ -64,21 +92,26 @@ describe('AuthProvider', () => {
   });
 
   test('treats refresh 401 as a guest session', async () => {
+    const queryClient = new QueryClient();
+    const cancelQueries = vi.spyOn(queryClient, 'cancelQueries');
     const fetchImpl = vi
       .fn()
       .mockResolvedValue(
         jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
       );
     configureApiClient({fetchImpl});
+    queryClient.setQueryData(['private-data'], 'private data');
 
     render(
-      <AuthProvider>
+      <AuthProvider queryClient={queryClient}>
         <StatusProbe />
       </AuthProvider>,
     );
 
     await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('guest'));
     expect(screen.getByTestId('email')).toHaveTextContent('none');
+    expect(cancelQueries).toHaveBeenCalledTimes(1);
+    expect(queryClient.getQueryData(['private-data'])).toBeUndefined();
   });
 
   test('keeps the current session when refresh fails with a server error', async () => {
@@ -116,6 +149,41 @@ describe('AuthProvider', () => {
     expect(screen.getByTestId('email')).toHaveTextContent('noe@example.com');
   });
 
+  test('preserves private cached data when refresh returns the same user', async () => {
+    const queryClient = new QueryClient();
+    const cancelQueries = vi.spyOn(queryClient, 'cancelQueries');
+    const fetchImpl = vi
+      .fn()
+      .mockImplementation(() => Promise.resolve(jsonResponse({token: 'access-token', user})));
+    configureApiClient({fetchImpl});
+    queryClient.setQueryData(['private-data'], 'current user private data');
+    const onDone = vi.fn();
+
+    function RefreshAfterBootProbe() {
+      const auth = useAuthState();
+      const refresh = useRefreshAuth();
+      const didRefresh = useRef(false);
+
+      useEffect(() => {
+        if (auth.status !== 'authenticated' || didRefresh.current) return;
+        didRefresh.current = true;
+        void refresh().then(onDone);
+      }, [auth.status, refresh]);
+
+      return <StatusProbe />;
+    }
+
+    render(
+      <AuthProvider queryClient={queryClient}>
+        <RefreshAfterBootProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(onDone).toHaveBeenCalledTimes(1));
+    expect(cancelQueries).not.toHaveBeenCalled();
+    expect(queryClient.getQueryData(['private-data'])).toBe('current user private data');
+  });
+
   test('deduplicates concurrent refresh calls', async () => {
     const fetchImpl = vi
       .fn()
@@ -144,14 +212,30 @@ describe('AuthProvider', () => {
   });
 
   test('logout clears local state even when the API call fails', async () => {
+    const queryClient = new QueryClient();
+    const cancelQueries = vi.spyOn(queryClient, 'cancelQueries');
     const fetchImpl = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse({token: 'access-token', user}))
       .mockRejectedValueOnce(new Error('offline'));
     configureApiClient({fetchImpl});
+    queryClient.setQueryData(['private-data'], 'private data');
+    const onQueryAbort = vi.fn();
+    void queryClient
+      .fetchQuery({
+        queryKey: ['in-flight-private-data'],
+        queryFn: ({signal}) =>
+          new Promise<string>((_, reject) => {
+            signal.addEventListener('abort', () => {
+              onQueryAbort();
+              reject(signal.reason);
+            });
+          }),
+      })
+      .catch(() => undefined);
 
     render(
-      <AuthProvider>
+      <AuthProvider queryClient={queryClient}>
         <StatusProbe />
       </AuthProvider>,
     );
@@ -160,5 +244,91 @@ describe('AuthProvider', () => {
     screen.getByRole('button', {name: 'Logout'}).click();
 
     await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('guest'));
+    expect(cancelQueries).toHaveBeenCalledTimes(1);
+    expect(onQueryAbort).toHaveBeenCalledTimes(1);
+    expect(queryClient.getQueryData(['private-data'])).toBeUndefined();
+  });
+
+  test('does not restore a session when logout supersedes workspace hydration', async () => {
+    const workspaceRefreshStarted = vi.fn();
+    let workspaceRequestCount = 0;
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (!request.url.endsWith('/workspaces'))
+        return Promise.resolve(jsonResponse({token: 'access-token', user}));
+
+      workspaceRequestCount += 1;
+      if (workspaceRequestCount === 1) return Promise.resolve(jsonResponse({memberships: []}));
+
+      workspaceRefreshStarted();
+      return new Promise<Response>((_, reject) => {
+        request.signal.addEventListener('abort', () => reject(request.signal.reason));
+      });
+    });
+    configureApiClient({fetchImpl});
+
+    function LogoutDuringRefreshProbe() {
+      const auth = useAuthState();
+      const logout = useLogoutAuth();
+      const refresh = useRefreshAuth();
+      const didRefresh = useRef(false);
+
+      useEffect(() => {
+        if (auth.status !== 'authenticated' || didRefresh.current) return;
+        didRefresh.current = true;
+        void refresh();
+      }, [auth.status, refresh]);
+
+      return (
+        <div>
+          <span data-testid="status">{auth.status}</span>
+          <button type="button" onClick={() => void logout.mutateAsync()}>
+            Logout
+          </button>
+        </div>
+      );
+    }
+
+    render(
+      <AuthProvider>
+        <LogoutDuringRefreshProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(workspaceRefreshStarted).toHaveBeenCalledTimes(1));
+    screen.getByRole('button', {name: 'Logout'}).click();
+
+    await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('guest'));
+  });
+
+  test('does not render cached private data after a user switch', async () => {
+    const queryClient = new QueryClient();
+    const cancelQueries = vi.spyOn(queryClient, 'cancelQueries');
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = (input as Request).url;
+      if (url.endsWith('/auth/login'))
+        return Promise.resolve(jsonResponse({token: 'other-token', user: otherUser}));
+      if (url.endsWith('/workspaces')) return Promise.resolve(jsonResponse({memberships: []}));
+      return Promise.resolve(jsonResponse({token: 'access-token', user}));
+    });
+    configureApiClient({fetchImpl});
+    queryClient.setQueryData(['private-data'], 'User A private data');
+
+    render(
+      <AuthProvider queryClient={queryClient}>
+        <PrivateDataProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId('private-data')).toHaveTextContent('User A private data'),
+    );
+    screen.getByRole('button', {name: 'Switch user'}).click();
+
+    await waitFor(() =>
+      expect(screen.getByTestId('private-data')).not.toHaveTextContent('User A private data'),
+    );
+    expect(cancelQueries).toHaveBeenCalledTimes(1);
+    expect(queryClient.getQueryData(['private-data'])).toBeUndefined();
   });
 });

package/src/components/auth-shell.tsx

@@ -1,15 +1,24 @@
 import {Icon} from '@shipfox/react-ui/icon';
-import {Header, Text} from '@shipfox/react-ui/typography';
-import type {PropsWithChildren, ReactNode} from 'react';
+import {Header, type HeaderProps, Text} from '@shipfox/react-ui/typography';
+import type {PropsWithChildren, ReactNode, Ref} from 'react';
 
-interface AuthShellProps {
+export interface AuthShellProps {
   title: string;
   description: string;
   children: ReactNode;
   className?: string;
+  headingProps?: Omit<HeaderProps, 'children' | 'id'> | undefined;
+  headingRef?: Ref<HTMLHeadingElement> | undefined;
 }
 
-export function AuthShell({title, description, children, className}: AuthShellProps) {
+export function AuthShell({
+  title,
+  description,
+  children,
+  className,
+  headingProps,
+  headingRef,
+}: AuthShellProps) {
   return (
     <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background-subtle-base px-24 py-32 max-[520px]:items-start max-[520px]:px-20 max-[520px]:pb-32 max-[520px]:pt-56">
       <div
@@ -34,7 +43,13 @@ export function AuthShell({title, description, children, className}: AuthShellPr
             <Icon name="shipfox" className="size-42 text-background-highlight-interactive" />
           </div>
           <div className="flex min-w-[128px] flex-col items-center gap-4 text-center">
-            <Header id="auth-title" variant="h1">
+            <Header
+              id="auth-title"
+              variant="h1"
+              tabIndex={-1}
+              {...headingProps}
+              {...(headingRef ? ({ref: headingRef} as HeaderProps) : {})}
+            >
               {title}
             </Header>
             <Text size="sm" className="text-foreground-neutral-subtle">

package/src/components/email-code-verification.test.tsx

@@ -0,0 +1,159 @@
+import {act, fireEvent, render, screen} from '@testing-library/react';
+import {createRef} from 'react';
+import {EmailCodeVerification} from './email-code-verification.js';
+
+function submitVerificationCode() {
+  const form = screen.getByLabelText('Verification code').closest('form');
+  if (!form) throw new Error('Verification code input must be inside a form');
+  fireEvent.submit(form);
+}
+
+describe('EmailCodeVerification', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('submits only an eight-digit numeric code and focuses its heading', () => {
+    const onVerify = vi.fn();
+    const headingRef = createRef<HTMLHeadingElement>();
+
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        headingRef={headingRef}
+        onResend={vi.fn()}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={onVerify}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('Verification code'), {target: {value: '12a3456789'}});
+    submitVerificationCode();
+
+    expect(screen.getByLabelText('Verification code')).toHaveValue('12345678');
+    expect(onVerify).toHaveBeenCalledWith('12345678');
+    expect(headingRef.current).toHaveFocus();
+  });
+
+  test('shows an accessible validation error for a short code', () => {
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        onResend={vi.fn()}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={vi.fn()}
+      />,
+    );
+    submitVerificationCode();
+
+    expect(screen.getByText('Enter the eight-digit verification code.')).toBeInTheDocument();
+  });
+
+  test('validates the code on blur', () => {
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        onResend={vi.fn()}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={vi.fn()}
+      />,
+    );
+    fireEvent.blur(screen.getByLabelText('Verification code'));
+
+    expect(screen.getByText('Enter the eight-digit verification code.')).toBeInTheDocument();
+  });
+
+  test('enforces the resend cooldown and resumes when it expires', async () => {
+    vi.useFakeTimers({toFake: ['Date', 'setInterval', 'clearInterval']});
+    const onResend = vi.fn();
+    const nextResendAvailableAt = new Date(Date.now() + 2_000).toISOString();
+
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        nextResendAvailableAt={nextResendAvailableAt}
+        onResend={onResend}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Resend in 2s'}));
+
+    expect(onResend).not.toHaveBeenCalled();
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2_000);
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Resend verification email'}));
+
+    expect(onResend).toHaveBeenCalledOnce();
+  });
+
+  test('rounds a sub-second cooldown remainder up to the next whole second', () => {
+    vi.useFakeTimers({toFake: ['Date', 'setInterval', 'clearInterval']});
+    const nextResendAvailableAt = new Date(Date.now() + 1_001).toISOString();
+
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        nextResendAvailableAt={nextResendAvailableAt}
+        onResend={vi.fn()}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('button', {name: 'Resend in 2s'})).toBeInTheDocument();
+  });
+
+  test('ignores a malformed nextResendAvailableAt or expiresAt timestamp', () => {
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        expiresAt="not-a-date"
+        nextResendAvailableAt="not-a-date"
+        onResend={vi.fn()}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('button', {name: 'Resend verification email'})).toBeInTheDocument();
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  test('disables verification after the caller-provided expiry timestamp', () => {
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        expiresAt={new Date(Date.now() - 1_000).toISOString()}
+        onResend={vi.fn()}
+        onUseAnotherEmail={vi.fn()}
+        onVerify={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('alert')).toHaveTextContent('This verification code has expired.');
+    expect(screen.getByRole('button', {name: 'Verify email'})).toBeDisabled();
+  });
+
+  test('renders caller-owned errors, pending states, and another-email action', () => {
+    const onUseAnotherEmail = vi.fn();
+
+    render(
+      <EmailCodeVerification
+        destination="person@example.com"
+        error="That code is no longer valid."
+        isResending
+        isVerifying
+        onResend={vi.fn()}
+        onUseAnotherEmail={onUseAnotherEmail}
+        onVerify={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Use another email'}));
+
+    expect(screen.getByRole('alert')).toHaveTextContent('That code is no longer valid.');
+    expect(screen.getByRole('button', {name: 'Sending email...'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Use another email'})).toBeDisabled();
+    expect(onUseAnotherEmail).not.toHaveBeenCalled();
+  });
+});