FedCm

@inject Bit.Butil.FedCm fedCm
@inject HttpClient http

<button @onclick="SignIn">Sign in</button>

@code {
    private async Task SignIn()
    {
        // The nonce belongs to the server: it is what proves the token came back from a sign-in
        // this backend started, rather than being replayed from another one.
        var nonce = await http.GetStringAsync("/api/auth/nonce");

        var credential = await fedCm.Get(new FedCmOptions
        {
            Providers =
            [
                new FedCmProvider
                {
                    ConfigUrl = "https://idp.example/fedcm.json",
                    ClientId = "your-client-id",
                    Nonce = nonce,
                    Fields = ["name", "email", "picture"]
                }
            ],
            Context = "signin",
            Mediation = CredentialMediation.Optional
        });

        // null when the user dismissed the dialog, or no account was found.
        if (credential is null) return;

        // Reading the token in the browser proves nothing - the backend validates the signature,
        // the issuer, the audience and the nonce it generated.
        await http.PostAsJsonAsync("/api/auth/fedcm", new { credential.Token });
    }
}

{
  "//": "Served by the identity provider at the root of its eTLD+1, not by your app. Without it the",
  "//2": "browser refuses to fetch the config below, and Get returns null with nothing to debug.",
  "provider_urls": ["https://idp.example/fedcm.json"]
}

{
  "//": "The config file ConfigUrl points at. Every URL here is same-origin with the config itself.",
  "accounts_endpoint": "/fedcm/accounts",
  "client_metadata_endpoint": "/fedcm/client-metadata",
  "id_assertion_endpoint": "/fedcm/assertion",
  "login_url": "/login",
  "branding": {
    "background_color": "#0f6cbd",
    "color": "#ffffff",
    "icons": [{ "url": "https://idp.example/icon.png", "size": 40 }]
  }
}