feat(mosaic): wire up user profile emails and phone numbers

.changeset/mosaic-user-profile-email-link-sso.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/__tests__/feature/fake-fapi.ts

@@ -2,10 +2,12 @@ import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
 import type {
   ApiKeyJSON,
   ClientJSON,
+  EmailAddressJSON,
   EnterpriseConnectionJSON,
   OAuthProvider,
   OrganizationMembershipJSON,
   OrganizationSuggestionJSON,
+  PhoneNumberJSON,
   SessionJSON,
   UserJSON,
   UserOrganizationInvitationJSON,
@@ -23,12 +25,14 @@ import {
 import {
   fapiApiKey,
   fapiClient,
+  fapiEmailAddress,
   type FapiEnvironment,
   fapiEnvironment,
   fapiExternalAccount,
   fapiMembership,
   fapiOrganization,
   fapiPage,
+  fapiPhoneNumber,
   fapiToken,
   fapiVerification,
 } from './fapi';
@@ -99,18 +103,86 @@ function error(code: string, status = 400) {
 }
 
 function activeUser(state: FakeFapiState): UserJSON | undefined {
-  return findSession(state, state.client.last_active_session_id)?.user;
+  return activeSession(state)?.user;
 }
 
-function updateUser(state: FakeFapiState, user: UserJSON): void {
+function missing() {
+  return HttpResponse.json({ errors: [{ code: 'resource_not_found', message: 'not found' }] }, { status: 404 });
+}
+
+function rejected(code: string, message: string) {
+  return HttpResponse.json({ errors: [{ code, message, long_message: message }] }, { status: 400 });
+}
+
+export const VERIFICATION_CODE = '424242';
+export const PROFILE_IMAGE_URL = 'https://img.clerk.com/uploaded.png';
+
+const USER_FIELDS = [
+  'first_name',
+  'last_name',
+  'username',
+  'primary_email_address_id',
+  'primary_phone_number_id',
+] as const satisfies readonly (keyof UserJSON)[];
+
+function patchUser(user: UserJSON, body: URLSearchParams): UserJSON {
+  const patch: Partial<Pick<UserJSON, (typeof USER_FIELDS)[number]>> = {};
+  for (const field of USER_FIELDS) {
+    if (body.has(field)) {
+      patch[field] = body.get(field) || null;
+    }
+  }
+  return { ...user, ...patch };
+}
+
+function activeSession(state: FakeFapiState): SessionJSON | undefined {
+  return state.client.sessions.find(session => session.id === state.client.last_active_session_id);
+}
+
+function updateUser(state: FakeFapiState, next: (user: UserJSON) => UserJSON): UserJSON | undefined {
+  const session = activeSession(state);
+  if (!session) {
+    return undefined;
+  }
+  const user = next(session.user);
   state.client = {
     ...state.client,
-    sessions: state.client.sessions.map(session => (session.user.id === user.id ? { ...session, user } : session)),
+    sessions: state.client.sessions.map(s => (s.id === session.id ? { ...s, user } : s)),
   };
+  return user;
 }
 
-function missing() {
-  return HttpResponse.json({ errors: [{ code: 'resource_not_found', message: 'not found' }] }, { status: 404 });
+function findPhone(state: FakeFapiState, id: unknown): PhoneNumberJSON | undefined {
+  return activeSession(state)?.user.phone_numbers.find(phone => phone.id === id);
+}
+
+function replacePhone(state: FakeFapiState, phone: PhoneNumberJSON) {
+  updateUser(state, user => ({
+    ...user,
+    phone_numbers: user.phone_numbers.map(p => (p.id === phone.id ? phone : p)),
+  }));
+}
+
+function findEmail(state: FakeFapiState, id: unknown): EmailAddressJSON | undefined {
+  return activeSession(state)?.user.email_addresses.find(email => email.id === id);
+}
+
+function replaceEmail(state: FakeFapiState, email: EmailAddressJSON) {
+  updateUser(state, user => ({
+    ...user,
+    email_addresses: user.email_addresses.map(e => (e.id === email.id ? email : e)),
+  }));
+}
+
+export function verifyEmailOutOfBand(state: FakeFapiState, id: string) {
+  const email = findEmail(state, id);
+  if (!email) {
+    throw new Error(`No email address ${id} to verify`);
+  }
+  replaceEmail(state, {
+    ...email,
+    verification: { ...(email.verification ?? fapiVerification('email_code')), status: 'verified' },
+  });
 }
 
 export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
@@ -134,6 +206,7 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
       ...enterpriseLinking,
     },
   };
+  let identifications = 0;
 
   worker.use(
     ...verificationHandlers(state, fapiUrl),
@@ -167,15 +240,15 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
           external_verification_redirect_url: 'https://accounts.example/authorize',
         }),
       });
