@shipfox/client-auth 6.0.3 → 8.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "6.0.3",
+  "version": "8.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -23,6 +23,10 @@
       "types": "./dist/continuation.d.ts",
       "default": "./dist/continuation.js"
     },
+    "./redirect-context": {
+      "types": "./dist/redirect-context.d.ts",
+      "default": "./dist/redirect-context.js"
+    },
     "./routes/*": {
       "types": "./dist/routes/*.d.ts",
       "default": "./dist/routes/*.js"
@@ -34,8 +38,8 @@
     "@shipfox/api-auth-dto": "9.0.2",
     "@shipfox/api-workspaces-dto": "9.0.2",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-invitations": "6.0.2",
-    "@shipfox/client-shell": "6.0.2",
+    "@shipfox/client-invitations": "8.0.0",
+    "@shipfox/client-shell": "8.0.0",
     "@shipfox/client-ui": "6.0.2",
     "@shipfox/react-ui": "0.3.7"
   },

package/src/components/password-login-form.test.tsx

@@ -0,0 +1,34 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {render, screen} from '@testing-library/react';
+import {jsonResponse} from '#test/utils.js';
+import {AuthProvider} from './auth-provider.js';
+import {PasswordLoginForm} from './password-login-form.js';
+
+describe('PasswordLoginForm', () => {
+  beforeEach(() => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl,
+      getAccessToken: undefined,
+      refreshAccessToken: undefined,
+    });
+  });
+
+  test('renders without a router context', async () => {
+    render(
+      <AuthProvider>
+        <PasswordLoginForm invitationEmail="invitee@example.com" />
+      </AuthProvider>,
+    );
+
+    expect(await screen.findByLabelText('Email')).toHaveValue('invitee@example.com');
+    expect(screen.getByLabelText('Email')).toHaveAttribute('readonly');
+    expect(screen.getByLabelText('Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Log in'})).toBeInTheDocument();
+  });
+});

package/src/components/password-login-form.tsx

