Federated Credential Management (FedCM)

The Federated Credential Management API lets a relying party ask the browser to mediate sign-in with an identity provider. The relying party calls navigator.credentials.get() with an identity request, and a successful request returns an IdentityCredential carrying the provider’s token (FedCM API, W3C).

Support

BCD records IdentityCredential from Chrome 108 and mirrors support to Chrome for Android and Edge. Opera and Samsung Internet are also recorded, along with Meta Quest Browser. It records no support in Firefox or Safari; Android WebView is likewise unsupported, so FedCM is not Baseline (BCD api.IdentityCredential; FedCM API, MDN).

Syntax

const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://idp.example/fedcm.json',
      clientId: 'rp-client-id',
    }],
  },
});

The browser fetches the provider configuration and related identity-provider endpoints, mediates its account UI, and returns the credential to the relying party. FedCM is a secure-context API exposed on Window through the Credential Management API.

Parameters

identity.providers is a sequence of provider configurations. The core fields used by the W3C example are configURL, which identifies the provider configuration, and clientId, which identifies the relying party to that provider. The request can also carry provider-defined values such as nonce and loginHint, as well as domainHint, as documented by the specification.

The returned IdentityCredential has a token supplied by the identity provider. The specification defines isAutoSelected to report whether the browser automatically selected the credential during the UI flow.

Exceptions

• A document blocked by the identity-credentials-get Permissions Policy receives a promise rejected with NotAllowedError. The feature’s default allowlist is self; a cross-origin iframe needs an explicit allow="identity-credentials-get" grant (Permissions Policy integration, W3C).
• The specification maps provider-fetch failures and a missing eligible account to NetworkError. A request blocked by identity-credentials-get instead rejects with NotAllowedError, while an invalid configURL rejects with InvalidStateError (Create an IdentityCredential, W3C).
• FedCM needs identity-provider support, so a relying party cannot deploy it independently. The example below reveals a link to the site’s existing sign-in route in unsupported browsers.

Warning

Chromium rejects a concurrent FedCM request with NotAllowedError: Only one navigator.credentials.get request may be outstanding at one time. The exact string is defined in Chromium’s authentication_credentials_container.cc (chromium.googlesource.com).

Examples

The example starts FedCM from a sign-in button and keeps an ordinary link as its fallback.

Requesting a credential with a fallback

Test both the Credential Management container and IdentityCredential. If either is absent, or if the mediated request does not return a token, continue through the site’s existing sign-in route.

<button id="federated-sign-in" type="button">Sign in with your identity provider</button>
<a id="sign-in-fallback" href="/sign-in" hidden>Use the standard sign-in page</a>
<p id="sign-in-status" role="status"></p>

<script type="module">
const button = document.querySelector('#federated-sign-in');
const fallback = document.querySelector('#sign-in-fallback');
const status = document.querySelector('#sign-in-status');

function useFallback(message) {
  status.textContent = message;
  fallback.hidden = false;
}

async function sendTokenToServer(token) {
  const response = await fetch('/session/fedcm', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token }),
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
}

async function signIn() {
  if (!('credentials' in navigator) || !('IdentityCredential' in window)) {
    useFallback('FedCM is unavailable. Use the standard sign-in page.');
    return;
  }

  try {
    const credential = await navigator.credentials.get({
      identity: {
        providers: [{
          configURL: 'https://idp.example/fedcm.json',
          clientId: 'rp-client-id',
        }],
      },
    });

    if (!credential?.token) {
      useFallback('No credential was returned. Use the standard sign-in page.');
      return;
    }
    await sendTokenToServer(credential.token);
    status.textContent = 'The credential was sent to the server.';
  } catch (error) {
    useFallback(`FedCM did not complete: ${error.name}`);
  }
}

button.addEventListener('click', signIn);
</script>

The example defines every referenced element and helper. Replace the provider configuration and client ID with values from the relying party and identity provider. Replace the fallback URL and /session/fedcm endpoint as well. Send the opaque token to the relying party’s server for validation. Do not treat the presence of IdentityCredential as proof that a particular provider is configured or that the request will succeed.

Keeping the fallback reachable

The unsupported, missing-token, and rejected-request branches all call useFallback(), which reveals the ordinary /sign-in link shown in the example.

See also

• Credential Management API
• WebAuthn and passkeys
• Storage Access API
• Federated Credential Management API (w3.org)
• Federated Credential Management API (MDN)

Specifications

Specification	Status
Federated Credential Management API: Browser API	W3C