-      updateUser(state, {
-        ...user,
+      updateUser(state, current => ({
+        ...current,
         external_accounts: [
-          ...user.external_accounts.filter(
+          ...current.external_accounts.filter(
             item => item.provider !== provider || item.verification?.status === 'verified',
           ),
           account,
         ],
-      });
+      }));
       return envelope(account, state.client);
     }),
     http.post(fapiUrl('/v1/me/external_accounts/:id/reauthorize'), ({ params, request }) => {
@@ -194,10 +267,10 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
           external_verification_redirect_url: 'https://accounts.example/consent',
         }),
       };
-      updateUser(state, {
-        ...user,
-        external_accounts: user.external_accounts.map(item => (item.id === pending.id ? pending : item)),
-      });
+      updateUser(state, current => ({
+        ...current,
+        external_accounts: current.external_accounts.map(item => (item.id === pending.id ? pending : item)),
+      }));
       return envelope(pending, state.client);
     }),
     http.post(fapiUrl('/v1/me/external_accounts/:id'), ({ params, request }) => {
@@ -209,7 +282,10 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
       if (!user || !account) {
         return missing();
       }
-      updateUser(state, { ...user, external_accounts: user.external_accounts.filter(item => item.id !== account.id) });
+      updateUser(state, current => ({
+        ...current,
+        external_accounts: current.external_accounts.filter(item => item.id !== account.id),
+      }));
       return envelope({ ...account, object: 'external_account' }, state.client);
     }),
     http.post(fapiUrl('/v1/client/sessions/:id/tokens'), ({ params }) => {
@@ -268,6 +344,132 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
       state.client = { ...state.client, sessions: [], last_active_session_id: null };
       return envelope(state.client, state.client);
     }),
