@shipfox/client-auth 3.0.1 → 5.0.0

package/src/pages/invitation-context.ts

@@ -1,57 +1,16 @@
-import type {
-  PreviewInvitationPendingDto,
-  PreviewInvitationResponseDto,
-} from '@shipfox/api-workspaces-dto';
-import {apiRequest} from '@shipfox/client-api';
-import {useQuery} from '@tanstack/react-query';
+import {
+  type InvitationPreview,
+  pendingInvitation,
+  usePreviewInvitation,
+} from '@shipfox/client-invitations';
+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;
-}
-
-async function fetchPreview(token: string): Promise<PreviewInvitationResponseDto> {
-  const params = new URLSearchParams({token});
-  return await apiRequest<PreviewInvitationResponseDto>(
-    `/invitations/preview?${params.toString()}`,
-  );
+  return parseRedirectContext(redirect).invitationToken;
 }
 
-export function pendingInvitation(
-  data: PreviewInvitationResponseDto | undefined,
-): PreviewInvitationPendingDto | undefined {
-  return data?.status === 'pending' ? data : undefined;
-}
-
-/**
- * Mirrors the hook in `@shipfox/client-invitations` but lives in `client-auth`
- * to avoid a circular dependency. Signup/login pages call this to lock the
- * email field when arriving from an invitation link.
- */
 export function useInvitationContext(token: string | undefined) {
-  return useQuery({
-    queryKey: ['invitations', 'preview', token ?? ''] as const,
-    queryFn: () => fetchPreview(token as string),
-    enabled: Boolean(token),
-    retry: false,
-    staleTime: 30_000,
-  });
+  return usePreviewInvitation(token);
 }
+
+export {type InvitationPreview, pendingInvitation};

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

