Merge pull request #59 from authorizerdev/feat/passkey-autofill

feat(login): passkey autofill (conditional mediation) on the login form

Author: lakhansamani

package-lock.json

@@ -91,7 +91,7 @@
     "typescript": "^5.7.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "3.3.0-rc.0",
+    "@authorizerdev/authorizer-js": "^3.3.0-rc.1",
     "@storybook/preset-scss": "^1.0.3",
     "validator": "^13.11.0"
   }

package.json

@@ -182,6 +182,40 @@ export const AuthorizerBasicAuthLogin: FC<{
     }
   }, [formData.password]);
 
+  // Passkey autofill (WebAuthn conditional mediation): when the browser and the
+  // user's device support it, discoverable passkeys are offered inline in the
+  // email/username field's autofill dropdown. Best-effort and silent - the
+  // explicit "Sign in with a passkey" button remains the primary path, and any
+  // unsupported/cancelled/aborted ceremony is ignored. Started once on mount
+  // and aborted on unmount.
+  useEffect(() => {
+    let active = true;
+    authorizerRef
+      .loginWithPasskeyAutofill()
+      .then(({ data, errors }) => {
+        if (!active || (errors && errors.length) || !data) {
+          return;
+        }
+        setAuthData({
+          user: data.user || null,
+          token: data,
+          config,
+          loading: false,
+        });
+        if (onLogin) {
+          onLogin(data);
+        }
+      })
+      .catch(() => {
+        // Autofill is best-effort; ignore unsupported/cancelled ceremonies.
+      });
+    return () => {
+      active = false;
+      authorizerRef.cancelPasskeyAutofill();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (totpData.is_screen_visible) {
     return (
       <AuthorizerTOTPScanner
@@ -238,6 +272,10 @@ export const AuthorizerBasicAuthLogin: FC<{
               }`}
               placeholder={getEmailPhonePlaceholder(config)}
               type="text"
+              // Enables WebAuthn passkey autofill: browsers offer discoverable
+              // passkeys inline in this field's autofill dropdown. Paired with
+              // the loginWithPasskeyAutofill() ceremony started on mount below.
+              autoComplete="username webauthn"
               value={formData.email_or_phone_number || ''}
               onChange={e =>
                 onInputChange('email_or_phone_number', e.target.value)