Multi-IdP FedCM Sample Login Page (Google + Meta/Facebook)

This repository contains a sample Relying Party (RP) login page that integrates Google Identity Services (GIS) and Meta (Facebook) JavaScript SDK to showcase Multi-IdP Federated Credential Management (FedCM) with Active Mode (mode: "active") support.

---

Key Highlights

• ⚡ Single FedCM API Call with Multiple IdPs: Executes a single navigator.credentials.get({ identity: { providers: [...], mode: "active" }, signal: controller.signal }) call passing both Google and Meta IdP configuration objects.
• 🎯 FedCM Active Mode (mode: "active"): When users click the "Sign in with Google" or "Continue with Facebook" buttons, FedCM is called with mode: "active" to trigger the modal user-initiated login flow.
• 🛑 Abort Signal Support: Includes an Abort Request button that uses AbortController.abort() to programmatically cancel active FedCM prompts.
• 🌐 Meta (Facebook) FedCM Endpoint: Uses https://www.facebook.com/fed_cm/config.json as the Facebook FedCM provider configuration URL.
• 🎛️ Multi-IdP Controls: Configure Google Client ID and Meta App ID independently (default: "fake_client_id"), or toggle individual IdPs to test single vs. multi-provider prompt UIs.
• 📊 Realtime Output Console: Monitors single FedCM invocation, provider routing based on credential.configURL, token parsing, and prompt lifetime events.

---

Active Mode Implementation Snippet

// Trigger Active Mode FedCM on explicit user button click
async function onSignInButtonClick(provider) {
  const credential = await navigator.credentials.get({
    identity: {
      providers: [
        {
          configURL: 'https://accounts.google.com/gsi/fedcm.json',
          clientId: 'fake_client_id'
        },
        {
          configURL: 'https://www.facebook.com/fed_cm/config.json',
          clientId: 'fake_client_id'
        }
      ],
      mode: 'active' // Triggers explicit Active Mode flow
    },
    signal: abortController.signal
  });
}

---

Running the App

Start the server using Python 3:

python3 -m http.server 8080 --bind 127.0.0.1

Or using Node.js:

node server.js

Open http://localhost:8080 in Chrome 136+ to test Active Mode FedCM button interactions.