@@ -70,7 +70,7 @@ describe('LoginPage', () => {
         return Promise.resolve(
           jsonResponse({
             status: 'pending',
-            workspace_id: 'workspace-1',
+            workspace_id: '11111111-1111-4111-8111-111111111111',
             workspace_name: 'Invite Workspace',
             email: 'invitee@example.com',
             invited_by_display: 'owner@example.com',

package/src/pages/login-page.tsx

@@ -1,4 +1,5 @@
 import {loginBodySchema} from '@shipfox/api-auth-dto';
+import {AuthShell} from '@shipfox/client-shell/runtime';
 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';
@@ -8,7 +9,6 @@ import {useForm} from '@tanstack/react-form';
 import {Link, useSearch} from '@tanstack/react-router';
 import {useAtom} from 'jotai';
 import {useEffect, useRef, useState} from 'react';
-import {AuthShell} from '#/components/auth-shell.js';
 import {useLoginAuth} from '#hooks/api/login-auth.js';
 import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
 import {loginErrorToFormError} from './form-errors.js';
@@ -81,7 +81,7 @@ export function LoginPage() {
     ? `/invitations/accept?token=${encodeURIComponent(invitationToken)}`
     : undefined;
   const headerTitle = invitationPending
-    ? `Join ${invitationPending.workspace_name}`
+    ? `Join ${invitationPending.workspaceName}`
     : 'Connect to Shipfox';
   const headerDescription = invitationPending
     ? 'Log in to accept your invitation.'

package/src/pages/logout-page.tsx

@@ -1,7 +1,7 @@
+import {AuthShell} from '@shipfox/client-shell/runtime';
 import {Text} from '@shipfox/react-ui/typography';
 import {useNavigate, useRouter, useSearch} from '@tanstack/react-router';
 import {useEffect} from 'react';
-import {AuthShell} from '#/components/auth-shell.js';
 import {sanitizeRedirectPath} from '#/components/redirect-target.js';
 import {useLogoutAuth} from '#hooks/api/logout-auth.js';
 

package/src/pages/password-reset-page.tsx

@@ -2,6 +2,7 @@ import {
   passwordResetConfirmBodySchema,
   passwordResetRequestBodySchema,
 } from '@shipfox/api-auth-dto';
+import {AuthShell} from '@shipfox/client-shell/runtime';
 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';
@@ -11,12 +12,10 @@ 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 {
   useConfirmPasswordResetAuth,
   useRequestPasswordResetAuth,
 } from '#hooks/api/password-reset-auth.js';
-import {useRefreshAuth} from '#hooks/api/refresh-auth.js';
 import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
 import {
   passwordResetConfirmErrorToFormError,
@@ -148,7 +147,6 @@ function PasswordResetRequest() {
 
 function PasswordResetConfirm({token}: {token: string}) {
   const confirmPasswordReset = useConfirmPasswordResetAuth();
-  const refreshAuth = useRefreshAuth();
   const navigate = useNavigate();
   const [, setAuthFormDraft] = useAtom(authFormDraftAtom);
   const [formError, setFormError] = useState<string | undefined>();
@@ -163,7 +161,6 @@ function PasswordResetConfirm({token}: {token: string}) {
           new_password: value.new_password,
         });
         await confirmPasswordReset.mutateAsync(body);
-        await refreshAuth();
         setAuthFormDraft(initialAuthFormDraft);
         toast.success('Your password has been changed. You are now logged in.');
         await navigate({to: '/', replace: true});

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

@@ -137,7 +137,7 @@ describe('SignupPage', () => {
         return Promise.resolve(
           jsonResponse({
             status: 'pending',
-            workspace_id: 'workspace-1',
+            workspace_id: '11111111-1111-4111-8111-111111111111',
             workspace_name: 'Invite Workspace',
             email: 'invitee@example.com',
             invited_by_display: 'owner@example.com',

package/src/pages/signup-page.tsx

@@ -1,4 +1,5 @@
-import {signupBodySchema, verifyEmailConfirmBodySchema} from '@shipfox/api-auth-dto';
+import {signupBodySchema} from '@shipfox/api-auth-dto';
+import {AuthShell} from '@shipfox/client-shell/runtime';
 import {displayNameFieldError} from '@shipfox/client-ui';
 import {Button, ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
@@ -10,15 +11,11 @@ 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 {EmailCodeVerification} from '#/components/email-code-verification.js';
 import {useRefreshAuth} from '#hooks/api/refresh-auth.js';
 import {useSignupAuth} from '#hooks/api/signup-auth.js';
 import {useResendEmailVerificationAuth, useVerifyEmailAuth} from '#hooks/api/verify-email-auth.js';
 import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
-import {
-  getResendRemainingSeconds,
-  parseNextResendAvailableAt,
-} from './email-verification-resend-model.js';
 import {signupErrorToFormError} from './form-errors.js';
 import {authErrorMessage} from './form-utils.js';
 import {
@@ -39,8 +36,7 @@ export function SignupPage() {
   const invitationPending = pendingInvitation(invitationPreview.data);
   const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
   const [emailChallenge, setEmailChallenge] = useState<{email: string; id: string} | undefined>();
-  const [now, setNow] = useState(() => Date.now());
-  const [nextResendAvailableAt, setNextResendAvailableAt] = useState<number | undefined>();
+  const [nextResendAvailableAt, setNextResendAvailableAt] = useState<string | undefined>();
   const [formError, setFormError] = useState<string | undefined>();
   const [resendError, setResendError] = useState<string | undefined>();
   const draftRef = useRef(authFormDraft);
@@ -48,8 +44,6 @@ export function SignupPage() {
   // 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: ''},
@@ -73,16 +67,16 @@ export function SignupPage() {
             // 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}.`);
+          toast.success(`You joined ${invitationPending.workspaceName}.`);
           await navigate({
             to: '/workspaces/$wid',
-            params: {wid: result.membership.workspace_id},
+            params: {wid: result.membership.workspaceId},
           });
           return;
         }
 
-        if (invitationToken && result.accept_error) {
-          toast.error(result.accept_error.message);
+        if (invitationToken && result.acceptError) {
+          toast.error(result.acceptError.message);
           await navigate({
             to: '/invitations/accept',
             search: {token: invitationToken},
@@ -90,16 +84,12 @@ export function SignupPage() {
           return;
         }
 
-        if (!result.email_challenge) {
+        if (!result.emailChallenge) {
           throw new Error('Signup did not return an email verification challenge');
         }
-        setEmailChallenge({email: result.user.email, id: result.email_challenge.id});
-        verificationForm.reset();
+        setEmailChallenge({email: result.user.email, id: result.emailChallenge.id});
         setResendError(undefined);
-        setNow(Date.now());
-        setNextResendAvailableAt(
-          parseNextResendAvailableAt(result.email_challenge.next_resend_available_at),
-        );
+        setNextResendAvailableAt(result.emailChallenge.nextResendAvailableAt);
       } catch (error) {
         const mapped = signupErrorToFormError(error);
         if (mapped.kind === 'field') {
@@ -114,48 +104,6 @@ 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 (!emailChallenge || !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);
-  }, [emailChallenge, nextResendAvailableAt]);
-
   // When arriving from an invitation link, prefill the email and lock it.
   useEffect(() => {
     if (invitationPending && form.state.values.email !== invitationPending.email) {
@@ -178,7 +126,7 @@ export function SignupPage() {
   }, [form, setAuthFormDraft]);
 
   async function onResendVerificationEmail() {
-    if (!emailChallenge || isResendCoolingDown || resendEmailVerification.isPending) return;
+    if (!emailChallenge || resendEmailVerification.isPending) return;
 
     setResendError(undefined);
     try {
@@ -186,11 +134,7 @@ export function SignupPage() {
         email: emailChallenge.email,
         challenge_id: emailChallenge.id,
       });
-      const nextAvailableAt = parseNextResendAvailableAt(result.next_resend_available_at);
-      setNow(Date.now());
-      if (nextAvailableAt !== undefined) {
-        setNextResendAvailableAt(nextAvailableAt);
-      }
+      setNextResendAvailableAt(result.next_resend_available_at);
       toast.success('If another verification email can be sent, it will arrive shortly.');
     } catch (error) {
       setResendError(authErrorMessage(error));
@@ -199,85 +143,45 @@ export function SignupPage() {
 
   if (emailChallenge) {
     return (
-      <AuthShell
-        title="Check your email"
-        description={`We sent an eight-digit verification code to ${emailChallenge.email}.`}
+      <EmailCodeVerification
+        destination={emailChallenge.email}
+        nextResendAvailableAt={nextResendAvailableAt}
+        isResending={resendEmailVerification.isPending}
+        isVerifying={verifyEmail.isPending}
+        error={resendError}
+        onVerify={async (code) => {
+          setResendError(undefined);
+          try {
+            await verifyEmail.mutateAsync({
+              email: emailChallenge.email,
+              challenge_id: emailChallenge.id,
+              code,
+            });
+            await refreshAuth();
+            toast.success('Your email is verified. You are now logged in.');
+            await navigate({to: '/', replace: true});
+          } catch (error) {
+            setResendError(authErrorMessage(error));
+          }
+        }}
+        onResend={onResendVerificationEmail}
+        onUseAnotherEmail={() => {
+          setEmailChallenge(undefined);
+          setResendError(undefined);
+        }}
       >
-        {resendError ? (
-          <Callout role="alert" type="error">
-            {resendError}
-          </Callout>
-        ) : null}
-        <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"
-            variant="secondary"
-            type="button"
-            isLoading={resendEmailVerification.isPending}
-            onClick={onResendVerificationEmail}
-          >
-            {resendEmailVerification.isPending
-              ? 'Sending email...'
-              : isResendCoolingDown
-                ? `Resend in ${resendRemainingSeconds}s`
-                : 'Resend verification email'}
-          </Button>
-        </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>
             <Link to="/auth/login">Log in</Link>
           </ButtonLink>
         </Text>
-      </AuthShell>
+      </EmailCodeVerification>
     );
   }
 
   const headerTitle = invitationPending
-    ? `Join ${invitationPending.workspace_name}`
+    ? `Join ${invitationPending.workspaceName}`
     : 'Create your Shipfox account';
   const headerDescription = invitationPending
     ? `Create an account to accept your invitation.`

package/src/state/auth.ts

@@ -6,6 +6,7 @@ export {
   authStateAtom,
   initialAuthState,
   toAuthenticatedState,
+  useAuthTransition,
   type Workspace,
 } from '@shipfox/client-shell/runtime';
 

package/src/state/last-workspace.test.ts

@@ -45,6 +45,22 @@ describe('lastWorkspaceIdAtom', () => {
     unsubscribe();
   });
 
+  test('syncs the atom when another tab updates last workspace storage', () => {
+    const store = createStore();
+    const unsubscribe = store.sub(lastWorkspaceIdAtom, () => undefined);
+    window.localStorage.setItem('shipfox.lastWorkspaceId', JSON.stringify('workspace-2'));
+
+    window.dispatchEvent(
+      new StorageEvent('storage', {
+        key: 'shipfox.lastWorkspaceId',
+        storageArea: window.localStorage,
+      }),
+    );
+
+    expect(store.get(lastWorkspaceIdAtom)).toBe('workspace-2');
+    unsubscribe();
+  });
+
   test('rememberLastWorkspaceId persists a root redirect target', () => {
     rememberLastWorkspaceId('workspace-1');