@@ -0,0 +1,149 @@
+import {loginBodySchema} from '@shipfox/api-auth-dto';
+import {Button} 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 {useForm} from '@tanstack/react-form';
+import {useAtom} from 'jotai';
+import {type ReactNode, useEffect, useRef, useState} from 'react';
+import {useLoginAuth} from '#hooks/api/login-auth.js';
+import {loginErrorToFormError} from '#pages/form-errors.js';
+import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
+
+export interface PasswordLoginFormProps {
+  children?: ReactNode;
+  invitationEmail?: string | undefined;
+}
+
+export function PasswordLoginForm({children, invitationEmail}: PasswordLoginFormProps = {}) {
+  const login = useLoginAuth();
+  const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
+  const [formError, setFormError] = useState<string | undefined>();
+  const draftRef = useRef(authFormDraft);
+  draftRef.current = authFormDraft;
+  // 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 form = useForm({
+    defaultValues: {email: authFormDraft.email, password: authFormDraft.password},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        await login.mutateAsync(value);
+        skipDraftPersistRef.current = true;
+        setAuthFormDraft(initialAuthFormDraft);
+      } catch (error) {
+        const mapped = loginErrorToFormError(error);
+        if (mapped.kind === 'field') {
+          form.setFieldMeta(mapped.field, (prev) => ({
+            ...prev,
+            errorMap: {...prev.errorMap, onServer: mapped.message},
+          }));
+        } else {
+          setFormError(mapped.message);
+        }
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (invitationEmail && form.state.values.email !== invitationEmail) {
+      form.setFieldValue('email', invitationEmail);
+      setAuthFormDraft((current) => ({...current, email: invitationEmail}));
+    }
+  }, [form, invitationEmail, setAuthFormDraft]);
+
+  // Sync TanStack Form values back into the Jotai draft on unmount so a
+  // navigation to /signup or /reset preserves what the user typed. Skipped
+  // after a successful login because we just intentionally cleared the draft.
+  useEffect(() => {
+    return () => {
+      if (skipDraftPersistRef.current) return;
+      const {email, password} = form.state.values;
+      if (email !== draftRef.current.email || password !== draftRef.current.password) {
+        setAuthFormDraft({email, password});
+      }
+    };
+  }, [form, setAuthFormDraft]);
+
+  function persistDraft() {
+    const {email, password} = form.state.values;
+    setAuthFormDraft({email, password});
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-18"
+      noValidate
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void form.handleSubmit();
+      }}
+    >
+      {formError ? (
+        <Callout role="alert" type="error">
+          {formError}
+        </Callout>
+      ) : null}
+      <form.Field
+        name="email"
+        validators={{onBlur: loginBodySchema.shape.email, onSubmit: loginBodySchema.shape.email}}
+      >
+        {(field) => (
+          <FormField label="Email" id="email" error={fieldError(field)}>
+            <FormFieldInput
+              autoComplete="email"
+              name="email"
+              type="email"
+              value={field.state.value}
+              onChange={(event) => field.handleChange(event.target.value)}
+              onBlur={() => {
+                field.handleBlur();
+                persistDraft();
+              }}
+              readOnly={Boolean(invitationEmail)}
+              iconRight={
+                invitationEmail ? (
+                  <Icon
+                    aria-hidden="true"
+                    className="size-16 text-foreground-neutral-disabled"
+                    name="lockLine"
+                  />
+                ) : undefined
+              }
+            />
+          </FormField>
+        )}
+      </form.Field>
+      <form.Field
+        name="password"
+        validators={{
+          onBlur: loginBodySchema.shape.password,
+          onSubmit: loginBodySchema.shape.password,
+        }}
+      >
+        {(field) => (
+          <FormField label="Password" id="password" error={fieldError(field)}>
+            <FormFieldInput
+              autoComplete="current-password"
+              name="password"
+              type="password"
+              value={field.state.value}
+              onChange={(event) => field.handleChange(event.target.value)}
+              onBlur={() => {
+                field.handleBlur();
+                persistDraft();
+              }}
+            />
+          </FormField>
+        )}
+      </form.Field>
+      {children}
+      <Button className="w-full" isLoading={login.isPending} type="submit">
+        {login.isPending ? 'Logging in...' : 'Log in'}
+      </Button>
+    </form>
+  );
+}

package/src/continuation.test.ts

@@ -2,6 +2,7 @@ import {
   AuthActions,
   AuthShell,
   EmailCodeVerification,
+  PasswordLoginForm,
   parseRedirectContext,
 } from '@shipfox/client-auth/continuation';
 
@@ -10,6 +11,7 @@ describe('client-auth continuation exports', () => {
     expect(AuthActions).toBeTypeOf('function');
     expect(AuthShell).toBeTypeOf('function');
     expect(EmailCodeVerification).toBeTypeOf('function');
+    expect(PasswordLoginForm).toBeTypeOf('function');
     expect(parseRedirectContext).toBeTypeOf('function');
   });
 });

package/src/continuation.ts

@@ -3,4 +3,8 @@ export {
   EmailCodeVerification,
   type EmailCodeVerificationProps,
 } from './components/email-code-verification.js';
-export {parseRedirectContext, type RedirectContext} from './components/redirect-context.js';
+export {
+  PasswordLoginForm,
+  type PasswordLoginFormProps,
+} from './components/password-login-form.js';
+export {parseRedirectContext, type RedirectContext} from './redirect-context.js';

package/src/pages/invitation-context.ts

@@ -3,7 +3,7 @@ import {
   pendingInvitation,
   usePreviewInvitation,
 } from '@shipfox/client-invitations';
