feat(ui): User profile rough-in security dialogs

.changeset/mosaic-password-dialog.md

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

packages/swingset/src/components/DocsViewer.tsx

@@ -16,6 +16,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
   'user-profile': {
     'user-page': dynamic(() => import('../stories/user-page.mdx')),
     'user-profile-account-section-flow': dynamic(() => import('../stories/user-profile-account-section-flow.mdx')),
+    'user-profile-security-panel-flow': dynamic(() => import('../stories/user-profile-security-panel-flow.mdx')),
     'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
     'user-profile-security-panel': dynamic(() => import('../stories/user-profile-security-panel.mdx')),
     'user-profile-billing-panel': dynamic(() => import('../stories/user-profile-billing-panel.mdx')),

packages/swingset/src/lib/registry.ts

@@ -166,6 +166,11 @@ import {
   Default as UserProfileSecurityPanelDefault,
   meta as userProfileSecurityPanelMeta,
 } from '../stories/user-profile-security-panel.stories';
+import {
+  Default as UserProfileSecurityPanelFlowDefault,
+  meta as userProfileSecurityPanelFlowMeta,
+  States as UserProfileSecurityPanelFlowStates,
+} from '../stories/user-profile-security-panel-flow.stories';
 import {
   Default as UserProfileSubscriptionSectionDefault,
   meta as userProfileSubscriptionSectionMeta,
@@ -365,13 +370,19 @@ const userProfileDeleteSectionModule: StoryModule = {
   meta: userProfileDeleteSectionMeta,
   Default: UserProfileDeleteSectionDefault,
 };
+const userProfileSecurityPanelFlowModule: StoryModule = {
+  meta: userProfileSecurityPanelFlowMeta,
+  Default: UserProfileSecurityPanelFlowDefault,
+  States: UserProfileSecurityPanelFlowStates,
+};
 
 export const registry: StoryModule[] = [
   // User Button
   userButtonModule,
   // User Profile
   userPageModule,
   userProfileAccountSectionFlowModule,
+  userProfileSecurityPanelFlowModule,
   // User Profile · Panels
   userProfileProfilePanelModule,
   userProfileSecurityPanelModule,

packages/swingset/src/stories/user-page.stories.tsx

@@ -6,16 +6,14 @@ import type {
   UserProfileSubscription,
 } from '@clerk/ui/mosaic/user-profile/user-profile-billing-panel.view';
 import type { UserProfileEmail, UserProfilePhone } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
-import type {
-  UserProfileDevice,
-  UserProfileMfaMethod,
-  UserProfilePasskey,
-} from '@clerk/ui/mosaic/user-profile/user-profile-security-panel.view';
 import type { UserProfilePanelId } from '@clerk/ui/mosaic/user-profile/user-profile-sidebar';
 import { useMemo, useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { COMPOSED_SECURITY_FLOW_CONFIG } from './user-profile-security-panel-flow.config';
+import { useUserProfileSecurityPanelMockController } from './user-profile-security-panel-flow.controller';
+
 export { default as __source } from './user-page.stories?raw';
 
 export const meta: StoryMeta = {
@@ -46,40 +44,16 @@ const initialAPIKeys: UserProfileAPIKey[] = [
 
 export function Default() {
   const [activePanel, setActivePanel] = useState<UserProfilePanelId>('account');
+  const securityController = useUserProfileSecurityPanelMockController({
+    config: COMPOSED_SECURITY_FLOW_CONFIG,
+  });
   const [emails, setEmails] = useState<UserProfileEmail[]>([
     { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
     { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
   ]);
   const [phones, setPhones] = useState<UserProfilePhone[]>([
     { id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true },
   ]);
-  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>([
-    {
-      id: 'passkey',
-      name: 'Passkey',
-      createdAtLabel: 'Created today at 10:12 PM',
-      lastUsedAtLabel: 'Last used 1h ago',
-    },
-  ]);
-  const [mfaMethods, setMfaMethods] = useState<UserProfileMfaMethod[]>([
-    { id: 'sms', type: 'sms', description: '+1 801-888-8181' },
-    { id: 'backup', type: 'backup-codes' },
-  ]);
-  const [devices, setDevices] = useState<UserProfileDevice[]>([
-    {
-      id: 'current',
-      name: 'Safari on macOS',
-      description: 'Salt Lake City, UT, United States',
-      type: 'desktop',
-      isCurrent: true,
-    },
-    {
-      id: 'mobile',
-      name: 'Safari on iOS',
-      description: 'Last seen 2 weeks ago · Orem, UT, United States',
-      type: 'mobile',
-    },
-  ]);
   const [subscription, setSubscription] = useState<UserProfileSubscription>({
     planName: 'Basic Plan',
     priceLabel: '$12 / Month',
@@ -136,44 +110,7 @@ export function Default() {
       onVerifyPhone: id =>
         setPhones(current => current.map(phone => (phone.id === id ? { ...phone, isVerified: true } : phone))),
     },
-    security: {
-      hasPassword: true,
-      passkeys,
-      mfaMethods,
-      devices,
-      onAddMfaMethod: type =>
-        setMfaMethods(current => {
-          const timestamp = Date.now();
-          return [
-            ...current,
-            {
-              id: `${type}-${timestamp}`,
-              type,
-              description: type === 'sms' ? '+1 801-555-0100' : undefined,
-            },
-            ...(current.some(method => method.type === 'backup-codes')
-              ? []
-              : [{ id: `backup-${timestamp}`, type: 'backup-codes' as const }]),
-          ];
-        }),
-      onAddPasskey: () =>
-        setPasskeys(current => [
-          ...current,
-          { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
-        ]),
-      onChangePassword: () => undefined,
-      onDeleteAccount: () => undefined,
-      onManageDevice: () => undefined,
-      onManagePasskey: () => undefined,
-      onRegenerateBackupCodes: () =>
-        setMfaMethods(current =>
-          current.map(method => (method.type === 'backup-codes' ? { ...method, description: 'Just now' } : method)),
-        ),
-      onRemoveMfaMethod: id => setMfaMethods(current => current.filter(method => method.id !== id)),
-      onRemovePasskey: id => setPasskeys(current => current.filter(passkey => passkey.id !== id)),
-      onSignOutAllOtherDevices: () => setDevices(current => current.filter(device => device.isCurrent)),
-      onSignOutDevice: id => setDevices(current => current.filter(device => device.id !== id)),
-    },
+    security: securityController,
     billing: {
       subscription,
       paymentMethods,

packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx

@@ -1,9 +1,10 @@
-import type { UserProfileDevice } from '@clerk/ui/mosaic/user-profile/user-profile-active-devices-section.view';
+import { SecurityPanelDialogsView } from '@clerk/ui/mosaic/user-profile/dialogs/security-panel-dialogs.view';
 import { UserProfileActiveDevicesSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-active-devices-section.view';
-import { useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { useUserProfileSecurityPanelMockController } from './user-profile-security-panel-flow.controller';
+
 export { default as __source } from './user-profile-active-devices-section.stories?raw';
 
 export const meta: StoryMeta = {
@@ -15,34 +16,20 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  const [devices, setDevices] = useState<UserProfileDevice[]>([
-    {
-      id: 'current',
-      name: 'Safari on macOS',
-      description: 'Salt Lake City, UT, United States',
-      type: 'desktop',
-      isCurrent: true,
-    },
-    {
-      id: 'mobile',
-      name: 'Safari on iOS',
-      description: 'Last seen 2 weeks ago · Orem, UT, United States',
-      type: 'mobile',
-    },
-    {
-      id: 'desktop',
-      name: 'Clerk App on macOS',
-      description: 'Last seen May 14th, 2026 · San Francisco, CA, United States',
-      type: 'desktop',
-    },
-  ]);
+  const controller = useUserProfileSecurityPanelMockController();
 
   return (
-    <UserProfileActiveDevicesSectionView
-      devices={devices}
-      onManageDevice={() => undefined}
-      onSignOutAllOtherDevices={() => setDevices(current => current.filter(device => device.isCurrent))}
-      onSignOutDevice={id => setDevices(current => current.filter(device => device.id !== id))}
-    />
+    <>
+      <UserProfileActiveDevicesSectionView
+        devices={controller.devices ?? []}
+        error={controller.devicesError}
+        signOutState={controller.deviceSignOutState}
+        status={controller.devicesStatus}
+        onManageDevice={controller.onManageDevice}
+        onSignOutAllOtherDevices={controller.onSignOutAllOtherDevices}
+        onSignOutDevice={controller.onSignOutDevice}
+      />
+      <SecurityPanelDialogsView {...controller} />
+    </>
   );
 }

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -1,7 +1,10 @@
+import { SecurityPanelDialogsView } from '@clerk/ui/mosaic/user-profile/dialogs/security-panel-dialogs.view';
 import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { useUserProfileSecurityPanelMockController } from './user-profile-security-panel-flow.controller';
+
 export { default as __source } from './user-profile-delete-section.stories?raw';
 
 export const meta: StoryMeta = {
@@ -13,5 +16,12 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+  const controller = useUserProfileSecurityPanelMockController();
+
+  return (
+    <>
+      <UserProfileDeleteSectionView onDelete={() => controller.onDeleteAccount?.()} />
+      <SecurityPanelDialogsView {...controller} />
+    </>
+  );
 }

packages/swingset/src/stories/user-profile-mfa-section.stories.tsx

@@ -1,9 +1,11 @@
-import type { UserProfileMfaMethod } from '@clerk/ui/mosaic/user-profile/user-profile-mfa-section.view';
+import { SecurityPanelDialogsView } from '@clerk/ui/mosaic/user-profile/dialogs/security-panel-dialogs.view';
 import { UserProfileMfaSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-mfa-section.view';
-import { useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { COMPOSED_SECURITY_FLOW_CONFIG } from './user-profile-security-panel-flow.config';
+import { useUserProfileSecurityPanelMockController } from './user-profile-security-panel-flow.controller';
+
 export { default as __source } from './user-profile-mfa-section.stories?raw';
 
 export const meta: StoryMeta = {
@@ -15,70 +17,43 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  const [methods, setMethods] = useState<UserProfileMfaMethod[]>([
-    { id: 'sms', type: 'sms', description: '+1 801-888-8181' },
-    { id: 'backup', type: 'backup-codes' },
-  ]);
+  const controller = useUserProfileSecurityPanelMockController({
+    config: COMPOSED_SECURITY_FLOW_CONFIG,
+  });
 
   return (
-    <UserProfileMfaSectionView
-      methods={methods}
-      sectionTitle='Authentication'
-      onAdd={type =>
-        setMethods(current => {
-          const timestamp = Date.now();
-          return [
-            ...current,
-            {
-              id: `${type}-${timestamp}`,
-              type,
-              description: type === 'sms' ? '+1 801-555-0100' : undefined,
-            },
-            ...(current.some(method => method.type === 'backup-codes')
-              ? []
-              : [{ id: `backup-${timestamp}`, type: 'backup-codes' as const }]),
-          ];
-        })
-      }
-      onRegenerateBackupCodes={() =>
-        setMethods(current =>
-          current.map(method => (method.type === 'backup-codes' ? { ...method, description: 'Just now' } : method)),
-        )
-      }
-      onRemove={id => setMethods(current => current.filter(method => method.id !== id))}
-    />
+    <>
+      <UserProfileMfaSectionView
+        addableMethods={controller.mfaAddableMethods}
+        methods={controller.mfaMethods ?? []}
+        sectionTitle='Authentication'
+        onAdd={controller.onAddMfaMethod}
+        onEnableBackupCodes={controller.onEnableBackupCodes}
+        onRegenerateBackupCodes={controller.onRegenerateBackupCodes}
+        onRemove={controller.onRemoveMfaMethod}
+        onSetDefault={controller.onSetDefaultMfaMethod}
+      />
+      <SecurityPanelDialogsView {...controller} />
+    </>
   );
 }
 
 export function Empty() {
-  const [methods, setMethods] = useState<UserProfileMfaMethod[]>([]);
+  const controller = useUserProfileSecurityPanelMockController();
 
   return (
-    <UserProfileMfaSectionView
-      methods={methods}
-      sectionTitle='Authentication'
-      onAdd={type =>
-        setMethods(current => {
-          const timestamp = Date.now();
-          return [
-            ...current,
-            {
-              id: `${type}-${timestamp}`,
-              type,
-              description: type === 'sms' ? '+1 801-555-0100' : undefined,
-            },
-            ...(current.some(method => method.type === 'backup-codes')
-              ? []
-              : [{ id: `backup-${timestamp}`, type: 'backup-codes' as const }]),
-          ];
-        })
-      }
-      onRegenerateBackupCodes={() =>
-        setMethods(current =>
-          current.map(method => (method.type === 'backup-codes' ? { ...method, description: 'Just now' } : method)),
-        )
-      }
-      onRemove={id => setMethods(current => current.filter(method => method.id !== id))}
-    />
+    <>
+      <UserProfileMfaSectionView
+        addableMethods={controller.mfaAddableMethods}
+        methods={controller.mfaMethods ?? []}
+        sectionTitle='Authentication'
+        onAdd={controller.onAddMfaMethod}
+        onEnableBackupCodes={controller.onEnableBackupCodes}
+        onRegenerateBackupCodes={controller.onRegenerateBackupCodes}
+        onRemove={controller.onRemoveMfaMethod}
+        onSetDefault={controller.onSetDefaultMfaMethod}
+      />
+      <SecurityPanelDialogsView {...controller} />
+    </>
   );
 }