How to Inspect and Debug FedCM in Google Chrome DevTools

With major web browsers phasing out third-party cookies and restricting bounce tracking, federated identity login flows (such as “Sign in with Google” or single sign-on providers) are migrating to modern browser-mediated standards. The Federated Credential Management (FedCM) API allows Identity Providers (IdPs) to authenticate users on Relying Party (RP) websites without relying on third-party cookies, cross-site iframes, or unconstrained redirects. In Google Chrome, DevTools includes dedicated inspection panels and diagnostic emulation tools specifically tailored for testing FedCM implementations, debugging IdP configuration endpoints, and validating sign-in dialogues.

Understanding the FedCM Architecture

Traditional federated authentication mechanisms historically embedded hidden third-party iframes or used redirect trampolines that read cookies across origins. Because these techniques can also facilitate covert cross-site tracking, privacy initiatives are deprecating them across the modern web platform.

FedCM shifts authentication mediation directly into the browser user agent. When a Relying Party initiates authentication via navigator.credentials.get({identity: {...}}), the browser directly orchestrates communication with the IdP through three standardized HTTP endpoints:

• Manifest / Config URL: A JSON file (for example, /fedcm.json) detailing the IdP’s metadata, branding icons, and accounts endpoint URLs.
• Accounts Endpoint: Returns the user’s active login accounts and profile tokens from the IdP.
• ID Token Endpoint: Issues the final signed JWT or authentication credential once the user selects their account in the native browser prompt.

Because the browser presents the sign-in modal rather than an in-page DOM element, developers require Chrome DevTools to inspect network payloads, audit CORS violations, and simulate user interactions.

Enabling the FedCM Diagnostic Panel in Chrome DevTools

To inspect FedCM exchanges, launch Google Chrome and open the webpage implementing your Relying Party sign-in flow. Open DevTools by pressing F12 (or Ctrl + Shift + I on Windows / Command + Option + I on macOS).

To access the dedicated FedCM inspection interface:

1. Click the Customize and control DevTools (three vertical dots) menu in the top-right corner of DevTools.
2. Navigate to More tools and select Application.
3. In the left sidebar of the Application panel, scroll down to the Identity or Background services section and select FedCM.

If the panel is not immediately visible, ensure Chrome is updated to the latest stable version and that third-party cookie phase-out simulation flags are active under chrome://flags/#fedcm.

Inspecting FedCM Manifest and Configuration Requests

When an RP page triggers a FedCM request, Chrome fetches the IdP’s configuration manifest. If the manifest fails validation, the browser silently aborts without displaying a user prompt.

In the DevTools Network tab, filter requests by typing fedcm or inspecting Fetch/XHR streams. Look for the initial manifest request:

GET /fedcm.json HTTP/1.1
Host: idp.example.com
Sec-Fetch-Dest: webidentity

Verify that your Identity Provider returns the correct Content-Type: application/json header along with properly formed endpoint pointers:

{
  "accounts_endpoint": "/api/fedcm/accounts",
  "client_metadata_endpoint": "/api/fedcm/client_metadata",
  "id_assertion_endpoint": "/api/fedcm/assertion",
  "login_url": "/login"
}

If the IdP fails to respond with a Sec-Fetch-Dest: webidentity header check or returns an unapproved CORS configuration, the Console panel will emit a detailed FedCM specification warning detailing the missing requirement.

Debugging Account Endpoints and Token Assertions

Once the manifest is validated, Chrome queries the accounts_endpoint to retrieve the user’s identity details. In the Application panel under FedCM, DevTools logs the exact payload processed by the browser.

Inspect the returned account object:

{
  "accounts": [
    {
      "id": "usr_98124",
      "name": "Jane Doe",
      "email": "[email protected]",
      "given_name": "Jane",
      "picture": "https://idp.example.com/avatar/jane.png",
      "approved_clients": ["123456789"]
    }
  ]
}

Common failures captured in the DevTools console at this stage include:

• Empty Accounts Array: If the user is logged out of the IdP, the endpoint must return an empty list or appropriate IdP-Sign-In-Status headers so Chrome can prompt the user to sign in to the IdP first.
• Avatar URL Security: Avatars served over unencrypted HTTP or origins lacking HTTPS will trigger CSP policy errors and fail account rendering.
• Approved Clients Mismatch: If the client ID does not match the RP’s requested ID, the browser suppresses the dialogue to protect user privacy.

Simulating Native Dialogues and User Decisions

During automated testing and continuous integration, waiting for manual clicks on browser UI modals is inefficient. Chrome DevTools Protocol (CDP) provides the FedCm domain, allowing developers and QA engineers to inspect and dismiss FedCM dialogues programmatically.

In DevTools Console, you can query whether a FedCM dialogue is currently open on the active tab using modern browser debugging flags or audit automated session state via Puppeteer/Selenium scripts that listen to FedCm.dialogShown events.

To reset local user permissions and force the browser to treat subsequent FedCM interactions as fresh initial sign-ins rather than returning auto-reauthentication sessions:

1. Open the Application panel.
2. Select Storage in the left pane.
3. Check Cookies, Site data, and click Clear site data for both the RP origin and IdP origin.

Validating Sign-In Status API Headers

To avoid redundant network round-trips when a user is not logged into an identity provider, FedCM uses the IdP Sign-in Status API. The IdP indicates its session state to the browser via HTTP headers.

Verify that your authentication endpoints send the proper status header upon login or logout:

Set-Login: logged-in

or when the user signs out:

Set-Login: logged-out

In Chrome DevTools, inspect the response headers of your authentication endpoints in the Network tab. If Chrome marks the IdP as logged-out, it immediately halts FedCM queries on third-party sites, saving battery, bandwidth, and preventing unnecessary tracking attempts.

By leveraging Chrome DevTools’ built-in FedCM diagnostic tools, developers can build smooth, cookie-less single sign-on flows that protect user privacy while ensuring reliable cross-site authentication.