@shipfox/client-auth 4.0.0 → 6.0.1

package/src/pages/invitation-context.ts

@@ -1,39 +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';
 
 export function extractInvitationToken(redirect: unknown): string | undefined {
   return parseRedirectContext(redirect).invitationToken;
 }
 
-async function fetchPreview(token: string): Promise<PreviewInvitationResponseDto> {
-  const params = new URLSearchParams({token});
-  return await apiRequest<PreviewInvitationResponseDto>(
-    `/invitations/preview?${params.toString()}`,
-  );
-}
-
-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,16 +1,17 @@
 import {loginBodySchema} from '@shipfox/api-auth-dto';
+import {AuthShell, useRouteSearch} 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';
 import {Icon} from '@shipfox/react-ui/icon';
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
-import {Link, useSearch} from '@tanstack/react-router';
+import {Link} 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 {validateRedirectSearch} from '../routes/inputs.js';
 import {loginErrorToFormError} from './form-errors.js';
 import {
   extractInvitationToken,
@@ -20,7 +21,7 @@ import {
 
 export function LoginPage() {
   const login = useLoginAuth();
-  const search = useSearch({strict: false}) as {redirect?: unknown};
+  const search = useRouteSearch(validateRedirectSearch);
   const invitationToken = extractInvitationToken(search.redirect);
   const invitationPreview = useInvitationContext(invitationToken);
   const invitationPending = pendingInvitation(invitationPreview.data);
@@ -81,7 +82,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.test.tsx

@@ -0,0 +1,75 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {AuthRuntime} from '@shipfox/client-shell/runtime';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {render, screen} from '@testing-library/react';
+import {Provider as JotaiProvider} from 'jotai';
+import {LogoutPage} from './logout-page.js';
+
+function renderLogoutPage(path: string) {
+  const rootRoute = createRootRoute({component: Outlet});
+  const logoutRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/auth/logout',
+    component: LogoutPage,
+  });
+  const loginRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/auth/login',
+    component: () => <h1>Login destination</h1>,
+  });
+  const workspaceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid',
+    component: () => <h1>Workspace destination</h1>,
+  });
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: [path]}),
+    routeTree: rootRoute.addChildren([logoutRoute, loginRoute, workspaceRoute]),
+  });
+  const queryClient = new QueryClient();
+
+  render(
+    <QueryClientProvider client={queryClient}>
+      <JotaiProvider>
+        <AuthRuntime effects={false}>
+          <RouterProvider router={router} />
+        </AuthRuntime>
+      </JotaiProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe('LogoutPage', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', getAccessToken: undefined});
+  });
+
+  test('logs out before following a safe same-origin redirect', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(new Response(null, {status: 204}));
+    configureApiClient({fetchImpl});
+
+    renderLogoutPage('/auth/logout?redirect=%2Fworkspaces%2Facme');
+
+    expect(await screen.findByRole('heading', {name: 'Workspace destination'})).toBeVisible();
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(request.url).toBe('https://api.example.test/auth/logout');
+    expect(request.method).toBe('POST');
+  });
+
+  test('falls back to login without forwarding an invitation token', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(new Response(null, {status: 204}));
+    configureApiClient({fetchImpl});
+
+    renderLogoutPage('/auth/logout?redirect=%2Finvitations%2Faccept%3Ftoken%3Dsf_i_raw-token');
+
+    expect(await screen.findByRole('heading', {name: 'Login destination'})).toBeVisible();
+  });
+});

package/src/pages/logout-page.tsx

@@ -1,27 +1,23 @@
+import {AuthShell, useRouteSearch} from '@shipfox/client-shell/runtime';
 import {Text} from '@shipfox/react-ui/typography';
-import {useNavigate, useRouter, useSearch} from '@tanstack/react-router';
+import {useRouter} from '@tanstack/react-router';
 import {useEffect} from 'react';
-import {AuthShell} from '#/components/auth-shell.js';
-import {sanitizeRedirectPath} from '#/components/redirect-target.js';
+import {sanitizeLogoutRedirectPath} from '#/components/redirect-target.js';
 import {useLogoutAuth} from '#hooks/api/logout-auth.js';
