@shipfox/client-auth 3.0.1 → 5.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "3.0.1",
+  "version": "5.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,11 +35,12 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-auth-dto": "6.0.0",
+    "@shipfox/api-auth-dto": "7.1.0",
+    "@shipfox/client-api": "4.0.0",
     "@shipfox/api-workspaces-dto": "6.0.0",
-    "@shipfox/client-api": "1.0.0",
-    "@shipfox/client-shell": "3.0.1",
-    "@shipfox/client-ui": "3.0.1",
+    "@shipfox/client-invitations": "5.0.0",
+    "@shipfox/client-shell": "5.0.0",
+    "@shipfox/client-ui": "4.0.0",
     "@shipfox/react-ui": "0.3.5"
   },
   "peerDependencies": {
@@ -45,40 +50,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/biome": "1.8.2",
-    "@shipfox/client-test-setup": "0.0.3",
-    "@shipfox/swc": "1.2.6",
-    "@shipfox/ts-config": "1.3.8",
-    "@shipfox/typescript": "1.1.7",
-    "@shipfox/vitest": "1.2.3"
-  },
   "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/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();
+  });
+});

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

@@ -0,0 +1,177 @@
+import {AuthShell} from '@shipfox/client-shell/runtime';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput} from '@shipfox/react-ui/form-field';
+import type {HeaderProps} from '@shipfox/react-ui/typography';
+import type {FormEvent, ReactNode, Ref} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+const EIGHT_DIGIT_CODE_RE = /^\d{8}$/u;
+
+export interface EmailCodeVerificationProps {
+  destination: string;
+  expiresAt?: string | undefined;
+  nextResendAvailableAt?: string | undefined;
+  isResending?: boolean;
+  isVerifying?: boolean;
+  error?: string | undefined;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  headingProps?: Omit<HeaderProps, 'children' | 'id'> | undefined;
+  headingRef?: Ref<HTMLHeadingElement> | undefined;
+  onResend: () => void | Promise<void>;
+  onUseAnotherEmail: () => void;
+  onVerify: (code: string) => void | Promise<void>;
+}
+
+function timestamp(value: string | undefined): number | undefined {
+  if (!value) return undefined;
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? undefined : parsed;
+}
+
+export function EmailCodeVerification({
+  destination,
+  expiresAt,
+  nextResendAvailableAt,
+  isResending = false,
+  isVerifying = false,
+  error,
+  title = 'Check your email',
+  description = `We sent an eight-digit verification code to ${destination}.`,
+  children,
+  headingProps,
+  headingRef,
+  onResend,
+  onUseAnotherEmail,
+  onVerify,
+}: EmailCodeVerificationProps) {
+  const [code, setCode] = useState('');
+  const [now, setNow] = useState(() => Date.now());
+  const [codeError, setCodeError] = useState<string>();
+  const localHeadingRef = useRef<HTMLHeadingElement>(null);
+  const resendAvailableAt = timestamp(nextResendAvailableAt);
+  const expiration = timestamp(expiresAt);
+  const resendRemainingSeconds = resendAvailableAt
+    ? Math.max(0, Math.ceil((resendAvailableAt - now) / 1_000))
+    : 0;
+  const isResendCoolingDown = resendRemainingSeconds > 0;
+  const isExpired = expiration !== undefined && expiration <= now;
+  const isPending = isResending || isVerifying;
+
+  useEffect(() => {
+    const isPending = (tickNow: number) =>
+      (resendAvailableAt !== undefined && resendAvailableAt > tickNow) ||
+      (expiration !== undefined && expiration > tickNow);
+
+    const tickNow = Date.now();
+    setNow(tickNow);
+    if (!isPending(tickNow)) return;
+
+    const interval = window.setInterval(() => {
+      const nextTick = Date.now();
+      setNow(nextTick);
+      if (!isPending(nextTick)) {
+        window.clearInterval(interval);
+      }
+    }, 1_000);
+    return () => window.clearInterval(interval);
+  }, [expiration, resendAvailableAt]);
+
+  useEffect(() => {
+    localHeadingRef.current?.focus();
+  }, []);
+
+  const setHeadingRef = useCallback(
+    (heading: HTMLHeadingElement | null) => {
+      localHeadingRef.current = heading;
+      if (typeof headingRef === 'function') {
+        headingRef(heading);
+      } else if (headingRef) {
+        headingRef.current = heading;
+      }
+    },
+    [headingRef],
+  );
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (isExpired || isVerifying) return;
+    if (!validateCode()) return;
+    void onVerify(code);
+  }
+
+  function validateCode() {
+    const error = EIGHT_DIGIT_CODE_RE.test(code)
+      ? undefined
+      : 'Enter the eight-digit verification code.';
+    setCodeError(error);
+    return error === undefined;
+  }
+
+  return (
+    <AuthShell
+      title={title}
+      description={description}
+      headingProps={headingProps}
+      headingRef={setHeadingRef}
+    >
+      {error ? (
+        <Callout role="alert" type="error">
+          {error}
+        </Callout>
+      ) : null}
+      {isExpired ? (
+        <Callout role="alert" type="error">
+          This verification code has expired. Use another email to try again.
+        </Callout>
+      ) : null}
+      <form className="flex flex-col gap-8" noValidate onSubmit={submit}>
+        <FormField label="Verification code" id="verification-code" error={codeError}>
+          <FormFieldInput
+            autoComplete="one-time-code"
+            inputMode="numeric"
+            maxLength={8}
+            pattern="[0-9]{8}"
+            value={code}
+            onChange={(event) => {
+              setCode(event.target.value.replace(/\D/gu, '').slice(0, 8));
+              setCodeError(undefined);
+            }}
+            onBlur={validateCode}
+          />
+        </FormField>
+        <Button className="w-full" type="submit" disabled={isExpired} isLoading={isVerifying}>
+          Verify email
+        </Button>
+        <Button
+          aria-disabled={isResendCoolingDown ? true : undefined}
+          className="w-full aria-disabled:cursor-not-allowed aria-disabled:opacity-70"
+          variant="secondary"
+          type="button"
+          isLoading={isResending}
+          onClick={() => {
+            if (!isResendCoolingDown && !isResending) void onResend();
+          }}
+        >
+          {isResending
+            ? 'Sending email...'
+            : isResendCoolingDown
+              ? `Resend in ${resendRemainingSeconds}s`
+              : 'Resend verification email'}
+        </Button>
+      </form>
+      <Button
+        className="w-full"
+        variant="transparent"
+        type="button"
+        disabled={isPending}
+        onClick={onUseAnotherEmail}
+      >
+        Use another email
+      </Button>
+      {children}
+    </AuthShell>
+  );
+}