From 7aae9f55465477a84cb71238290eeb842785170b Mon Sep 17 00:00:00 2001
From: Lakhan Samani <lakhan.m.samani@gmail.com>
Date: Sun, 12 Jul 2026 12:58:36 +0530
Subject: [PATCH 1/2] feat(login): passkey autofill on the basic-auth login
 form

Offer discoverable passkeys inline in the email/username field via WebAuthn
conditional mediation, alongside the existing "Sign in with a passkey" button.

- Add autocomplete="username webauthn" to the email/phone input.
- Start authorizerRef.loginWithPasskeyAutofill() on mount; on success set auth
  data and fire onLogin. Best-effort: unsupported/cancelled ceremonies are
  ignored. Aborted on unmount via cancelPasskeyAutofill().

Depends on @authorizerdev/authorizer-js exposing loginWithPasskeyAutofill /
cancelPasskeyAutofill (authorizer-js#43); bump the dependency before merge.
---
 src/components/AuthorizerBasicAuthLogin.tsx | 38 +++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/components/AuthorizerBasicAuthLogin.tsx b/src/components/AuthorizerBasicAuthLogin.tsx
index a9b1744..1a38654 100644
--- a/src/components/AuthorizerBasicAuthLogin.tsx
+++ b/src/components/AuthorizerBasicAuthLogin.tsx
@@ -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)

From 5ac383d7b665ad4b60ceaf519ebe881c7b942404 Mon Sep 17 00:00:00 2001
From: Lakhan Samani <lakhan.m.samani@gmail.com>
Date: Sun, 12 Jul 2026 15:27:14 +0530
Subject: [PATCH 2/2] chore(deps): bump @authorizerdev/authorizer-js to
 3.3.0-rc.1 (unblocks autofill)

---
 package-lock.json | 12 ++++++------
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0644908..dc80ace 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@authorizerdev/authorizer-react",
-  "version": "2.1.0",
+  "version": "2.2.0-rc.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@authorizerdev/authorizer-react",
-      "version": "2.1.0",
+      "version": "2.2.0-rc.0",
       "license": "MIT",
       "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"
       },
@@ -73,9 +73,9 @@
       }
     },
     "node_modules/@authorizerdev/authorizer-js": {
-      "version": "3.3.0-rc.0",
-      "resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-3.3.0-rc.0.tgz",
-      "integrity": "sha512-P9S25JZpSqYR46YOT1W6BugfQkqHaswFLkUt4drJLPHH3vecRCUC0IczHMT2NkAbZzILoBh3LNOdV1BFd61CLw==",
+      "version": "3.3.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-3.3.0-rc.1.tgz",
+      "integrity": "sha512-L6S2BzHIP7cPa4nD3FT2RxRiQM5w6jauCNtEX+5t+8sUr4DrrcZON2MhYhVSuBT8+8/Y9TcKO2ZamZwuDX0pVg==",
       "license": "MIT",
       "dependencies": {
         "cross-fetch": "^4.1.0"
diff --git a/package.json b/package.json
index 2801f11..3aea20a 100644
--- a/package.json
+++ b/package.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"
   }