@shipfox/client-auth 12.0.2 → 14.0.0

package/src/pages/signup-page.tsx

@@ -1,5 +1,10 @@
 import {signupBodySchema} from '@shipfox/api-auth-dto';
-import {AuthShell, useRouteSearch} from '@shipfox/client-shell/runtime';
+import {
+  AuthShell,
+  rememberLastWorkspaceId,
+  useRouteSearch,
+  userWorkspacesQueryKey,
+} 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';
@@ -8,6 +13,7 @@ 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 {useQueryClient} from '@tanstack/react-query';
 import {Link, useNavigate} from '@tanstack/react-router';
 import {useAtom} from 'jotai';
 import {useEffect, useRef, useState} from 'react';
@@ -30,6 +36,7 @@ export function SignupPage() {
   const verifyEmail = useVerifyEmailAuth();
   const resendEmailVerification = useResendEmailVerificationAuth();
   const refreshAuth = useRefreshAuth();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const search = useRouteSearch(validateRedirectSearch);
   const invitationToken = extractInvitationToken(search.redirect);
@@ -40,12 +47,36 @@ export function SignupPage() {
   const [nextResendAvailableAt, setNextResendAvailableAt] = useState<string | undefined>();
   const [formError, setFormError] = useState<string | undefined>();
   const [resendError, setResendError] = useState<string | undefined>();
+  const [invitationRefreshFailure, setInvitationRefreshFailure] = useState<{
+    workspaceId: string;
+    workspaceName: string;
+    userId?: string | undefined;
+  }>();
+  const [isRetryingInvitationRefresh, setIsRetryingInvitationRefresh] = useState(false);
   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);
 
+  async function refreshInvitationWorkspace(workspaceId: string) {
+    for (let attempt = 0; attempt < 2; attempt += 1) {
+      try {
+        await refreshAuth();
+        const workspaces = queryClient.getQueryData<{
+          memberships: Array<{id: string}>;
+        }>(userWorkspacesQueryKey);
+        const memberships = workspaces?.memberships ?? [];
+        if (memberships.some(({id}) => id === workspaceId)) return true;
+      } catch {
+        // A mount-time refresh can race the post-signup refresh. Retry once so
+        // an in-flight request that predates membership creation does not turn
+        // a successful invitation into a manual recovery flow.
+      }
+    }
+    return false;
+  }
+
   const form = useForm({
     defaultValues: {email: authFormDraft.email, password: authFormDraft.password, name: ''},
     onSubmit: async ({value}) => {
@@ -67,17 +98,20 @@ export function SignupPage() {
         setAuthFormDraft(initialAuthFormDraft);
 
         if (invitationToken && result.membership && invitationPending) {
-          try {
-            await refreshAuth();
-          } catch {
-            // Refresh failures don't block the success message — the next API
-            // call's 401 handling will re-route the user.
+          const joinedWorkspace = await refreshInvitationWorkspace(result.membership.workspaceId);
+          if (!joinedWorkspace) {
+            setInvitationRefreshFailure({
+              workspaceId: result.membership.workspaceId,
+              workspaceName: invitationPending.workspaceName,
+              userId: result.user?.id,
+            });
+            return;
           }
           toast.success(`You joined ${invitationPending.workspaceName}.`);
-          await navigate({
-            to: '/workspaces/$wid',
-            params: {wid: result.membership.workspaceId},
-          });
+          if (result.user?.id) {
+            rememberLastWorkspaceId(result.user.id, result.membership.workspaceId);
+          }
+          await navigate({to: '/'});
           return;
         }
 
@@ -110,6 +144,23 @@ export function SignupPage() {
     },
   });
 
+  async function retryInvitationAuthRefresh() {
+    if (!invitationRefreshFailure || isRetryingInvitationRefresh) return;
+    setIsRetryingInvitationRefresh(true);
+    const joinedWorkspace = await refreshInvitationWorkspace(invitationRefreshFailure.workspaceId);
+    setIsRetryingInvitationRefresh(false);
+    if (!joinedWorkspace) return;
+    if (invitationRefreshFailure.userId) {
+      rememberLastWorkspaceId(
+        invitationRefreshFailure.userId,
+        invitationRefreshFailure.workspaceId,
+      );
+    }
+    toast.success(`You joined ${invitationRefreshFailure.workspaceName}.`);
+    setInvitationRefreshFailure(undefined);
+    await navigate({to: '/'});
+  }
+
   // When arriving from an invitation link, prefill the email and lock it.
   useEffect(() => {
     if (invitationPending && form.state.values.email !== invitationPending.email) {
@@ -118,8 +169,9 @@ export function SignupPage() {
     }
   }, [invitationPending, form, setAuthFormDraft]);
 
-  // Sync form values back to the Jotai draft on unmount (only email + password
-  // — name is intentionally not persisted across navigation). Skipped after a
+  // Sync form values back to the Jotai draft on unmount. The draft stores only
+  // email and password; name is intentionally not persisted across navigation.
+  // Skipped after a
   // successful signup because we just intentionally cleared the draft.
   useEffect(() => {
     return () => {
@@ -147,6 +199,34 @@ export function SignupPage() {
     }
   }
 
+  if (invitationRefreshFailure) {
+    return (
+      <AuthShell
+        title={`Join ${invitationRefreshFailure.workspaceName}`}
+        description="Your account was created, but we could not finish signing you in."
+      >
+        <Callout role="alert" type="error">
+          <div className="flex flex-col gap-8">
+            <Text size="sm">
+              Try again to finish joining your workspace. You can safely retry this step.
+            </Text>
+            <Button
+              type="button"
+              variant="secondary"
+              className="w-fit"
+              isLoading={isRetryingInvitationRefresh}
+              onClick={() => {
+                void retryInvitationAuthRefresh();
+              }}
+            >
+              Retry sign-in
+            </Button>
+          </div>
+        </Callout>
+      </AuthShell>
+    );
+  }
+
   if (emailChallenge) {
     return (
       <EmailCodeVerification

package/src/pages/workspace-onboarding-page.test.tsx

@@ -37,6 +37,7 @@ describe('WorkspaceOnboardingPage', () => {
                   user_id: user.id,
                   workspace_id: '33333333-3333-4333-8333-333333333333',
                   workspace_name: 'Acme',
+                  workspace_slug: 'acme',
                   created_at: '2026-04-27T00:00:00.000Z',
                   updated_at: '2026-04-27T00:00:00.000Z',
                 },
@@ -51,6 +52,7 @@ describe('WorkspaceOnboardingPage', () => {
           {
             id: '33333333-3333-4333-8333-333333333333',
             name: 'Acme',
+            slug: 'acme',
             status: 'active',
             settings: {},
             created_at: '2026-04-27T00:00:00.000Z',
@@ -78,7 +80,127 @@ describe('WorkspaceOnboardingPage', () => {
     fireEvent.click(screen.getByRole('button', {name: 'Create workspace'}));
 
     await waitFor(() => expect(didCreateWorkspace).toBe(true));
-    expect(createWorkspaceBody).toEqual({name: 'Acme'});
+    expect(createWorkspaceBody).toEqual({name: 'Acme', slug: 'acme'});
+  });
+
+  test('prefills the slug from the name until the slug is edited', async () => {
+    const user = pageUserFactory.build({email: 'workspace-slug@example.com'});
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      if (url.endsWith('/auth/refresh')) {
+        return Promise.resolve(jsonResponse({token: 'access-token', user}));
+      }
+      if (url.endsWith('/workspaces')) {
+        return Promise.resolve(jsonResponse({memberships: []}));
+      }
+      return Promise.resolve(
+        jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(
+      '/',
+      <AuthGuard>
+        <WorkspaceGuard>
+          <h1>Authenticated home</h1>
+        </WorkspaceGuard>
+      </AuthGuard>,
+    );
+    const name = await screen.findByLabelText('Workspace name');
+    const slug = screen.getByLabelText('Workspace slug');
+    expect(screen.getByText(`${window.location.origin}/w/acme`)).toBeInTheDocument();
+    fireEvent.change(name, {target: {value: 'Acme Labs'}});
+    expect(slug).toHaveValue('acme-labs');
+    expect(screen.getByText(`${window.location.origin}/w/acme-labs`)).toBeInTheDocument();
+
+    fireEvent.change(slug, {target: {value: 'custom-workspace'}});
+    fireEvent.change(name, {target: {value: 'Renamed Labs'}});
+    expect(slug).toHaveValue('custom-workspace');
+    expect(screen.getByText(`${window.location.origin}/w/custom-workspace`)).toBeInTheDocument();
+  });
+
+  test('checks a manually edited workspace slug for availability', async () => {
+    const user = pageUserFactory.build({email: 'workspace-availability@example.com'});
+    const availabilityRequests: string[] = [];
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      const url = request.url;
+      if (url.includes('/auth/refresh')) {
+        return Promise.resolve(jsonResponse({token: 'access-token', user}));
+      }
+      if (url.includes('/workspaces/slug-availability')) {
+        availabilityRequests.push(url);
+        return Promise.resolve(jsonResponse({available: true}));
+      }
+      if (url.endsWith('/workspaces')) {
+        return Promise.resolve(jsonResponse({memberships: []}));
+      }
+      return Promise.resolve(
+        jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(
+      '/',
+      <AuthGuard>
+        <WorkspaceGuard>
+          <h1>Authenticated home</h1>
+        </WorkspaceGuard>
+      </AuthGuard>,
+    );
+    fireEvent.change(await screen.findByLabelText('Workspace slug'), {
+      target: {value: 'custom-workspace'},
+    });
+
+    await waitFor(() => expect(availabilityRequests).toHaveLength(1));
+    expect(new URL(availabilityRequests[0] ?? '').searchParams.get('slug')).toBe(
+      'custom-workspace',
+    );
+    expect(await screen.findByText('Slug is available.')).toBeInTheDocument();
+  });
+
+  test('shows a duplicate slug error on the slug field', async () => {
+    const user = pageUserFactory.build({email: 'workspace-conflict@example.com'});
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = requestUrl(input);
+      const method = input instanceof Request ? input.method : 'GET';
+      if (url.endsWith('/auth/refresh')) {
+        return Promise.resolve(jsonResponse({token: 'access-token', user}));
+      }
+      if (url.endsWith('/workspaces') && method === 'GET') {
+        return Promise.resolve(jsonResponse({memberships: []}));
+      }
+      if (url.endsWith('/workspaces') && method === 'POST') {
+        return Promise.resolve(
+          jsonResponse(
+            {code: 'slug-conflict', message: 'Workspace slug is already taken'},
+            {status: 409},
+          ),
+        );
+      }
+      return Promise.resolve(
+        jsonResponse({code: 'not-found', message: 'Not found'}, {status: 404}),
+      );
+    });
+    configureApiClient({fetchImpl});
+
+    renderAuthPage(
+      '/',
+      <AuthGuard>
+        <WorkspaceGuard>
+          <h1>Authenticated home</h1>
+        </WorkspaceGuard>
+      </AuthGuard>,
+    );
+    fireEvent.change(await screen.findByLabelText('Workspace name'), {
+      target: {value: 'Acme'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Create workspace'}));
+
+    expect(await screen.findByText('That workspace slug is already taken.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Workspace slug')).toBeInvalid();
   });
 
   test('requires the workspace name locally', async () => {

package/src/pages/workspace-onboarding-page.tsx

@@ -1,5 +1,6 @@
+import {slugifyName, slugSchema} from '@shipfox/api-common-dto';
 import {createWorkspaceBodySchema} from '@shipfox/api-workspaces-dto';
-import {displayNameFieldError} from '@shipfox/client-ui';
+import {displayNameFieldError, SlugField} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@shipfox/react-ui/card';
@@ -11,7 +12,7 @@ import {useForm} from '@tanstack/react-form';
 import {useNavigate} from '@tanstack/react-router';
 import {useSetAtom} from 'jotai';
 import {useState} from 'react';
-import {useCreateWorkspaceAuth} from '#hooks/api/workspace-auth.js';
+import {checkWorkspaceSlugAvailability, useCreateWorkspaceAuth} from '#hooks/api/workspace-auth.js';
 import {useAuthState} from '#hooks/use-auth-state.js';
 import {lastWorkspaceIdAtom, rememberLastWorkspaceId} from '#state/last-workspace.js';
 import {workspaceOnboardingErrorToFormError} from './form-errors.js';
@@ -33,19 +34,24 @@ const previewBars = [
   {id: 'runs-late-high', height: 74},
 ];
 
+function isSlugValid(value: string): boolean {
+  return slugSchema.safeParse(value).success;
+}
+
 export function WorkspaceOnboardingPage() {
   const createWorkspace = useCreateWorkspaceAuth();
   const {user} = useAuthState();
   const navigate = useNavigate();
   const setLastWorkspaceId = useSetAtom(lastWorkspaceIdAtom);
   const [formError, setFormError] = useState<string | undefined>();
+  const [slugTouched, setSlugTouched] = useState(false);
 
   const form = useForm({
-    defaultValues: {name: ''},
+    defaultValues: {name: '', slug: ''},
     onSubmit: async ({value}) => {
       setFormError(undefined);
       try {
-        const command = createWorkspaceBodySchema.parse({name: value.name});
+        const command = createWorkspaceBodySchema.parse({name: value.name, slug: value.slug});
         const created = await createWorkspace.mutateAsync(command);
         toast.success('Workspace created.');
         // Pin the new workspace as the last-active one so a page refresh and
@@ -56,10 +62,17 @@ export function WorkspaceOnboardingPage() {
         } catch {
           // localStorage may throw in private browsing or quota-exceeded.
         }
-        await navigate({to: '/workspaces/$wid', params: {wid: created.id}});
+        await navigate({to: '/w/$workspaceSlug', params: {workspaceSlug: created.slug}});
       } catch (error) {
         const mapped = workspaceOnboardingErrorToFormError(error);
-        setFormError(mapped.message);
+        if (mapped.kind === 'field') {
+          form.setFieldMeta(mapped.field, (previous) => ({
+            ...previous,
+            errorMap: {...previous.errorMap, onServer: mapped.message},
+          }));
+        } else {
+          setFormError(mapped.message);
+        }
       }
     },
   });
@@ -129,12 +142,52 @@ export function WorkspaceOnboardingPage() {
                         placeholder="Acme"
                         type="text"
                         value={field.state.value}
-                        onChange={(event) => field.handleChange(event.target.value)}
+                        onChange={(event) => {
+                          const name = event.target.value;
+                          field.handleChange(name);
+                          if (!slugTouched) {
+                            form.setFieldValue(
+                              'slug',
+                              name ? slugifyName(name, {fallback: 'workspace'}) : '',
+                            );
+                          }
+                        }}
                         onBlur={field.handleBlur}
                       />
                     </FormField>
                   )}
                 </form.Field>
+                <form.Field
+                  name="slug"
+                  validators={{
+                    onBlur: createWorkspaceBodySchema.shape.slug,
+                    onSubmit: createWorkspaceBodySchema.shape.slug,
+                  }}
+                >
+                  {(field) => (
+                    <SlugField
+                      id="workspace-slug"
+                      label="Workspace slug"
+                      name="slug"
+                      value={field.state.value}
+                      onChange={(value) => {
+                        setSlugTouched(true);
+                        field.handleChange(value);
+                      }}
+                      onBlur={field.handleBlur}
+                      error={fieldError(field)}
+                      description={
+                        <span className="break-all font-code">
+                          {`${window.location.origin}/w/${field.state.value || 'acme'}`}
+                        </span>
+                      }
+                      placeholder="acme"
+                      checkEnabled={slugTouched}
+                      isValid={isSlugValid}
+                      checkAvailability={checkWorkspaceSlugAvailability}
+                    />
+                  )}
+                </form.Field>
               </CardContent>
 
               <Button

package/src/redirect-context.test.ts

@@ -2,15 +2,15 @@ import {parseRedirectContext, type RedirectContext} from '@shipfox/client-auth/r
 
 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');
+    const context: RedirectContext = parseRedirectContext('/w/acme');
 
-    expect(context).toEqual({returnTo: '/workspaces/acme'});
+    expect(context).toEqual({returnTo: '/w/acme'});
   });
 
   test('returns an ordinary safe return path', () => {
-    const context = parseRedirectContext('/workspaces/acme?tab=runs');
+    const context = parseRedirectContext('/w/acme?tab=runs');
 
-    expect(context).toEqual({returnTo: '/workspaces/acme?tab=runs'});
+    expect(context).toEqual({returnTo: '/w/acme?tab=runs'});
   });
 
   test('separates an invitation token from generic redirect state', () => {
@@ -21,9 +21,7 @@ describe('@shipfox/client-auth/redirect-context', () => {
   });
 
   test('separates an invitation token after path normalization', () => {
-    const context = parseRedirectContext(
-      '/workspaces/../invitations/accept?token=raw-invitation-token',
-    );
+    const context = parseRedirectContext('/w/../invitations/accept?token=raw-invitation-token');
 
     expect(context).toEqual({invitationToken: 'raw-invitation-token'});
   });

package/src/routes/index.tsx

@@ -14,7 +14,10 @@ export default defineRoute({
     const target = principalId
       ? [first, ...rest].find((workspace) => workspace.id === getLastWorkspaceId(principalId))
       : undefined;
-    throw redirect({to: '/workspaces/$wid', params: {wid: (target ?? first).id}});
+    throw redirect({
+      to: '/w/$workspaceSlug',
+      params: {workspaceSlug: (target ?? first).slug},
+    });
   },
   component: FullPageLoader,
 });

package/src/routes/inputs.test.ts

@@ -2,8 +2,8 @@ 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: '/w/acme'})).toEqual({
+      redirect: '/w/acme',
     });
     expect(validateRedirectSearch({redirect: ''})).toEqual({});
     expect(validateRedirectSearch({redirect: ['unexpected']})).toEqual({});

package/test/pages.tsx

@@ -25,7 +25,7 @@ function createTestRouter(path: string, element: ReactElement) {
   });
   const workspaceRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: 'workspaces/$wid',
+    path: 'w/$workspaceSlug',
     component: () => <h1>Authenticated home</h1>,
   });
   const loginRoute = createRoute({