Sign in with a provider

A minimal page with one button per configured identity provider: Continue with Google, Continue with Microsoft, Continue with Apple. It exists to exercise the provider sign-in flow end to end — sign-up on first sign-in, linking by verified email, linking and unlinking providers on a signed-in account — against real providers, guided by the checklist in design/identity-providers-testing.md.

The configuration is the idtest realm in examples/config/idtest. The application is in clients/js/examples/providers.

Configure it#

Unlike the other examples, this one does nothing until you register OAuth applications in the providers’ consoles and fill the placeholders of examples/config/idtest/realm.yaml: the file documents, field by field, what each console calls it. Secrets never go in the file; set them on the running server:

backd login --realm idtest --url "$BACKD_URL" --email <admin email>
printf '%s\n' "$GOOGLE_SECRET"    | backd secret set --realm idtest --name GOOGLE_CLIENT_SECRET
printf '%s\n' "$MICROSOFT_SECRET" | backd secret set --realm idtest --name MICROSOFT_CLIENT_SECRET
backd secret set --realm idtest --name APPLE_SIGN_IN_KEY < AuthKey_<KEYID>.p8

The callback to register in each console is {BACKD_URL}/v1/idtest/_auth/oauth/<provider>/callback, printed by backd at startup. sign_in.allowed_redirects must list the origin the app is reached at — https://localhost:8443 is already there.

With placeholders left in place the realm still loads — backd warns that a provider’s secrets are not set — and each button fails at the provider with provider_unavailable, so you can wire providers in one at a time.

Try it#

make example

Open https://localhost:8443/example/providers/ and press a provider button: the browser goes to the provider and comes back to the page, which redeems the one-time code for a session and shows the result — a welcome line on the first sign-in, “Signed in” after that, or a readable message for every ?backd_error= outcome (cancelled, account_exists, link_conflict, …). Signed in, the page lists the account’s sign-in methods (provider, address, verified, when it was linked and last used), removes any but the last, and links another provider to the same account.

The app is plain JavaScript with Alpine.js and the JavaScript client, with no build step:

native_client_ids (Google, Microsoft) and bundle_ids (Apple) are only needed for native apps using the ID-token sign-in; this example uses the redirect flow and leaves them empty.