@shipfox/client-auth 2.0.0 → 4.0.0

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

@@ -0,0 +1,177 @@
+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';
+import {AuthShell} from './auth-shell.js';
+
+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>
+  );
+}

package/src/components/redirect-context.test.ts

@@ -0,0 +1,51 @@
+import {parseRedirectContext} from './redirect-context.js';
+
+describe('parseRedirectContext', () => {
+  test('returns an ordinary safe return path', () => {
+    const context = parseRedirectContext('/workspaces/acme?tab=runs');
+
+    expect(context).toEqual({returnTo: '/workspaces/acme?tab=runs'});
+  });
+
+  test('separates an invitation token from generic redirect state', () => {
+    const context = parseRedirectContext('/invitations/accept?token=raw-invitation-token');
+
+    expect(context).toEqual({invitationToken: 'raw-invitation-token'});
+    expect(context.returnTo).toBeUndefined();
+  });
+
+  test('separates an invitation token after path normalization', () => {
+    const context = parseRedirectContext(
+      '/workspaces/../invitations/accept?token=raw-invitation-token',
+    );
+
+    expect(context).toEqual({invitationToken: 'raw-invitation-token'});
+  });
+
+  test.each([
+    'https://attacker.example',
+    '//attacker.example',
+    '/auth/login',
+    '/%61uth/login',
+    '/%E0%80%80',
+  ])('rejects malformed or unsafe redirect %s', (redirect) => {
+    const context = parseRedirectContext(redirect);
+
+    expect(context).toEqual({});
+  });
+
+  test.each([
+    ['/invitations/accept', {}],
+    ['/invitations/accept?token=', {}],
+    [
+      '/invitations/other?token=raw-invitation-token',
+      {
+        returnTo: '/invitations/other?token=raw-invitation-token',
+      },
+    ],
+  ])('does not treat %s as an invitation context', (redirect, expected) => {
+    const context = parseRedirectContext(redirect);
+
+    expect(context).toEqual(expected);
+  });
+});

package/src/components/redirect-context.ts

@@ -0,0 +1,26 @@
+import {sanitizeRedirectPath} from './redirect-target.js';
+
+const INVITATION_ACCEPT_PATH = '/invitations/accept';
+
+export interface RedirectContext {
+  invitationToken?: string;
+  returnTo?: string;
+}
+
+/**
+ * Separates a safe post-authentication destination from an invitation token.
+ * The token never remains in `returnTo`, so callers can keep it in their
+ * short-lived invitation flow instead of forwarding it through generic redirects.
+ */
+export function parseRedirectContext(value: unknown): RedirectContext {
+  const redirect = sanitizeRedirectPath(value);
+  if (!redirect) return {};
+
+  const decoded = decodeURIComponent(redirect);
+  const [path, queryString = ''] = decoded.split('?', 2);
+  if (path !== INVITATION_ACCEPT_PATH) return {returnTo: redirect};
+
+  const params = new URLSearchParams(queryString);
+  const invitationToken = params.get('token');
+  return invitationToken ? {invitationToken} : {};
+}

package/src/components/redirect-target.test.ts

