# Federated Credential Management (FedCM)

> How a relying party requests an IdentityCredential through FedCM, detects support, handles policy and request failures, and keeps a fallback sign-in path.

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](https://www.w3.org/TR/fedcm/), 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](https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API), MDN).

## Syntax

```js
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](https://www.w3.org/TR/fedcm/#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](https://www.w3.org/TR/fedcm/#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.

:::caution
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`](https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/modules/credentialmanagement/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.

```html
<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](/reference/capabilities/credential-management/)
- [WebAuthn and passkeys](/reference/capabilities/webauthn-passkeys/)
- [Storage Access API](/reference/storage/storage-access-api/)
- [Federated Credential Management API](https://www.w3.org/TR/fedcm/) (w3.org)
- [Federated Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API) (MDN)