JavaScript Navigator credentials Property

What You’ll Learn

navigator.credentials returns a CredentialsContainer — the Credential Management API entry point. Learn feature detection, secure context rules, get() / store() / preventSilentAccess(), five examples, and try-it labs.

Introduction

Modern browsers can help with sign-in: remember passwords, show an account chooser, and restore sessions more smoothly. The Credential Management API is how your page talks to that browser-managed credential store.

Your entry point is navigator.credentials. It is read-only and returns a CredentialsContainer with methods to request credentials and to notify the browser about successful sign-in or sign-out.

Understanding the credentials Property

Think of navigator.credentials as a handle to the browser’s credential manager for this document. You do not assign to it — you call methods on the object it returns.

• get(options) — request a credential (for example password or federated).
• store(credential) — ask the browser to save a credential after sign-in.
• create(options) — create credential objects (varies by credential type).
• preventSilentAccess() — after logout, stop automatic silent re-sign-in.

📝 Syntax

General form of the property:

navigator.credentials

Value

• A CredentialsContainer object associated with the current document.

Common patterns

// MDN feature detect + get:
if ("credentials" in navigator) {
  navigator.credentials.get({ password: true }).then((creds) => {
    // Use creds, or null if the user cancelled / none found
  });
} else {
  // Classic sign-in form
}

// After logout:
await navigator.credentials.preventSilentAccess();

Examples Gallery

Examples follow MDN Credential Management / navigator.credentials patterns. Prefer Try It Yourself over HTTPS. Use View Output for expected messaging.

const supported = "credentials" in navigator;
console.log(supported ? "credentials available" : "credentials missing");

credentials available
(on modern browsers in a secure context)

const lines = [
  "isSecureContext: " + window.isSecureContext,
  "credentials: " + (("credentials" in navigator) ? "present" : "absent")
];
console.log(lines.join("\n"));

isSecureContext: true
credentials: present

if (!("credentials" in navigator)) {
  console.log("unsupported");
} else {
  const c = navigator.credentials;
  const lines = [
    "type: " + (c && c.constructor && c.constructor.name),
    "get: " + (typeof c.get),
    "store: " + (typeof c.store),
    "preventSilentAccess: " + (typeof c.preventSilentAccess)
  ];
  console.log(lines.join("\n"));
}

type: CredentialsContainer
get: function
store: function
preventSilentAccess: function

async function tryGetPasswordCred() {
  if (!("credentials" in navigator)) {
    return "credentials unavailable";
  }
  try {
    const creds = await navigator.credentials.get({ password: true });
    if (!creds) {
      return "no credential returned (cancelled or none saved)";
    }
    return "got credential type: " + creds.type + ", id: " + creds.id;
  } catch (err) {
    return "get failed: " + err.name;
  }
}

// Call from a button click in Try It

no credential returned (cancelled or none saved)
(or a credential id/type when the user picks one)

async function onLogout() {
  if (!window.isSecureContext) {
    return { ok: false, reason: "insecure-context" };
  }
  if (!("credentials" in navigator)) {
    return { ok: false, reason: "unsupported" };
  }
  try {
    await navigator.credentials.preventSilentAccess();
    return { ok: true, reason: "silent-access-prevented" };
  } catch (err) {
    return { ok: false, reason: err.name };
  }
}

// Call from a Logout button in Try It

{"ok":true,"reason":"silent-access-prevented"}
(after clicking Logout in Try It)

🚀 Common Use Cases

• One-tap return visits — get() stored password or federated credentials.
• Save after login — store() so the browser remembers the account.
• Clean logout — preventSilentAccess() after the user signs out.
• Passkeys / WebAuthn — related public-key flows also go through credential APIs (advanced).
• Progressive enhancement — keep a normal form; upgrade when credentials exists.

📝 Notes

• Baseline Widely available (MDN, since about September 2019).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Requires a secure context (HTTPS / localhost).
• Never log or display passwords from credential objects in real apps.
• Related: deviceMemory, Window, JavaScript hub.

💡 Best Practices