Skip to main content

Sign In With Passkey Autofill

This guide extends Sign In With Passkey, allowing the user to authenticate using passkey autofill.

Prerequisites​

  • Create an application to obtain a base URL. The SDK uses this base URL to interact with the LoginID authentication service.

Setup SDK​

npm i @loginid/websdk3

Import and initialize an instance:

import { LoginIDWebSDK } from "@loginid/websdk3";

const lid = new LoginIDWebSDK({
  baseUrl: process.env.LOGINID_BASE_URL,
});

Passkey Autofill Example​

info

This method automatically uses the WebAuthn Signal API to keep a user’s passkeys synchronized between the authenticator and the LoginID server. This helps ensure that passkey information shown in the browser remains up-to-date, including helping remove revoked or stale passkeys from the user's authenticator.

Make sure to include the autocomplete attribute to the username input field with the value "username webauthn".

<form>
  <label for="username">Email:</label>
  <input
    type="email"
    id="username"
    name="username"
    autocomplete="username webauthn"
    autofocus
    required
  />
  <button type="submit">Sign In With Your Passkey</button>
</form>

To initiate passkey autofill call authenticateWithPasskeyAutofill() during component or page load.

Customer Dashboard

Here’s an example of how this looks in React using the useEffect hook.

import { LoginIDWebSDK, PasskeyError } from "@loginid/websdk3";

// Initialize the SDK with your configuration
const config = {
  baseUrl: process.env.BASE_URL,
};

const lid = new LoginIDWebSDK(config);

/*
 * Setting up conditional UI and passkey login
 */
const Login: React.FC = () => {
  const [username, setUsername] = useState<string>("");
  const [error, setError] = useState<string>("");

  // Start autofill
  useEffect(() => {
    const conditionalUI = async () => {
      try {
        const { token } = await lid.authenticateWithPasskeyAutofill();

        // Submit token to the server.
      } catch (e) {

        // Autofill flow is expected to abort if the user interacts with
        // the manual passkey login instead
        if (e instanceof PasskeyError && e.code === "ERROR_PASSKEY_ABORTED") {
          return
        }

        if (e instanceof Error) {
          setError(e.message);
        }
      }
    };

    conditionalUI();
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const authResult = await lid.authenticateWithPasskey(username);

      if (authResult.isAuthenticated) {
        // You can return LoginID token to your backend for verification (authResult.token)

        setAuthUser(user);
      } else {
        // Default to your fallback CIAM authentication method
      }
    } catch (e) {
      if (e instanceof Error) {
        setError(e.message);
      }
    }
  };

  return (
    // This is a mini sample UI form
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Email:</label>
        <input
          type="email"
          id="username"
          name="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
          autocomplete="username webauthn"
          autofocus
        />
        <button>Sign In With Your Passkey</button>
      </div>
    </form>
  );
};

Once you have received the result LoginID token, you can send it to your backend, and verify it. For detailed technical instructions, refer to this section on verifying LoginID tokens.