feat(clerk-js, types): Trigger UserVerification within UserProfile

.changeset/four-oranges-clap.md

@@ -0,0 +1,31 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/types": minor
+---
+
+*Experimental Feature*: `<UserProfile/>` allows users to update their information. Mostly of this information is considered sensitive data.
+We want to ensure that only the users themselves can alter any sensitive data.
+
+To increase security we are now, require users to re-verify their credentials when they are about to perform these actions:
+
+
+| Operation | Reverification | Strategy | Timeframe |
+| --- |----------------| --- | --- |
+| Update account (first/last name) | ❌              |  |  |
+| Update username | ✅              | Strongest available | 10m |
+| Delete account | ✅              | Strongest available | 10m |
+| Create/Remove profile image | ❌              |  |  |
+| Update password | ✅              | Strongest available | 10m |
+| Remove password | ❌              |  |  |
+| Revoke session | ✅              | Strongest available | 10m |
+| Create identification | ✅              | Strongest available | 10m |
+| Remove identification | ✅              | Strongest available | 10m |
+| Change primary identification | ✅              | Strongest available | 10m |
+| Update Passkey name | ❌              |  |  |
+| Enable MFA (TOTP, Phone number) | ✅              | Strongest available | 10m |
+| Disable MFA (TOΤP, Phone number) | ✅              | Strongest available | 10m |
+| Create/Regenerate Backup Codes | ✅              | Strongest available | 10m |
+| Connect External Account | ✅              | Strongest available | 10m |
+| Re-authorize External Account | ❌              |  |  |
+| Remove External Account | ✅              | Strongest available | 10m |
+| Leave organization | ❌              |  |  |

packages/clerk-js/jest.setup.ts

@@ -3,10 +3,13 @@ import { TextDecoder, TextEncoder } from 'node:util';
 
 import { jest } from '@jest/globals';
 
