FedCM RP Demo - Metrics Endpoint

FedCM Metrics Endpoint Demo

If you don't see a sign-in dialog on top right corner, you need to sign-in on the IdP first by pressing the button below.

Goto the IdP and Sign in

What's this demo?

This demo shows how the metrics endpoint can help understand the performance of the FedCM UI. This page makes a call to the identity provider who specified a metrics_endpoint in the config file, and the metrics will be returned in the response to this endpoint.

Prerequisites

Use Chrome 144+ with the chrome://flags/#fedcm-metrics-endpoint flag enabled.

How to implement

Identity provider should specify the metrics_endpoint in the config file and the browser will return the metrics.

// In IdP config file (fedcm-response-metric.json)
{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "disconnect_endpoint": "/auth/disconnect",
  "metrics_endpoint": "/auth/metrics",
  "login_url": "/"
}

// Calling FedCM with fedcm-response-metric.json:
const nonce = document.querySelector('meta[name="nonce"]')?.content;
const {token} = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://fedcm-demo-idp.dev/fedcm-response-metric.json",
      clientId: "https://fedcm-demo-rp.dev",
      params: { nonce },
    }]
  }
});