Google

October 17 2023

FedCM: road to multi IdP support

Nicolás Peña Moreno

Zachary Tan

BlinkOn 18

Third-party cookies being phased out

Federated login via iframe

BlinkOn 18

Federated Credential Management (FedCM) API

Lack of multiple identity provider support

End goal

Current API shape

let token = await navigator.credentials.get({

identity: {

providers: [{

configURL: "https://idp.example/manifest.json",

clientId: "123",

nonce: nonce

}]

}

});

​

Problem

• We want to allow IdPs to work independently. RPs should be able to just embed SDKs of different IdPs.
• This means it would be hard for IdPs to all be included in the same get() call. But if we wait for ‘all’ get() calls, how do we ensure all IdPs are shown in the FedCM UI?
• RPs may also have a preference for an IdP even when they support more than one.

Solution 1: array of providers

• Force all IdPs to be in the same get() call (accept only an array of providers)

const token = await navigator.credentials.get({

identity: {

providers: [ // all IDPs are specified in this array

{

configUrl: "https://idp1.com/foo.json", // first IDP

clientId: "123",

},

{

configUrl: "https://idp2.com/bar.json", // second IDP

clientId: "456",

}

]

}

});

​

Solution 2: wait until a certain point in time

• Allow multiple get() calls, but wait before showing the FedCM UI (for instance, wait until onload)

RP specified ordering

• Order in which IdPs are mentioned in array (applies to solution 1)
• New JS method to state ordering
• Order in which RP embeds IdP SDKs
• Order in which IdPs return accounts (performance based: no RP control)

Solution 3: dynamically update the UI

• Show accounts as they are received

Solution 4: IdP registration

• IdP invokes a method to notify the user agent that it will invoke FedCM

# First IdP

IdentityProvider.register(� “https://idp1.example/”);

…

​

let token = await navigator.credentials.get({

identity: {

providers: [{

configURL: "https://idp1.config",

clientId: "123",

nonce: nonce1

}]}});�

# Second IdP

IdentityProvider.register(� “https://idp2.example/”);�…

let token = await navigator.credentials.get({

identity: {

providers: [{

configURL: "https://idp2.config",

clientId: "456",

nonce: nonce2

}]}});

Solution 5: IdP registration

• IdP invokes a method to notify the user agent that it will invoke FedCM
• RP invokes get() once it knows IdPs have registered

# First IdP

IdentityProvider.register(� “https://idp1.example/”);

…

​

# Second IdP

IdentityProvider.register(� “https://idp2.example/”);�…

�

# RP code after loading IdP SDKs

let token = await navigator.credentials.get({

identity: {

providers: "registered"

}]}});

Brainstorm time!