feat: add passkey login option to the login screen

New AuthorizerPasskeyLogin component offers a full passwordless,
usernameless "Sign in with a passkey" button (discoverable-credential
login) above the existing login methods, wired via authorizer-js's
loginWithPasskey() (authorizerdev/authorizer-js#40 / backend:
authorizerdev/authorizer#671).

Renders nothing when isWebauthnSupported() is false - there's no
server config flag for passkeys (unlike social login), it's purely a
browser capability check.

Passkey management (list/add/delete existing passkeys) is out of
scope here: this library only ever contained login-flow components,
no account/settings page exists to extend, and the raw SDK methods
(webauthnCredentials, webauthnDeleteCredential, registerPasskey) are
already exported for a consuming app to build that itself.

Live-verified in the example app against a real backend: the button
renders, click fires webauthn_login_options over GraphQL and invokes
the browser's native navigator.credentials.get() correctly (confirmed
via the loading state and no console errors). Completing an actual
ceremony needs real biometric hardware or a manually-configured
Chrome DevTools virtual authenticator, neither of which is scriptable
through browser automation - the ceremony logic itself is already
proven correct by a Go integration test that simulates a real
authenticator via github.com/descope/virtualwebauthn through the
actual server code path.

Author: lakhansamani

src/components/AuthorizerPasskeyLogin.tsx

@@ -0,0 +1,71 @@
+import { FC, useState } from 'react';
+import { AuthToken, isWebauthnSupported } from '@authorizerdev/authorizer-js';
+
+import '../styles/default.css';
+import { ButtonAppearance, MessageType } from '../constants';
+import { useAuthorizer } from '../contexts/AuthorizerContext';
+import { StyledButton, StyledSeparator } from '../styledComponents';
+import { Message } from './Message';
+
+// AuthorizerPasskeyLogin offers a full passwordless, usernameless "Sign in
+// with a passkey" option (discoverable-credential login) alongside the other
+// login methods. It only renders when the browser actually supports the
+// WebAuthn JSON ceremony APIs the SDK relies on - there is no server-side
+// config flag for passkeys (unlike social login), it's purely a browser
+// capability.
+export const AuthorizerPasskeyLogin: FC<{
+  onLogin?: (data: AuthToken | void) => void;
+}> = ({ onLogin }) => {
+  const [error, setError] = useState(``);
+  const [loading, setLoading] = useState(false);
+  const { setAuthData, config, authorizerRef } = useAuthorizer();
+
+  if (!isWebauthnSupported()) {
+    return null;
+  }
+
+  const onClick = async () => {
+    setError(``);
+    try {
+      setLoading(true);
+      const { data: res, errors } = await authorizerRef.loginWithPasskey();
+      if (errors && errors.length) {
+        setError(errors[0]?.message || ``);
+        return;
+      }
+      if (res) {
+        setAuthData({
+          user: res.user || null,
+          token: res,
+          config,
+          loading: false,
+        });
+      }
+      if (onLogin) {
+        onLogin(res);
+      }
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onErrorClose = () => setError(``);
+
+  return (
+    <>
+      {error && (
+        <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
+      )}
+      <StyledButton
+        onClick={onClick}
+        disabled={loading}
+        appearance={ButtonAppearance.Default}
+      >
+        {loading ? `Waiting for passkey ...` : `Sign in with a passkey`}
+      </StyledButton>
+      <StyledSeparator>OR</StyledSeparator>
+    </>
+  );
+};

src/components/AuthorizerRoot.tsx

@@ -9,6 +9,7 @@ import { AuthorizerSignup } from './AuthorizerSignup';
 import type {  FormFieldsOverrides } from './AuthorizerSignup';
 import { AuthorizerForgotPassword } from './AuthorizerForgotPassword';
 import { AuthorizerSocialLogin } from './AuthorizerSocialLogin';
+import { AuthorizerPasskeyLogin } from './AuthorizerPasskeyLogin';
 import { AuthorizerMagicLinkLogin } from './AuthorizerMagicLinkLogin';
 import { createRandomString } from '../utils/common';
 import { hasWindow } from '../utils/window';
@@ -60,6 +61,7 @@ export const AuthorizerRoot: FC<{
   return (
     <StyledWrapper>
       <AuthorizerSocialLogin urlProps={urlProps} roles={roles} />
+      {view === Views.Login && <AuthorizerPasskeyLogin onLogin={onLogin} />}
       {view === Views.Login &&
         (config.is_basic_authentication_enabled ||
           config.is_mobile_basic_authentication_enabled) &&

src/index.tsx

@@ -14,6 +14,7 @@ import { AuthorizerResetPassword } from './components/AuthorizerResetPassword';
 import { AuthorizerVerifyOtp } from './components/AuthorizerVerifyOtp';
 import { AuthorizerRoot as Authorizer } from './components/AuthorizerRoot';
 import { AuthorizerTOTPScanner } from './components/AuthorizerTOTPScanner';
+import { AuthorizerPasskeyLogin } from './components/AuthorizerPasskeyLogin';
 
 export {
   useAuthorizer,
@@ -27,4 +28,5 @@ export {
   AuthorizerResetPassword,
   AuthorizerVerifyOtp,
   AuthorizerTOTPScanner,
+  AuthorizerPasskeyLogin,
 };