fix(clerk-js): Render instant password field for password-based instances only

Author: nikosdouvlis

packages/clerk-js/src/ui/signIn/SignInStart.test.tsx

@@ -89,7 +89,7 @@ fdescribe('<SignInStart/>', () => {
         },
         password: {
           enabled: true,
-          used_for_first_factor: false,
+          required: true,
         },
       },
       social: {
@@ -195,10 +195,10 @@ fdescribe('<SignInStart/>', () => {
       expect(instantPasswordField).toBeDefined();
 
       const inputField = screen.getByLabelText('Email address');
-      await userEvent.type(inputField, 'boss@clerk.dev');
+      userEvent.type(inputField, 'boss@clerk.dev');
 
       // simulate password being filled by a pwd manager
-      await userEvent.type(instantPasswordField, 'wrong pass');
+      userEvent.type(instantPasswordField, 'wrong pass');
 
       const signEmailButton = screen.getByRole('button', { name: /Continue/i });
       userEvent.click(signEmailButton);
@@ -271,6 +271,21 @@ fdescribe('<SignInStart/>', () => {
       });
     });
 
+    it('does not render instant password is instance is passwordless', () => {
+      mockUserSettings = new UserSettings({
+        attributes: {
+          password: {
+            enabled: true,
+            required: false,
+          },
+        },
+      } as unknown as UserSettingsJSON);
+
+      const { container } = render(<SignInStart />);
+      const instantPasswordField = container.querySelector('input#password') as HTMLInputElement;
+      expect(instantPasswordField).toBeNull();
+    });
+
     it.each(['google', 'facebook'])(
       'renders the start screen, presses the %s button and starts an oauth flow',
       async provider => {

packages/clerk-js/src/ui/signIn/SignInStart.tsx

@@ -39,6 +39,7 @@ export function _SignInStart(): JSX.Element {
   const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;
   const web3FirstFactors = userSettings.web3FirstFactors;
   const socialProviderStrategies = userSettings.socialProviderStrategies;
+  const passwordBasedInstance = userSettings.instanceIsPasswordBased;
 
   const identifierInputDisplayValues = getIdentifierControlDisplayValues(standardFormAttributes);
 
@@ -157,24 +158,28 @@ export function _SignInStart(): JSX.Element {
                 )}
               </Control>
 
-              <Control
-                key='password'
-                htmlFor='password'
-                label='Password'
-                error={instantPassword.error}
-                className={cn({
-                  'cl-hidden': !instantPassword.value,
-                })}
-              >
-                <Input
-                  id='password'
-                  type='password'
-                  name='password'
-                  value={instantPassword.value}
-                  handleChange={el => instantPassword.setValue(el.value || '')}
-                  tabIndex={-1}
-                />
-              </Control>
+              <>
+                {passwordBasedInstance && (
+                  <Control
+                    key='password'
+                    htmlFor='password'
+                    label='Password'
+                    error={instantPassword.error}
+                    className={cn({
+                      'cl-hidden': !instantPassword.value,
+                    })}
+                  >
+                    <Input
+                      id='password'
+                      type='password'
+                      name='password'
+                      value={instantPassword.value}
+                      handleChange={el => instantPassword.setValue(el.value || '')}
+                      tabIndex={-1}
+                    />
+                  </Control>
+                )}
+              </>
             </Form>
           </>
         )}