address review comments

clerk · Sep 26, 2024 · 942ae04 · 942ae04
1 parent 8ea72f8
commit 942ae04
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/.changeset/four-oranges-clap.md b/.changeset/four-oranges-clap.md
@@ -3,4 +3,29 @@
 "@clerk/types": minor
 ---
 
-Trigger UserVerification within UserProfile
+*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 | ❌              |  |  |
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
@@ -253,8 +253,7 @@ const Components = (props: ComponentsProps) => {
       clearUrlStateParam();
       setState(s => {
         function handleCloseModalForExperimentalUserVerification() {
-          // @ts-ignore Expected value s['userVerificationModal']
-          const modal = s[name + 'Modal'] || {};
+          const modal = s[`${name}Modal`] || {};
           if ('afterVerificationCancelled' in modal && notify) {
             modal.afterVerificationCancelled?.();
           }
@@ -266,7 +265,7 @@ const Components = (props: ComponentsProps) => {
          */
         handleCloseModalForExperimentalUserVerification();
 
-        return { ...s, [name + 'Modal']: null };
+        return { ...s, [`${name}Modal`]: null };
       });
     };
 
@@ -278,7 +277,7 @@ const Components = (props: ComponentsProps) => {
 
         setState(s => ({
           ...s,
-          [name + 'Modal']: {
+          [`${name}Modal`]: {
             ...props,
             /**
              * When a UserVerification flow is completed, we need to close the modal without trigger a cancellation callback
@@ -294,7 +293,7 @@ const Components = (props: ComponentsProps) => {
       if ('afterVerificationCancelled' in props) {
         handleCloseModalForExperimentalUserVerification();
       } else {
-        setState(s => ({ ...s, [name + 'Modal']: props }));
+        setState(s => ({ ...s, [`${name}Modal`]: props }));
       }
     };
 

diff --git a/packages/clerk-js/src/ui/hooks/useAssurance.ts b/packages/clerk-js/src/ui/hooks/useAssurance.ts
@@ -52,7 +52,7 @@ async function resolveResult<T>(result: Promise<T>): Promise<T | AssuranceHint>
 /**
  * Polyfill for Promise.withResolvers()
  */
-function customPromiseWithResolves() {
+function customPromiseWithResolvers() {
   let resolve: PromiseWithResolvers<unknown>['resolve'];
   let reject: PromiseWithResolvers<unknown>['reject'];
 
@@ -90,7 +90,7 @@ function createAssuranceHandler(params: { onOpenModal: Clerk['__experimental_ope
       /**
        * Create a promise
        */
-      const resolvers = customPromiseWithResolves();
+      const resolvers = customPromiseWithResolvers();
 
       /**
        * On success resolve the pending promise