+class FakeResponse {}
+
 if (typeof window !== 'undefined') {
   Object.defineProperties(globalThis, {
     TextDecoder: { value: TextDecoder },
     TextEncoder: { value: TextEncoder },
+    Response: { value: FakeResponse },
     crypto: { value: crypto.webcrypto },
   });
 

packages/clerk-js/src/ui/Components.tsx

@@ -84,6 +84,9 @@ export type ComponentControls = {
       | 'organizationProfile'
       | 'createOrganization'
       | 'userVerification',
+    options?: {
+      notify?: boolean;
+    },
   ) => void;
   // Special case, as the impersonation fab mounts automatically
   mountImpersonationFab: () => void;
@@ -245,13 +248,53 @@ const Components = (props: ComponentsProps) => {
       setState(s => ({ ...s, ...restProps, options: { ...s.options, ...restProps.options } }));
     };
 
-    componentsControls.closeModal = name => {
+    componentsControls.closeModal = (name, options = {}) => {
+      const { notify = true } = options;
       clearUrlStateParam();
-      setState(s => ({ ...s, [name + 'Modal']: null }));
+      setState(s => {
+        function handleCloseModalForExperimentalUserVerification() {
+          const modal = s[`${name}Modal`] || {};
+          if ('afterVerificationCancelled' in modal && notify) {
+            modal.afterVerificationCancelled?.();
+          }
+        }
+
+        /**
+         * We need this in order for `Clerk.__experimental_closeUserVerification()`
+         * to properly trigger the previously defined `afterVerificationCancelled` callback
+         */
+        handleCloseModalForExperimentalUserVerification();
+
+        return { ...s, [`${name}Modal`]: null };
+      });
     };
 
     componentsControls.openModal = (name, props) => {
-      setState(s => ({ ...s, [name + 'Modal']: props }));
+      function handleCloseModalForExperimentalUserVerification() {
+        if (!('afterVerificationCancelled' in props)) {
+          return;
+        }
+
+        setState(s => ({
+          ...s,
+          [`${name}Modal`]: {
+            ...props,
+            /**
+             * When a UserVerification flow is completed, we need to close the modal without trigger a cancellation callback
+             */
+            afterVerification() {
+              props.afterVerification?.();
+              componentsControls.closeModal(name, { notify: false });
+            },
+          },
+        }));
+      }
+
+      if ('afterVerificationCancelled' in props) {
+        handleCloseModalForExperimentalUserVerification();
+      } else {
+        setState(s => ({ ...s, [`${name}Modal`]: props }));
+      }
     };
 
     componentsControls.mountImpersonationFab = () => {

packages/clerk-js/src/ui/common/RemoveResourceForm.tsx

@@ -1,6 +1,7 @@
 import { localizationKeys, Text } from '../customizables';
 import type { FormProps } from '../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../elements';
+import { useAssurance } from '../hooks/useAssurance';
 import type { LocalizationKey } from '../localization';
 import { handleError } from '../utils';
 
@@ -15,10 +16,11 @@ type RemoveFormProps = FormProps & {
 export const RemoveResourceForm = withCardStateProvider((props: RemoveFormProps) => {
   const { title, messageLine1, messageLine2, deleteResource, onSuccess, onReset } = props;
   const card = useCardState();
+  const { handleAssurance } = useAssurance();
 
   const handleSubmit = async () => {
     try {
-      await deleteResource().then(onSuccess);
+      await handleAssurance(deleteResource).then(onSuccess);
     } catch (e) {
       handleError(e, [], card.setError);
     }

packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx

@@ -53,6 +53,8 @@ export const AccountPage = withCardStateProvider(() => {
         {showEmail && <EmailsSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
         {showPhone && <PhoneSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
         {showConnectedAccounts && <ConnectedAccountsSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
+
+        {/*TODO-STEP-UP: Verify that these work as expected*/}
         {showSamlAccounts && <EnterpriseAccountsSection />}
         {showWeb3 && <Web3Section shouldAllowCreation={shouldAllowIdentificationCreation} />}
       </Col>

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -4,6 +4,7 @@ import type { SessionWithActivitiesResource } from '@clerk/types';
 import { Badge, Col, descriptors, Flex, Icon, localizationKeys, Text, useLocalizations } from '../../customizables';
 import { FullHeightLoader, ProfileSection, ThreeDotsMenu } from '../../elements';
 import { useFetch, useLoadingStatus } from '../../hooks';
+import { useAssurance } from '../../hooks/useAssurance';
 import { DeviceLaptop, DeviceMobile } from '../../icons';
 import { mqu, type PropsOfComponent } from '../../styledSystem';
 import { getRelativeToNowDateKey } from '../../utils';
@@ -48,12 +49,19 @@ export const ActiveDevicesSection = () => {
 const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) => {
   const isCurrent = useSession().session?.id === session.id;
   const status = useLoadingStatus();
+  const { handleAssurance } = useAssurance();
+
   const revoke = async () => {
     if (isCurrent || !session) {
       return;
     }
     status.setLoading();
-    return session.revoke().finally(() => status.setIdle());
+    return (
+      handleAssurance(() => session.revoke())
+        // TODO-STEPUP: Properly handler the response with a setCardError
+        .catch(() => {})
+        .finally(() => status.setIdle())
+    );
   };
 
   return (

packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx

@@ -1,3 +1,4 @@
+import { isClerkRuntimeError } from '@clerk/shared';
 import { useUser } from '@clerk/shared/react';
 import type { TOTPResource } from '@clerk/types';
 import React from 'react';
@@ -14,6 +15,8 @@ import {
   useCardState,
   withCardStateProvider,
 } from '../../elements';
+import { useActionContext } from '../../elements/Action/ActionRoot';
+import { useAssurance } from '../../hooks/useAssurance';
 import { handleError } from '../../utils';
 
 type AddAuthenticatorAppProps = FormProps & {
@@ -26,16 +29,26 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato
   const { title, onSuccess, onReset } = props;
   const { user } = useUser();
   const card = useCardState();
+  const { handleAssurance } = useAssurance();
+  const { close } = useActionContext();
   const [totp, setTOTP] = React.useState<TOTPResource | undefined>(undefined);
   const [displayFormat, setDisplayFormat] = React.useState<DisplayFormat>('qr');
 
   // TODO: React18
   // Non-idempotent useEffect
   React.useEffect(() => {
-    void user
-      ?.createTOTP()
+    if (!user) {
+      return;
+    }
+
+    void handleAssurance(user.createTOTP)
       .then((totp: TOTPResource) => setTOTP(totp))
-      .catch(err => handleError(err, [], card.setError));
+      .catch(err => {
+        if (isClerkRuntimeError(err) && err.code === 'assurance_cancelled') {
+          return close();
+        }
+        return handleError(err, [], card.setError);
+      });
   }, []);
 
   if (card.error) {

packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsMenu.tsx

@@ -7,6 +7,7 @@ import { useUserProfileContext } from '../../contexts';
 import { descriptors, Image, localizationKeys } from '../../customizables';
 import { ProfileSection, useCardState } from '../../elements';
 import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useAssurance } from '../../hooks/useAssurance';
 import { useRouter } from '../../router';
 import { handleError, sleep } from '../../utils';
 
@@ -16,6 +17,8 @@ export const AddConnectedAccount = () => {
   const { navigate } = useRouter();
   const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
   const { additionalOAuthScopes, componentName, mode } = useUserProfileContext();
+
+  const { handleAssurance } = useAssurance();
   const isModal = mode === 'modal';
 
   const enabledStrategies = strategies.filter(s => s.startsWith('oauth')) as OAuthStrategy[];
@@ -26,6 +29,9 @@ export const AddConnectedAccount = () => {
   });
 
   const connect = (strategy: OAuthStrategy) => {
+    if (!user) {
+      return;
+    }
     const socialProvider = strategy.replace('oauth_', '') as OAuthProvider;
     const redirectUrl = isModal
       ? appendModalState({ url: window.location.href, componentName, socialProvider: socialProvider })
@@ -35,12 +41,13 @@ export const AddConnectedAccount = () => {
     // TODO: Decide if we should keep using this strategy
     // If yes, refactor and cleanup:
     card.setLoading(strategy);
-    user
-      ?.createExternalAccount({
+    return handleAssurance(() =>
+      user.createExternalAccount({
         strategy,
         redirectUrl,
         additionalScopes,
-      })
+      }),
+    )
       .then(res => {
         if (res.verification?.externalVerificationRedirectURL) {
           void sleep(2000).then(() => card.setIdle(strategy));

packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx

@@ -9,6 +9,7 @@ import { Card, ProfileSection, ThreeDotsMenu, useCardState, withCardStateProvide
 import { Action } from '../../elements/Action';
 import { useActionContext } from '../../elements/Action/ActionRoot';
 import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useAssurance } from '../../hooks/useAssurance';
 import { useRouter } from '../../router';
 import type { PropsOfComponent } from '../../styledSystem';
 import { handleError } from '../../utils';
@@ -89,6 +90,7 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) =>
   const { navigate } = useRouter();
   const { user } = useUser();
   const card = useCardState();
+  const { handleAssurance } = useAssurance();
 
   if (!user) {
     return null;
@@ -115,11 +117,13 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) =>
       if (reauthorizationRequired) {
         response = await account.reauthorize({ additionalScopes, redirectUrl });
       } else {
-        response = await user.createExternalAccount({
-          strategy: account.verification!.strategy as OAuthStrategy,
-          redirectUrl,
-          additionalScopes,
-        });
+        response = await handleAssurance(() =>
+          user.createExternalAccount({
+            strategy: account.verification!.strategy as OAuthStrategy,
+            redirectUrl,
+            additionalScopes,
+          }),
+        );
       }
 
       await navigate(response.verification!.externalVerificationRedirectURL?.href || '');

packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx

@@ -4,6 +4,7 @@ import { useSignOutContext } from '../../contexts';
 import { Col, localizationKeys, Text, useLocalizations } from '../../customizables';
 import type { FormProps } from '../../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../../elements';
+import { useAssurance } from '../../hooks/useAssurance';
 import { useMultipleSessions } from '../../hooks/useMultipleSessions';
 import { handleError, useFormControl } from '../../utils';
 
@@ -16,6 +17,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
   const { t } = useLocalizations();
   const { otherSessions } = useMultipleSessions({ user });
   const { setActive } = useClerk();
+  const { handleAssurance } = useAssurance();
 
   const confirmationField = useFormControl('deleteConfirmation', '', {
     type: 'text',
@@ -38,8 +40,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
         throw Error('user is not defined');
       }
 
-      await user.delete();
-      // TODO: Investigate if we need to call `setActive` with {session: null}
+      await handleAssurance(user.delete);
       const navigationCallback =
         otherSessions.length === 0 ? navigateAfterSignOut : navigateAfterMultiSessionSingleSignOutUrl;
       return await setActive({

packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx

@@ -7,6 +7,7 @@ import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import type { FormProps } from '../../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../../elements';
+import { useAssurance } from '../../hooks/useAssurance';
 import { handleError, useFormControl } from '../../utils';
 import { emailLinksEnabledForInstance } from './utils';
 import { VerifyWithCode } from './VerifyWithCode';
@@ -19,6 +20,7 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
   const { emailId: id, onSuccess, onReset } = props;
   const card = useCardState();
   const { user } = useUser();
+  const { handleAssurance } = useAssurance();
   const environment = useEnvironment();
   const preferEmailLinks = emailLinksEnabledForInstance(environment);
 
@@ -39,8 +41,10 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
 
   const addEmail = async (e: React.FormEvent) => {
     e.preventDefault();
-    return user
-      ?.createEmailAddress({ email: emailField.value })
+    if (!user) {
+      return;
+    }
+    return handleAssurance(() => user.createEmailAddress({ email: emailField.value }))
       .then(res => {
         emailAddressRef.current = res;
         wizard.nextStep();

packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreateForm.tsx

@@ -11,6 +11,7 @@ import {
   useCardState,
   withCardStateProvider,
 } from '../../elements';
+import { useAssurance } from '../../hooks/useAssurance';
 import { handleError } from '../../utils';
 import { MfaBackupCodeList } from './MfaBackupCodeList';
 
@@ -19,15 +20,15 @@ export const MfaBackupCodeCreateForm = withCardStateProvider((props: MfaBackupCo
   const { onSuccess } = props;
   const { user } = useUser();
   const card = useCardState();
+  const { handleAssurance } = useAssurance();
   const [backupCode, setBackupCode] = React.useState<BackupCodeResource | undefined>(undefined);
 
   React.useEffect(() => {
-    if (backupCode) {
+    if (backupCode || !user) {
       return;
     }
 
-    void user
-      ?.createBackupCode()
+    void handleAssurance(user.createBackupCode)
       .then((backupCode: BackupCodeResource) => setBackupCode(backupCode))
       .catch(err => handleError(err, [], card.setError));
   }, []);