@@ -23,6 +23,7 @@ describe('sanitizeRedirectPath', () => {
     ['no leading slash', 'foo'],
     ['protocol-relative URL', '//evil.com'],
     ['triple-slash URL', '///evil.com'],
+    ['backslash external URL', '/\\evil.com'],
     ['absolute https URL', 'https://evil.com'],
     ['javascript scheme', 'javascript:alert(1)'],
     ['plain /auth/login', '/auth/login'],
@@ -30,6 +31,7 @@ describe('sanitizeRedirectPath', () => {
     ['/auth/reset with token', '/auth/reset?token=x'],
     ['/auth with query bypass', '/auth?token=x'],
     ['/auth with fragment bypass', '/auth#foo'],
+    ['normalized auth path', '/workspaces/../auth/logout'],
   ])('rejects %s', (_label, input) => {
     test('returns undefined', () => {
       const result = sanitizeRedirectPath(input);
@@ -51,6 +53,12 @@ describe('sanitizeRedirectPath', () => {
       expect(result).toBeUndefined();
     });
 
+    test('rejects a percent-encoded normalized auth path', () => {
+      const result = sanitizeRedirectPath('/workspaces/%2e%2e/auth/logout');
+
+      expect(result).toBeUndefined();
+    });
+
     test('rejects malformed percent-encoded input', () => {
       const result = sanitizeRedirectPath('/%E0%80%80');
 

package/src/components/redirect-target.ts

@@ -1,21 +1,22 @@
-const SEARCH_OR_HASH_RE = /[?#]/u;
+const REDIRECT_ORIGIN = 'https://shipfox-redirect.invalid';
 
-// Returns the input string only if it is a same-origin internal path safe to
-// navigate to after authentication. We decode before checking so percent-encoded
-// variants like `/%61uth/login` cannot bypass the `/auth/*` rejection.
+// Resolves and canonicalizes an internal path before returning it, so browser URL
+// parsing cannot turn a seemingly safe path into an external or auth route.
 export function sanitizeRedirectPath(value: unknown): string | undefined {
-  if (typeof value !== 'string') return undefined;
+  if (typeof value !== 'string' || !value.startsWith('/')) return undefined;
   let decoded: string;
   try {
     decoded = decodeURIComponent(value);
   } catch {
     return undefined;
   }
-  if (!decoded.startsWith('/')) return undefined;
-  if (decoded.startsWith('//')) return undefined;
-  // Strip search/hash before the /auth check so /auth?token=x and /auth#x
-  // cannot bypass the prefix match.
-  const pathOnly = decoded.split(SEARCH_OR_HASH_RE, 1)[0] ?? decoded;
-  if (pathOnly === '/auth' || pathOnly.startsWith('/auth/')) return undefined;
-  return value;
+  let target: URL;
+  try {
+    target = new URL(decoded, REDIRECT_ORIGIN);
+  } catch {
+    return undefined;
+  }
+  if (target.origin !== REDIRECT_ORIGIN) return undefined;
+  if (target.pathname === '/auth' || target.pathname.startsWith('/auth/')) return undefined;
+  return `${target.pathname}${target.search}${target.hash}`;
 }

package/src/continuation.test.ts

@@ -0,0 +1,15 @@
+import {
+  AuthActions,
+  AuthShell,
+  EmailCodeVerification,
+  parseRedirectContext,
+} from '@shipfox/client-auth/continuation';
+
+describe('client-auth continuation exports', () => {
+  test('publishes every continuation primitive through its public subpath', () => {
+    expect(AuthActions).toBeTypeOf('function');
+    expect(AuthShell).toBeTypeOf('function');
+    expect(EmailCodeVerification).toBeTypeOf('function');
+    expect(parseRedirectContext).toBeTypeOf('function');
+  });
+});

package/src/continuation.ts

@@ -0,0 +1,6 @@
+export {AuthActions, AuthShell, type AuthShellProps} from './components/auth-shell.js';
+export {
+  EmailCodeVerification,
+  type EmailCodeVerificationProps,
+} from './components/email-code-verification.js';
+export {parseRedirectContext, type RedirectContext} from './components/redirect-context.js';

package/src/hooks/api/login-auth.ts

@@ -1,41 +1,17 @@
 import type {LoginBodyDto, LoginResponseDto} from '@shipfox/api-auth-dto';
 import {apiRequest} from '@shipfox/client-api';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {useSetAtom} from 'jotai';
-import {authStateAtom, toAuthenticatedState} from '#state/auth.js';
-import {authRefreshQueryKey} from './refresh-auth.js';
-import {listUserWorkspaces, userWorkspacesQueryKey} from './workspace-auth.js';
+import {useMutation} from '@tanstack/react-query';
+import {useAuthTransition} from '#state/auth.js';
 
 export async function loginAuth(body: LoginBodyDto) {
   return await apiRequest<LoginResponseDto>('/auth/login', {method: 'POST', body});
 }
 
 export function useLoginAuth() {
-  const queryClient = useQueryClient();
-  const setState = useSetAtom(authStateAtom);
+  const {enterAuthenticated} = useAuthTransition();
 
   return useMutation({
     mutationFn: loginAuth,
-    onSuccess: async (result) => {
-      queryClient.setQueryData(authRefreshQueryKey, result);
-      // Resolve workspaces before flipping auth state to authenticated. A
-      // single atomic setState avoids the intermediate window where the user
-      // appears authenticated with zero workspaces, which sent users with
-      // workspaces straight to `/setup/workspaces/new` after form login.
-      let memberships: Awaited<ReturnType<typeof listUserWorkspaces>>['memberships'] = [];
-      try {
-        const workspaces = await queryClient.fetchQuery({
-          queryKey: userWorkspacesQueryKey,
-          queryFn: () => listUserWorkspaces(result.token),
-          retry: false,
-          staleTime: 0,
-        });
-        memberships = workspaces.memberships;
-        queryClient.setQueryData(userWorkspacesQueryKey, workspaces);
-      } catch {
-        // The user is authenticated even if workspace hydration fails.
-      }
-      setState(toAuthenticatedState(result, memberships));
-    },
+    onSuccess: enterAuthenticated,
   });
 }

package/src/hooks/api/logout-auth.ts

@@ -1,8 +1,6 @@
 import {apiRequest} from '@shipfox/client-api';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {useSetAtom} from 'jotai';
-import {authStateAtom} from '#state/auth.js';
-import {authRefreshQueryKey} from './refresh-auth.js';
+import {useMutation} from '@tanstack/react-query';
+import {useAuthTransition} from '#state/auth.js';
 
 async function logoutAuth() {
   try {
@@ -13,14 +11,10 @@ async function logoutAuth() {
 }
 
 export function useLogoutAuth() {
-  const queryClient = useQueryClient();
-  const setState = useSetAtom(authStateAtom);
+  const {enterGuest} = useAuthTransition();
 
   return useMutation({
     mutationFn: logoutAuth,
-    onSettled: () => {
-      setState({status: 'guest'});
-      queryClient.removeQueries({queryKey: authRefreshQueryKey});
-    },
+    onSettled: enterGuest,
   });
 }

package/src/hooks/api/password-reset-auth.ts

@@ -4,11 +4,8 @@ import type {
   PasswordResetRequestBodyDto,
 } from '@shipfox/api-auth-dto';
 import {apiRequest} from '@shipfox/client-api';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {useSetAtom} from 'jotai';
-import {authStateAtom, toAuthenticatedState} from '#state/auth.js';
-import {authRefreshQueryKey} from './refresh-auth.js';
-import {listUserWorkspaces, userWorkspacesQueryKey} from './workspace-auth.js';
+import {useMutation} from '@tanstack/react-query';
+import {useAuthTransition} from '#state/auth.js';
 
 export async function requestPasswordReset(body: PasswordResetRequestBodyDto) {
   await apiRequest<void>('/auth/password-reset', {method: 'POST', body});
@@ -26,26 +23,10 @@ export function useRequestPasswordResetAuth() {
 }
 
 export function useConfirmPasswordResetAuth() {
-  const queryClient = useQueryClient();
-  const setState = useSetAtom(authStateAtom);
+  const {enterAuthenticated} = useAuthTransition();
 
   return useMutation({
     mutationFn: confirmPasswordReset,
-    onSuccess: async (result) => {
-      setState(toAuthenticatedState(result));
-      queryClient.setQueryData(authRefreshQueryKey, result);
-      try {
-        const workspaces = await queryClient.fetchQuery({
-          queryKey: userWorkspacesQueryKey,
-          queryFn: () => listUserWorkspaces(result.token),
-          retry: false,
-          staleTime: 0,
-        });
-        setState(toAuthenticatedState(result, workspaces.memberships));
-        queryClient.setQueryData(userWorkspacesQueryKey, workspaces);
-      } catch {
-        // The user is authenticated even if workspace hydration fails.
-      }
-    },
+    onSuccess: enterAuthenticated,
   });
 }

package/src/hooks/api/verify-email-auth.ts

@@ -5,11 +5,8 @@ import type {
   VerifyEmailResendResponseDto,
 } from '@shipfox/api-auth-dto';
 import {apiRequest} from '@shipfox/client-api';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {useSetAtom} from 'jotai';
-import {authStateAtom, toAuthenticatedState} from '#state/auth.js';
-import {authRefreshQueryKey} from './refresh-auth.js';
-import {listUserWorkspaces, userWorkspacesQueryKey} from './workspace-auth.js';
+import {useMutation} from '@tanstack/react-query';
+import {useAuthTransition} from '#state/auth.js';
 
 async function verifyEmailAuth(body: VerifyEmailConfirmBodyDto) {
   return await apiRequest<VerifyEmailConfirmResponseDto>('/auth/verify-email/confirm', {
@@ -30,26 +27,10 @@ export function useResendEmailVerificationAuth() {
 }
 
 export function useVerifyEmailAuth() {
-  const queryClient = useQueryClient();
-  const setState = useSetAtom(authStateAtom);
+  const {enterAuthenticated} = useAuthTransition();
 
   return useMutation({
     mutationFn: verifyEmailAuth,
-    onSuccess: async (result) => {
-      setState(toAuthenticatedState(result));
-      queryClient.setQueryData(authRefreshQueryKey, result);
-      try {
-        const workspaces = await queryClient.fetchQuery({
-          queryKey: userWorkspacesQueryKey,
-          queryFn: () => listUserWorkspaces(result.token),
-          retry: false,
-          staleTime: 0,
-        });
-        setState(toAuthenticatedState(result, workspaces.memberships));
-        queryClient.setQueryData(userWorkspacesQueryKey, workspaces);
-      } catch {
-        // The user is authenticated even if workspace hydration fails.
-      }
-    },
+    onSuccess: enterAuthenticated,
   });
 }

package/src/pages/form-errors.test.ts

@@ -42,7 +42,7 @@ describe('loginErrorToFormError', () => {
 
     expect(result).toEqual({
       kind: 'form',
-      message: 'Sign-in protection is temporarily unavailable. Try again soon.',
+      message: 'Sign-in is temporarily unavailable. Try again soon.',
     });
   });
 

package/src/pages/form-utils.test.ts

@@ -8,10 +8,7 @@ describe('authErrorMessage', () => {
     ['email-taken', 'An account already exists for this email.'],
     ['token-invalid', 'This link is invalid or expired.'],
     ['rate-limited', 'Too many attempts. Wait a bit and try again.'],
-    [
-      'auth-rate-limit-unavailable',
-      'Sign-in protection is temporarily unavailable. Try again soon.',
-    ],
+    ['auth-rate-limit-unavailable', 'Sign-in is temporarily unavailable. Try again soon.'],
     ['network-error', 'We could not reach the API. Check your connection and try again.'],
   ])('maps %s to client copy', (code, message) => {
     const error = new ApiError({code, message: 'Server copy', status: 400});

package/src/pages/form-utils.ts

@@ -19,7 +19,7 @@ export function authErrorMessage(error: unknown): string {
     return 'Too many attempts. Wait a bit and try again.';
   }
   if (error.code === 'auth-rate-limit-unavailable') {
-    return 'Sign-in protection is temporarily unavailable. Try again soon.';
+    return 'Sign-in is temporarily unavailable. Try again soon.';
   }
   if (error.code === 'network-error') {
     return 'We could not reach the API. Check your connection and try again.';

package/src/pages/invitation-context.ts

@@ -4,28 +4,10 @@ import type {
 } from '@shipfox/api-workspaces-dto';
 import {apiRequest} from '@shipfox/client-api';
 import {useQuery} from '@tanstack/react-query';
+import {parseRedirectContext} from '#/components/redirect-context.js';
 
-const INVITATION_ACCEPT_PATH = '/invitations/accept';
-
-/**
- * Extract an invitation token from a `redirect=` URL if it points at the
- * canonical pre-auth invitation page. Returns undefined when the redirect is
- * absent, malformed, or unrelated to invitations.
- */
 export function extractInvitationToken(redirect: unknown): string | undefined {
-  if (typeof redirect !== 'string') return undefined;
-  let decoded: string;
-  try {
-    decoded = decodeURIComponent(redirect);
-  } catch {
-    return undefined;
-  }
-  if (!decoded.startsWith('/')) return undefined;
-  const [path, queryString = ''] = decoded.split('?', 2);
-  if (path !== INVITATION_ACCEPT_PATH) return undefined;
-  const params = new URLSearchParams(queryString);
-  const token = params.get('token');
-  return token && token.length > 0 ? token : undefined;
+  return parseRedirectContext(redirect).invitationToken;
 }
 
 async function fetchPreview(token: string): Promise<PreviewInvitationResponseDto> {