feat(mosaic): Connected accounts wire up

.changeset/mosaic-connected-accounts-wire-up.md

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

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

@@ -1,9 +1,12 @@
+import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
 import type {
   ApiKeyJSON,
   ClientJSON,
+  OAuthProvider,
   OrganizationMembershipJSON,
   OrganizationSuggestionJSON,
   SessionJSON,
+  UserJSON,
   UserOrganizationInvitationJSON,
 } from '@clerk/shared/types';
 import { http, HttpResponse, type JsonBodyType } from 'msw';
@@ -20,10 +23,12 @@ import {
   fapiClient,
   type FapiEnvironment,
   fapiEnvironment,
+  fapiExternalAccount,
   fapiMembership,
   fapiOrganization,
   fapiPage,
   fapiToken,
+  fapiVerification,
 } from './fapi';
 
 export const PUBLISHABLE_KEY = 'pk_live_Y2xlcmsuYWJjZWYuMTIzNDUucHJvZC5sY2xjbGVyay5jb20k';
@@ -88,6 +93,17 @@ function error(code: string, status = 400) {
   return HttpResponse.json({ errors: [{ code, message: code, long_message: code }] }, { status });
 }
 
+function activeUser(state: FakeFapiState): UserJSON | undefined {
+  return findSession(state, state.client.last_active_session_id)?.user;
+}
+
+function updateUser(state: FakeFapiState, user: UserJSON): void {
+  state.client = {
+    ...state.client,
+    sessions: state.client.sessions.map(session => (session.user.id === user.id ? { ...session, user } : session)),
+  };
+}
+
 function missing() {
   return HttpResponse.json({ errors: [{ code: 'resource_not_found', message: 'not found' }] }, { status: 404 });
 }
@@ -110,6 +126,78 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
     ...verificationHandlers(state, fapiUrl),
     http.get(fapiUrl('/v1/environment'), () => HttpResponse.json(state.environment)),
     http.get(fapiUrl('/v1/client'), () => envelope(state.client, null)),
+    http.get(fapiUrl('/v1/me'), () => {
+      const user = activeUser(state);
+      return user ? envelope(user, state.client) : missing();
+    }),
+    http.post(fapiUrl('/v1/me/external_accounts'), async ({ request }) => {
+      const user = activeUser(state);
+      if (!user) {
+        return missing();
+      }
+      const body = new URLSearchParams(await request.text());
+      const strategy = body.get('strategy');
+      if (!strategy) {
+        return missing();
+      }
+      const provider: OAuthProvider | undefined = OAUTH_PROVIDERS.find(item => item.strategy === strategy)?.provider;
+      if (!provider) {
+        return missing();
+      }
+      const account = fapiExternalAccount({
+        id: `idn_${crypto.randomUUID()}`,
+        approved_scopes: '',
+        provider,
+        verification: fapiVerification(strategy, {
+          status: 'unverified',
+          external_verification_redirect_url: 'https://accounts.example/authorize',
+        }),
+      });
+      updateUser(state, {
+        ...user,
+        external_accounts: [
+          ...user.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 }) => {
+      if (new URL(request.url).searchParams.get('_method') !== 'PATCH') {
+        return undefined;
+      }
+      const user = activeUser(state);
+      const account = user?.external_accounts.find(item => item.id === params.id);
+      if (!user || !account) {
+        return missing();
+      }
+      const pending = {
+        ...account,
+        verification: fapiVerification(`oauth_${account.provider}`, {
+          status: 'unverified',
+          external_verification_redirect_url: 'https://accounts.example/consent',
+        }),
+      };
+      updateUser(state, {
+        ...user,
+        external_accounts: user.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 }) => {
+      if (new URL(request.url).searchParams.get('_method') !== 'DELETE') {
+        return undefined;
+      }
+      const user = activeUser(state);
+      const account = user?.external_accounts.find(item => item.id === params.id);
+      if (!user || !account) {
+        return missing();
+      }
+      updateUser(state, { ...user, external_accounts: user.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 }) => {
       const session = findSession(state, params.id);
       return session

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

@@ -9,6 +9,7 @@ import type {
   EmailAddressJSON,
   EnterpriseAccountJSON,
   EnvironmentJSON,
+  ExternalAccountJSON,
   OAuthProviders,
   OrganizationJSON,
   OrganizationMembershipJSON,
@@ -235,6 +236,27 @@ export function fapiEmailAddress(
   };
 }
 
+export function fapiExternalAccount(
+  overrides: Partial<ExternalAccountJSON> & Pick<ExternalAccountJSON, 'id' | 'provider'>,
+): ExternalAccountJSON {
+  return {
+    object: 'external_account',
+    identification_id: overrides.id,
+    provider_user_id: 'provider_user_1',
+    approved_scopes: 'email',
+    email_address: `${overrides.provider}@example.com`,
+    first_name: '',
+    last_name: '',
+    image_url: '',
+    username: '',
+    phone_number: '',
+    public_metadata: {},
+    label: '',
+    verification: fapiVerification(`oauth_${overrides.provider}`, { status: 'verified' }),
+    ...overrides,
+  };
+}
+
 export function fapiUser(overrides: Partial<UserJSON> & Pick<UserJSON, 'id'>): UserJSON {
   return {
     object: 'user',

packages/mosaic/src/__tests__/feature/render.tsx

@@ -7,7 +7,7 @@ import { vi } from 'vitest';
 import { MosaicProvider } from '../../mosaic-provider';
 import { PUBLISHABLE_KEY } from './fake-fapi';
 
-export async function renderWithClerk(ui: ReactElement) {
+export async function renderWithClerk(ui: ReactElement, options?: Parameters<Clerk['load']>[0]) {
   const clerk = new Clerk(PUBLISHABLE_KEY);
   const navigate = vi.fn((_to: string) => Promise.resolve());
 
@@ -21,7 +21,7 @@ export async function renderWithClerk(ui: ReactElement) {
   );
   let current = ui;
   const view = render(wrap(current));
-  await act(() => clerk.load({ routerPush: to => navigate(to), routerReplace: to => navigate(to) }));
+  await act(() => clerk.load({ routerPush: to => navigate(to), routerReplace: to => navigate(to), ...options }));
   view.rerender(wrap(current));
 
   return {