feat(clerk-js): Optional password exploration

.changeset/wise-olives-drive.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+When password is enabled at the instance level, but not required allow users to add a password in the user profile.

packages/clerk-js/src/core/resources/UserSettings.ts

@@ -191,7 +191,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
   }
 
   get instanceIsPasswordBased() {
-    return Boolean(this.attributes?.password?.enabled && this.attributes.password?.required);
+    return Boolean(this.attributes?.password?.enabled);
   }
 
   get hasValidAuthFactor() {

packages/clerk-js/src/core/resources/__tests__/UserSettings.test.ts

@@ -75,6 +75,17 @@ describe('UserSettings', () => {
         },
       },
     } as any as UserSettingsJSON);
+    expect(sut.instanceIsPasswordBased).toEqual(true);
+
+    sut = new UserSettings({
+      attributes: {
+        password: {
+          enabled: false,
+          required: false,
+        },
+      },
+    } as any as UserSettingsJSON);
+
     expect(sut.instanceIsPasswordBased).toEqual(false);
   });
 

packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx

@@ -33,9 +33,7 @@ describe('SecurityPage', () => {
 
   it('renders the Password section if instance is password based', async () => {
     const { wrapper, fixtures } = await createFixtures(f => {
-      f.withPassword({
-        required: true,
-      });
+      f.withPassword();
       f.withUser({ email_addresses: ['test@clerk.com'] });
     });
     fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));