fix(clerk-js): Handle the construction of zxcvbn errors with informat…

…ion from FAPI fix(clerk-js): Add changeset fix(clerk-js): Remove type fix(clerk-js): Handle the construction of zxcvbn errors with information from FAPI
clerk · Jul 28, 2023 · 24a46ae · 24a46ae
1 parent 973e1fa
commit 24a46ae
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 0 deletions.
diff --git a/.changeset/brave-steaks-smile.md b/.changeset/brave-steaks-smile.md
@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/types': minor
+---
+
+Handle the construction of zxcvbn errors with information from FAPI
diff --git a/packages/clerk-js/src/ui/utils/passwordUtils.test.tsx b/packages/clerk-js/src/ui/utils/passwordUtils.test.tsx
@@ -165,4 +165,69 @@ describe('createPasswordError() constructs error that password', () => {
       'Your password must contain 8 or more characters, a special character, a number, a lowercase letter, and an uppercase letter.',
     );
   });
+
+  //
+  // zxcvbn
+  //
+  //
+  it('is not strong enough', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        {
+          code: 'form_password_not_strong_enough',
+          message: '',
+          meta: {
+            zxcvbn: {
+              suggestions: [{ code: 'anotherWord', message: '' }],
+            },
+          },
+        },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password is not strong enough. Add more words that are less common.');
+  });
+
+  it('is not strong enough and has repeated characters', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        {
+          code: 'form_password_not_strong_enough',
+          message: '',
+          meta: {
+            zxcvbn: {
+              suggestions: [
+                { code: 'anotherWord', message: '' },
+                { code: 'repeated', message: '' },
+              ],
+            },
+          },
+        },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe(
+      'Your password is not strong enough. Add more words that are less common. Avoid repeated words and characters.',
+    );
+  });
 });
diff --git a/packages/clerk-js/src/ui/utils/passwordUtils.ts b/packages/clerk-js/src/ui/utils/passwordUtils.ts
@@ -29,13 +29,24 @@ type LocalizationConfigProps = {
   locale: string;
   passwordSettings: Pick<PasswordSettingsData, 'max_length' | 'min_length'>;
 };
+
 export const createPasswordError = (errors: ClerkAPIError[], localizationConfig: LocalizationConfigProps) => {
   if (!localizationConfig) {
     return errors[0].longMessage;
   }
 
   const { t, locale, passwordSettings } = localizationConfig;
 
+  if (errors?.[0]?.code === 'form_password_not_strong_enough') {
+    const message = errors[0].meta?.zxcvbn?.suggestions
+      ?.map(s => {
+        return t(localizationKeys(`unstable__errors.zxcvbn.suggestions.${s.code}` as any));
+      })
+      .join(' ');
+
+    return `${t(localizationKeys('unstable__errors.zxcvbn.notEnough'))} ${message}`;
+  }
+
   const message = errors.map((s: any) => {
     const localizedKey = (mapComplexityErrors(passwordSettings) as any)[s.code];
 

diff --git a/packages/shared/src/errors/Error.ts b/packages/shared/src/errors/Error.ts
@@ -38,6 +38,7 @@ export function parseError(error: ClerkAPIErrorJSON): ClerkAPIError {
       paramName: error?.meta?.param_name,
       sessionId: error?.meta?.session_id,
       emailAddresses: error?.meta?.email_addresses,
+      zxcvbn: error?.meta?.zxcvbn,
     },
   };
 }

diff --git a/packages/types/src/api.ts b/packages/types/src/api.ts
@@ -9,6 +9,12 @@ export interface ClerkAPIError {
     paramName?: string;
     sessionId?: string;
     emailAddresses?: string[];
+    zxcvbn?: {
+      suggestions: {
+        code: string;
+        message: string;
+      }[];
+    };
   };
 }
 

diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
@@ -273,6 +273,12 @@ export interface ClerkAPIErrorJSON {
     param_name?: string;
     session_id?: string;
     email_addresses?: string[];
+    zxcvbn?: {
+      suggestions: {
+        code: string;
+        message: string;
+      }[];
+    };
   };
 }