-import {parseRedirectContext} from '#/components/redirect-context.js';
+import {parseRedirectContext} from '#/redirect-context.js';
 
 export function extractInvitationToken(redirect: unknown): string | undefined {
   return parseRedirectContext(redirect).invitationToken;

package/src/pages/login-page.tsx

@@ -1,18 +1,9 @@
-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 {ButtonLink} from '@shipfox/react-ui/button';
 import {Text} from '@shipfox/react-ui/typography';
-import {useForm} from '@tanstack/react-form';
 import {Link} from '@tanstack/react-router';
-import {useAtom} from 'jotai';
-import {useEffect, useRef, useState} from 'react';
-import {useLoginAuth} from '#hooks/api/login-auth.js';
-import {authFormDraftAtom, initialAuthFormDraft} from '#state/auth.js';
+import {PasswordLoginForm} from '#components/password-login-form.js';
 import {validateRedirectSearch} from '../routes/inputs.js';
-import {loginErrorToFormError} from './form-errors.js';
 import {
   extractInvitationToken,
   pendingInvitation,
@@ -20,64 +11,10 @@ import {
 } from './invitation-context.js';
 
 export function LoginPage() {
-  const login = useLoginAuth();
   const search = useRouteSearch(validateRedirectSearch);
   const invitationToken = extractInvitationToken(search.redirect);
   const invitationPreview = useInvitationContext(invitationToken);
   const invitationPending = pendingInvitation(invitationPreview.data);
-  const [authFormDraft, setAuthFormDraft] = useAtom(authFormDraftAtom);
-  const [formError, setFormError] = useState<string | undefined>();
-  const draftRef = useRef(authFormDraft);
-  draftRef.current = authFormDraft;
-  // 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 form = useForm({
-    defaultValues: {email: authFormDraft.email, password: authFormDraft.password},
-    onSubmit: async ({value}) => {
-      setFormError(undefined);
-      try {
-        await login.mutateAsync(value);
-        skipDraftPersistRef.current = true;
-        setAuthFormDraft(initialAuthFormDraft);
-      } catch (error) {
-        const mapped = loginErrorToFormError(error);
-        if (mapped.kind === 'field') {
-          form.setFieldMeta(mapped.field, (prev) => ({
-            ...prev,
-            errorMap: {...prev.errorMap, onServer: mapped.message},
-          }));
-        } else {
-          setFormError(mapped.message);
-        }
-      }
-    },
-  });
-
-  // Lock the email field when arriving from an invitation link so the user
-  // can't log in as a different account than the one the invitation targets.
-  useEffect(() => {
-    if (invitationPending && form.state.values.email !== invitationPending.email) {
-      form.setFieldValue('email', invitationPending.email);
-      setAuthFormDraft((current) => ({...current, email: invitationPending.email}));
-    }
-  }, [invitationPending, form, setAuthFormDraft]);
-
-  // Sync TanStack Form values back into the Jotai draft on unmount so a
-  // navigation to /signup or /reset preserves what the user typed. Skipped
-  // after a successful login because we just intentionally cleared the draft.
-  useEffect(() => {
-    return () => {
-      if (skipDraftPersistRef.current) return;
-      const {email, password} = form.state.values;
-      if (email !== draftRef.current.email || password !== draftRef.current.password) {
-        setAuthFormDraft({email, password});
-      }
-    };
-  }, [form, setAuthFormDraft]);
-
-  const isInvitationEmailLocked = Boolean(invitationPending);
   const invitationRedirect = invitationToken
     ? `/invitations/accept?token=${encodeURIComponent(invitationToken)}`
     : undefined;
@@ -88,87 +25,13 @@ export function LoginPage() {
     ? 'Log in to accept your invitation.'
     : 'Log in to access Shipfox.';
 
-  function persistDraft() {
-    const {email, password} = form.state.values;
-    setAuthFormDraft({email, password});
-  }
-
   return (
     <AuthShell title={headerTitle} description={headerDescription}>
-      <form
-        className="flex flex-col gap-18"
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          void form.handleSubmit();
-        }}
-      >
-        {formError ? (
-          <Callout role="alert" type="error">
-            {formError}
-          </Callout>
-        ) : null}
-        <form.Field
-          name="email"
-          validators={{onBlur: loginBodySchema.shape.email, onSubmit: loginBodySchema.shape.email}}
-        >
-          {(field) => (
-            <FormField label="Email" id="email" error={fieldError(field)}>
-              <FormFieldInput
-                autoComplete="email"
-                name="email"
-                type="email"
-                value={field.state.value}
-                onChange={(event) => field.handleChange(event.target.value)}
-                onBlur={() => {
-                  field.handleBlur();
-                  persistDraft();
-                }}
-                readOnly={isInvitationEmailLocked}
-                iconRight={
-                  isInvitationEmailLocked ? (
-                    <Icon
-                      aria-hidden="true"
-                      className="size-16 text-foreground-neutral-disabled"
-                      name="lockLine"
-                    />
-                  ) : undefined
-                }
-              />
-            </FormField>
-          )}
-        </form.Field>
-        <form.Field
-          name="password"
-          validators={{
-            onBlur: loginBodySchema.shape.password,
-            onSubmit: loginBodySchema.shape.password,
-          }}
-        >
-          {(field) => (
-            <FormField label="Password" id="password" error={fieldError(field)}>
-              <FormFieldInput
-                autoComplete="current-password"
-                name="password"
-                type="password"
-                value={field.state.value}
-                onChange={(event) => field.handleChange(event.target.value)}
-                onBlur={() => {
-                  field.handleBlur();
-                  persistDraft();
-                }}
-              />
-            </FormField>
-          )}
-        </form.Field>
+      <PasswordLoginForm invitationEmail={invitationPending?.email}>
         <ButtonLink asChild variant="subtle" className="-mt-8 self-end">
           <Link to="/auth/reset">Forgot password?</Link>
         </ButtonLink>
-        <Button className="w-full" isLoading={login.isPending} type="submit">
-          {login.isPending ? 'Logging in...' : 'Log in'}
-        </Button>
-      </form>
+      </PasswordLoginForm>
       <Text size="sm" className="text-center text-foreground-neutral-subtle">
         New to Shipfox?{' '}
         <ButtonLink asChild variant="interactive" underline>

package/src/{components/redirect-context.test.ts → redirect-context.test.ts}

@@ -1,6 +1,12 @@
-import {parseRedirectContext} from './redirect-context.js';
+import {parseRedirectContext, type RedirectContext} from '@shipfox/client-auth/redirect-context';
+
+describe('@shipfox/client-auth/redirect-context', () => {
+  test('imports the parser and its type through the Node-safe public subpath', () => {
+    const context: RedirectContext = parseRedirectContext('/workspaces/acme');
+
+    expect(context).toEqual({returnTo: '/workspaces/acme'});
+  });
 
-describe('parseRedirectContext', () => {
   test('returns an ordinary safe return path', () => {
     const context = parseRedirectContext('/workspaces/acme?tab=runs');
 
@@ -25,6 +31,10 @@ describe('parseRedirectContext', () => {
   test.each([
     ['/%2569nvitations/accept?token=double-encoded-token', 'double-encoded-token'],
     ['/%252569nvitations/accept?token=triple-encoded-token', 'triple-encoded-token'],
+    [
+      '/safe%255c..%255cinvitations/accept?token=encoded-backslash-token',
+      'encoded-backslash-token',
+    ],
   ])('separates an invitation token from a deeply encoded path: %s', (redirect, token) => {
     const context = parseRedirectContext(redirect);
 
@@ -41,6 +51,7 @@ describe('parseRedirectContext', () => {
     '/%252561uth/login',
     '/%E0%80%80',
     '/safe/%25252e%25252e/auth/login',
+    '/safe%255c..%255cauth/login',
   ])('rejects malformed or unsafe redirect %s', (redirect) => {
     const context = parseRedirectContext(redirect);
 

package/src/{components/redirect-context.ts → redirect-context.ts}

@@ -1,4 +1,4 @@
-import {isAuthPath, resolveRedirectPath} from './redirect-target.js';
+import {isAuthPath, resolveRedirectPath} from './components/redirect-target.js';
 
 const INVITATION_ACCEPT_PATH = '/invitations/accept';