Facebook Login with FedCM

• The browser shows a native credential picker instead of a popup window.
• Returning users can sign in with one tap, or automatically on page load when auto-prompting is enabled.
• The SDK falls back to the standard OAuth popup on browsers without FedCM support, or when the user is not logged into Facebook.
• Your existing FB.login() calls, permission scopes, callback handling, and access tokens work unchanged.

 
 
<script async defer crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js"></script>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'YOUR_APP_ID',
      fedCM: { autoPrompt: true },
      cookie: true,
      xfbml: true,
      version: 'v22.0'
    });
  };
</script>
 
 

 FB.login(function(response) {
  if (response.status === 'connected') {
    console.log('Logged in:', response.authResponse);
    // response.authResponse contains:
    //   accessToken
    //   userID
    //   expiresIn
  }
}, { scope: 'public_profile,email' }); 

 FB.init({
    appId: 'YOUR_APP_ID',
+   fedCM: { autoPrompt: true },
    cookie: true,
    xfbml: true,
    version: 'v22.0'
  }); 

• Audit all auth.statusChange listeners for compatibility with auto-prompting.
• Test your error handling for the {status: 'unknown'} dismissal case described in Fallback and dismissal behavior .
• Confirm token handling works with FedCM-issued tokens. The authResponse format is identical to OAuth, including accessToken , userID , and expiresIn .
• Test the fallback path on Safari, Firefox, and older Chrome versions.
• Confirm behavior in any iframe or embedded contexts. FedCM requires allow="identity-credentials-get" on cross-origin iframes.

 FB.init({
  appId: 'YOUR_APP_ID',
  fedCM: { autoPrompt: true },
  version: 'v22.0'
}); 

 FB.init({
  appId: 'YOUR_APP_ID',
  fedCM: { context: 'signup' },
  version: 'v22.0'
}); 

 FB.init({
  appId: 'YOUR_APP_ID',
  fedCM: {
    autoPrompt: true,
    context: 'signin'
  },
  version: 'v22.0'
}); 

 FB.login(function(response) {
  if (response.status === 'connected') {
    // Signed in
  } else if (response.status === 'unknown') {
    // User dismissed the FedCM prompt — show your own retry UI if desired
  }
}, { scope: 'public_profile,email' }); 

 // 1. Get Facebook's provider config
const fbProvider = FB.FedCM.getProviderConfig({
  scope: 'public_profile,email'
});

// 2. Pass it alongside other providers in a single navigator.credentials.get() call
const credential = await navigator.credentials.get({
  identity: {
    providers: [fbProvider, googleProvider]
  }
});

// 3. Route the result back through the SDK
const authResponse = FB.FedCM.processCredential(credential); 

• Verify your page is served over HTTPS.
• Confirm the user is logged into Facebook in the same browser.
• If your login flow runs inside an iframe, set allow="identity-credentials-get" on the iframe element.
• For active mode, ensure FB.login() is called inside a user gesture handler such as a button click.
• The browser may be in a cooldown period after a previous dismissal. Wait or clear site data.
• Open Chrome DevTools → Application→ Federated Credential Managementto inspect FedCM state.

• The user must have previously signed in to your site with Facebook.
• Browsers throttle auto-prompts that have been shown and dismissed recently.
• Only one IdP can have an active FedCM call per page at a time.
• Verify you are on Chrome 131 or later. Auto-prompting is not available on Chrome 108–130.

• Open DevTools → Networkand look for a request to facebook.com/fed_cm/config.json .
• If you see a popup window open instead, FedCM is not active — check browser version and HTTPS.

 GET https://www.facebook.com/.well-known/web-identity 

 
 
{
  "provider_urls": ["https://www.facebook.com/fed_cm/config.json"]
}
 
 

 GET https://www.facebook.com/fed_cm/config.json 

 
 
{
  "accounts_endpoint": "/fed_cm/accounts",
  "client_metadata_endpoint": "/fed_cm/client-metadata",
  "id_assertion_endpoint": "/fed_cm/assertion",
  "login_url": "/login/",
  "branding": {
    "background_color": "#1877F2",
    "color": "#FFFFFF",
    "icons": [{ "url": "...", "size": 32 }]
  }
}
 
 

 GET https://www.facebook.com/fed_cm/accounts
Sec-Fetch-Dest: webidentity
Cookie: [user's facebook.com session cookies] 

 POST https://www.facebook.com/fed_cm/assertion
Sec-Fetch-Dest: webidentity
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_APP_ID&account_id=USER_ID&nonce=...&scope=public_profile,email 

 const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://www.facebook.com/fed_cm/config.json',
      clientId: 'YOUR_APP_ID'
    }]
  }
});
const token = credential.token; // Facebook OAuth access token 

• The accounts request omits Referer and Origin , so Facebook cannot identify the requesting site until the user explicitly consents.
• Authentication uses first-party facebook.com cookies only — no third-party cookies are set on your domain.
• The user must explicitly choose to share their identity in the browser’s native UI. There is no silent or passive tracking.

1. Use Chrome 131 or later with HTTPS — localhost with a self-signed certificate works.
2. Enable FedCM in your FB.init() call.
3. Open Chrome DevTools → Application→ Federated Credential Managementto inspect FedCM state.

• Broader browser coverage as Firefox and Safari implement the specification.
• Multi-IdP coordination improvements for sites that offer Facebook and other social logins.
• Adoption and conversion analytics in App Dashboard.
• Disconnect API support so users can revoke consent through browser settings.
• Facebook Login for Business compatibility.

• Chrome FedCM documentation ⁠
• Facebook Developer Community Forum
• Bug Report tool