Credential Management API: Store and Auto-Fill in JS

The Credential Management API is a standard browser interface that allows web applications to interact directly with the browser’s built-in password manager. Through JavaScript, developers can programmatically store, retrieve, and auto-fill credentials—including traditional username/password pairs, federated identity tokens, and public keys—without relying solely on basic HTML form heuristics. This creates a frictionless authentication flow, enabling one-tap sign-ins, automatic re-authentication, and secure credential storage.

The navigator.credentials Interface

The API is accessed through navigator.credentials, which exposes key asynchronous methods to handle authentication lifecycle events:

• navigator.credentials.store(): Saves new or updated credentials to the browser’s secure store.
• navigator.credentials.get(): Retrieves stored credentials to populate forms or trigger automatic login.
• navigator.credentials.preventSilentAccess(): Disables automatic sign-in, typically called during user logout to prevent immediate re-authentication.

Storing Credentials

To save credentials after a successful registration or login, instantiate a credential object (such as PasswordCredential) and pass it to navigator.credentials.store(). The browser will prompt the user to save or update the password in their password manager.

// Capturing credentials from an existing HTML form element
const form = document.querySelector('#login-form');
const cred = new PasswordCredential(form);

// Alternatively, creating a credential programmatically:
// const cred = new PasswordCredential({
//   id: 'user@example.com',
//   password: 'SecretPassword123',
//   name: 'Jane Doe'
// });

navigator.credentials.store(cred)
  .then(() => {
    console.log('Credentials successfully stored.');
  })
  .catch((err) => {
    console.error('Error storing credentials:', err);
  });

Retrieving and Auto-Filling Credentials

To auto-fill forms or execute an automatic sign-in, use navigator.credentials.get(). This method queries the browser’s credential store based on specified parameters.

navigator.credentials.get({
  password: true,
  mediation: 'optional' // Options: 'silent', 'optional', 'required', 'conditional'
})
.then((credential) => {
  if (credential) {
    // Populate form fields or send directly to the authentication server
    document.querySelector('#username').value = credential.id;
    document.querySelector('#password').value = credential.password;

    // Optional: submit the login payload automatically via fetch
    loginUser(credential.id, credential.password);
  }
})
.catch((err) => {
  console.error('Error retrieving credentials:', err);
});

Mediation Modes for Auto-Fill

The mediation option in .get() controls the level of user interaction required:

• silent: Retrieves credentials only if no user interaction is needed (e.g., exactly one saved credential exists and automatic sign-in is allowed). If interaction is needed, the promise resolves to null.
• optional: Attempts a silent sign-in; if ambiguous, displays the browser’s account chooser UI.
• required: Always forces the user to explicitly select an account from the browser UI, even if only one account exists.
• conditional: Integrates with the browser’s form autofill suggestions, displaying credentials inside input dropdowns when the user focuses on form fields.

Handling User Logout

When a user explicitly logs out, calling preventSilentAccess() ensures they are not automatically logged back in the next time they visit the page.

function handleLogout() {
  navigator.credentials.preventSilentAccess().then(() => {
    // Proceed with server-side session termination
    window.location.href = '/login';
  });
}

By coordinating store(), get(), and preventSilentAccess(), web applications can deliver native-like auto-fill and persistent session management while keeping sensitive authentication data secured inside the browser’s credential store.