+    http.post(fapiUrl('/v1/me'), async ({ request }) => {
+      if (new URL(request.url).searchParams.get('_method') !== 'PATCH') {
+        return undefined;
+      }
+      const body = new URLSearchParams(await request.text());
+      const user = updateUser(state, user => patchUser(user, body));
+      return user ? envelope(user, state.client) : missing();
+    }),
+    http.post(fapiUrl('/v1/me/profile_image'), async ({ request }) => {
+      if (new URL(request.url).searchParams.get('_method') === 'DELETE') {
+        const user = updateUser(state, user => ({ ...user, image_url: '', has_image: false }));
+        return user ? envelope({ id: 'img_1', name: null, public_url: null }, state.client) : missing();
+      }
+      const file = (await request.formData()).get('file');
+      if (!(file instanceof File)) {
+        return rejected('form_param_missing', 'file is required');
+      }
+      const user = updateUser(state, user => ({ ...user, image_url: PROFILE_IMAGE_URL, has_image: true }));
+      return user ? envelope({ id: 'img_1', name: file.name, public_url: PROFILE_IMAGE_URL }, state.client) : missing();
+    }),
+    http.post(fapiUrl('/v1/me/email_addresses'), async ({ request }) => {
+      const body = new URLSearchParams(await request.text());
+      const email = fapiEmailAddress({
+        id: `idn_${++identifications}`,
+        email_address: body.get('email_address') ?? '',
+      });
+      const user = updateUser(state, user => ({ ...user, email_addresses: [...user.email_addresses, email] }));
+      return user ? envelope(email, state.client) : missing();
+    }),
+    http.get(fapiUrl('/v1/me/email_addresses/:id'), ({ params }) => {
+      const email = findEmail(state, params.id);
+      return email ? envelope(email, state.client) : missing();
+    }),
+    http.post(fapiUrl('/v1/me/email_addresses/:id/prepare_verification'), async ({ params, request }) => {
+      const email = findEmail(state, params.id);
+      if (!email) {
+        return missing();
+      }
+      const strategy = new URLSearchParams(await request.text()).get('strategy');
+      if (strategy !== 'email_code' && strategy !== 'email_link' && strategy !== 'enterprise_sso') {
+        return rejected('strategy_invalid', `Unsupported strategy ${strategy}`);
+      }
+      const domain = email.email_address.split('@')[1] ?? 'acme.co';
+      const prepared: EmailAddressJSON = {
+        ...email,
+        verification: fapiVerification(strategy, {
+          external_verification_redirect_url: strategy === 'enterprise_sso' ? `https://idp.${domain}/sso` : undefined,
+        }),
+      };
+      replaceEmail(state, prepared);
+      return envelope(prepared, state.client);
+    }),
+    http.post(fapiUrl('/v1/me/email_addresses/:id/attempt_verification'), async ({ params, request }) => {
+      const email = findEmail(state, params.id);
+      if (!email) {
+        return missing();
+      }
+      const body = new URLSearchParams(await request.text());
+      if (body.get('code') !== VERIFICATION_CODE) {
+        return rejected('form_code_incorrect', 'Incorrect code');
+      }
+      const verified: EmailAddressJSON = {
+        ...email,
+        verification: fapiVerification('email_code', { status: 'verified' }),
+      };
+      replaceEmail(state, verified);
+      return envelope(verified, state.client);
+    }),
+    http.post(fapiUrl('/v1/me/email_addresses/:id'), ({ params, request }) => {
+      if (new URL(request.url).searchParams.get('_method') !== 'DELETE') {
+        return undefined;
+      }
+      const email = findEmail(state, params.id);
+      if (!email) {
+        return missing();
+      }
+      updateUser(state, user => ({
+        ...user,
+        email_addresses: user.email_addresses.filter(e => e.id !== email.id),
+        primary_email_address_id: user.primary_email_address_id === email.id ? null : user.primary_email_address_id,
+      }));
+      return envelope({ object: 'email_address', id: email.id, deleted: true }, state.client);
+    }),
+    http.post(fapiUrl('/v1/me/phone_numbers'), async ({ request }) => {
+      const body = new URLSearchParams(await request.text());
+      const phone = fapiPhoneNumber({ id: `idn_${++identifications}`, phone_number: body.get('phone_number') ?? '' });
+      const user = updateUser(state, user => ({ ...user, phone_numbers: [...user.phone_numbers, phone] }));
+      return user ? envelope(phone, state.client) : missing();
+    }),
+    http.post(fapiUrl('/v1/me/phone_numbers/:id/prepare_verification'), ({ params }) => {
+      const phone = findPhone(state, params.id);
+      if (!phone) {
+        return missing();
+      }
+      const prepared = { ...phone, verification: fapiVerification('phone_code') };
+      replacePhone(state, prepared);
+      return envelope(prepared, state.client);
+    }),
+    http.post(fapiUrl('/v1/me/phone_numbers/:id/attempt_verification'), async ({ params, request }) => {
+      const phone = findPhone(state, params.id);
+      if (!phone) {
+        return missing();
+      }
+      const body = new URLSearchParams(await request.text());
+      if (body.get('code') !== VERIFICATION_CODE) {
+        return rejected('form_code_incorrect', 'Incorrect code');
+      }
+      const verified = { ...phone, verification: fapiVerification('phone_code', { status: 'verified' }) };
+      replacePhone(state, verified);
+      return envelope(verified, state.client);
+    }),
+    http.post(fapiUrl('/v1/me/phone_numbers/:id'), ({ params, request }) => {
+      if (new URL(request.url).searchParams.get('_method') !== 'DELETE') {
+        return undefined;
+      }
+      const phone = findPhone(state, params.id);
+      if (!phone) {
+        return missing();
+      }
+      updateUser(state, user => ({
+        ...user,
+        phone_numbers: user.phone_numbers.filter(p => p.id !== phone.id),
+        primary_phone_number_id: user.primary_phone_number_id === phone.id ? null : user.primary_phone_number_id,
+      }));
+      return envelope({ object: 'phone_number', id: phone.id, deleted: true }, state.client);
+    }),
     http.get(fapiUrl('/v1/me/organization_memberships'), ({ request }) =>
       envelope(page(state.memberships, new URL(request.url)), null),
     ),