+import {validateRedirectSearch} from '../routes/inputs.js';
 
 export function LogoutPage() {
   const logout = useLogoutAuth();
-  const navigate = useNavigate();
   const router = useRouter();
-  const search = useSearch({strict: false}) as {redirect?: unknown};
-  const target = sanitizeRedirectPath(search.redirect);
+  const search = useRouteSearch(validateRedirectSearch);
+  const target = sanitizeLogoutRedirectPath(search.redirect);
 
   useEffect(() => {
     logout.mutateAsync().finally(() => {
-      if (target !== undefined) {
-        // Same-origin runtime path; let history drive route resolution.
-        router.history.replace(target);
-      } else {
-        navigate({to: '/auth/login', replace: true});
-      }
+      // Same-origin runtime path; let history drive route resolution.
+      router.history.replace(target);
     });
-  }, [logout.mutateAsync, navigate, router, target]);
+  }, [logout.mutateAsync, router, target]);
 
   return (
     <AuthShell title="Logging out" description="Ending your Shipfox session.">

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

@@ -2,30 +2,29 @@ import {
   passwordResetConfirmBodySchema,
   passwordResetRequestBodySchema,
 } from '@shipfox/api-auth-dto';
+import {AuthShell, useRouteSearch} 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';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
-import {Link, useNavigate, useSearch} from '@tanstack/react-router';
+import {Link, useNavigate} 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 {validatePasswordResetSearch} from '../routes/inputs.js';
 import {
   passwordResetConfirmErrorToFormError,
   passwordResetRequestErrorToFormError,
 } from './form-errors.js';
 
 export function PasswordResetPage() {
-  const search = useSearch({strict: false});
-  const token = typeof search.token === 'string' ? search.token : undefined;
+  const {token} = useRouteSearch(validatePasswordResetSearch);
 
   if (token) {
     return <PasswordResetConfirm token={token} />;
@@ -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>();
@@ -162,8 +160,7 @@ function PasswordResetConfirm({token}: {token: string}) {
           token,
           new_password: value.new_password,
         });
-        await confirmPasswordReset.mutateAsync(body);
-        await refreshAuth();
+        await confirmPasswordReset.mutateAsync({token: body.token, newPassword: body.new_password});
         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} from '@shipfox/api-auth-dto';
+import {AuthShell, useRouteSearch} 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';
@@ -7,15 +8,15 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
-import {Link, useNavigate, useSearch} from '@tanstack/react-router';
+import {Link, useNavigate} 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 {validateRedirectSearch} from '../routes/inputs.js';
 import {signupErrorToFormError} from './form-errors.js';
 import {authErrorMessage} from './form-utils.js';
 import {
@@ -30,7 +31,7 @@ export function SignupPage() {
   const resendEmailVerification = useResendEmailVerificationAuth();
   const refreshAuth = useRefreshAuth();
   const navigate = useNavigate();
-  const search = useSearch({strict: false}) as {redirect?: unknown};
+  const search = useRouteSearch(validateRedirectSearch);
   const invitationToken = extractInvitationToken(search.redirect);
   const invitationPreview = useInvitationContext(invitationToken);
   const invitationPending = pendingInvitation(invitationPreview.data);
@@ -50,13 +51,18 @@ export function SignupPage() {
     onSubmit: async ({value}) => {
       setFormError(undefined);
       try {
-        const body = signupBodySchema.parse({
+        const parsed = signupBodySchema.parse({
           email: value.email,
           password: value.password,
           name: value.name,
           ...(invitationToken ? {invitation_token: invitationToken} : {}),
         });
-        const result = await signup.mutateAsync(body);
+        const result = await signup.mutateAsync({
+          email: parsed.email,
+          password: parsed.password,
+          name: parsed.name,
+          ...(parsed.invitation_token ? {invitationToken: parsed.invitation_token} : {}),
+        });
         skipDraftPersistRef.current = true;
         setAuthFormDraft(initialAuthFormDraft);
 
@@ -67,16 +73,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},
@@ -84,12 +90,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});
+        setEmailChallenge({email: result.user.email, id: result.emailChallenge.id});
         setResendError(undefined);
-        setNextResendAvailableAt(result.email_challenge.next_resend_available_at);
+        setNextResendAvailableAt(result.emailChallenge.nextResendAvailableAt);
       } catch (error) {
         const mapped = signupErrorToFormError(error);
         if (mapped.kind === 'field') {
@@ -132,9 +138,9 @@ export function SignupPage() {
     try {
       const result = await resendEmailVerification.mutateAsync({
         email: emailChallenge.email,
-        challenge_id: emailChallenge.id,
+        challengeId: emailChallenge.id,
       });
-      setNextResendAvailableAt(result.next_resend_available_at);
+      setNextResendAvailableAt(result.nextResendAvailableAt);
       toast.success('If another verification email can be sent, it will arrive shortly.');
     } catch (error) {
       setResendError(authErrorMessage(error));
@@ -154,7 +160,7 @@ export function SignupPage() {
           try {
             await verifyEmail.mutateAsync({
               email: emailChallenge.email,
-              challenge_id: emailChallenge.id,
+              challengeId: emailChallenge.id,
               code,
             });
             await refreshAuth();
@@ -181,7 +187,7 @@ export function SignupPage() {
   }
 
   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/pages/workspace-onboarding-page.tsx

@@ -43,8 +43,8 @@ export function WorkspaceOnboardingPage() {
     onSubmit: async ({value}) => {
       setFormError(undefined);
       try {
-        const body = createWorkspaceBodySchema.parse({name: value.name});
-        const created = await createWorkspace.mutateAsync(body);
+        const command = createWorkspaceBodySchema.parse({name: value.name});
+        const created = await createWorkspace.mutateAsync(command);
         toast.success('Workspace created.');
         // Pin the new workspace as the last-active one so a page refresh and
         // future visits to `/` land on it.

package/src/routes/inputs.test.ts

@@ -0,0 +1,17 @@
+import {validatePasswordResetSearch, validateRedirectSearch} from './inputs.js';
+
+describe('auth route inputs', () => {
+  it('keeps only a non-empty redirect', () => {
+    expect(validateRedirectSearch({redirect: '/workspaces/w-1'})).toEqual({
+      redirect: '/workspaces/w-1',
+    });
+    expect(validateRedirectSearch({redirect: ''})).toEqual({});
+    expect(validateRedirectSearch({redirect: ['unexpected']})).toEqual({});
+  });
+
+  it('keeps only a non-empty password reset token', () => {
+    expect(validatePasswordResetSearch({token: 'reset-token'})).toEqual({token: 'reset-token'});
+    expect(validatePasswordResetSearch({token: ''})).toEqual({});
+    expect(validatePasswordResetSearch({token: {value: 'unexpected'}})).toEqual({});
+  });
+});

package/src/routes/inputs.ts

@@ -0,0 +1,21 @@
+export interface AuthRedirectSearch {
+  redirect?: string;
+}
+
+export interface PasswordResetSearch {
+  token?: string;
+}
+
+export function validateRedirectSearch(input: Record<string, unknown>): AuthRedirectSearch {
+  const redirect = nonEmptyString(input.redirect);
+  return redirect ? {redirect} : {};
+}
+
+export function validatePasswordResetSearch(input: Record<string, unknown>): PasswordResetSearch {
+  const token = nonEmptyString(input.token);
+  return token ? {token} : {};
+}
+
+function nonEmptyString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}

package/src/routes/login.tsx

@@ -1,8 +1,10 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GuestGuard} from '#components/auth-guard.js';
 import {LoginPage} from '#pages/login-page.js';
+import {validateRedirectSearch} from './inputs.js';
 
 export default defineRoute({
+  validateSearch: validateRedirectSearch,
   component: () => (
     <GuestGuard>
       <LoginPage />

package/src/routes/logout.tsx

@@ -1,4 +1,5 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {LogoutPage} from '#pages/logout-page.js';
+import {validateRedirectSearch} from './inputs.js';
 
-export default defineRoute({component: LogoutPage});
+export default defineRoute({validateSearch: validateRedirectSearch, component: LogoutPage});

package/src/routes/reset.tsx

@@ -1,8 +1,10 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GuestGuard} from '#components/auth-guard.js';
 import {PasswordResetPage} from '#pages/password-reset-page.js';
+import {validatePasswordResetSearch} from './inputs.js';
 
 export default defineRoute({
+  validateSearch: validatePasswordResetSearch,
   component: () => (
     <GuestGuard>
       <PasswordResetPage />

package/src/routes/signup.tsx

@@ -1,8 +1,10 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GuestGuard} from '#components/auth-guard.js';
 import {SignupPage} from '#pages/signup-page.js';
+import {validateRedirectSearch} from './inputs.js';
 
 export default defineRoute({
+  validateSearch: validateRedirectSearch,
   component: () => (
     <GuestGuard>
       <SignupPage />