Ask for the claims you need.

https://mimi.ke/.well-known/openid-configuration

GET /authorize
  ?client_id=<your-client-id>
  &response_type=code
  &redirect_uri=https%3A%2F%2Fbank.example%2Fauth%2Fmimi%2Fcallback
  &scope=openid%20email%20profile
  &state=<random>
  &nonce=<random>
  &code_challenge=<S256 of your verifier>
  &code_challenge_method=S256
  &claims=%7B%22userinfo%22%3A%7B%22email%22%3A%7B%22essential%22%3Atrue%7D%7D%7D

# the claims parameter, decoded:
{ "userinfo": { "email": { "essential": true } } }

// mimi-quickstart.mjs — Node 20+, no dependencies. Run: node mimi-quickstart.mjs
// Placeholders only. Never commit a client secret; read it from the environment.
import crypto from "node:crypto"
import http from "node:http"

const ISSUER        = process.env.MIMI_ISSUER    ?? "https://mimi.ke"
const CLIENT_ID     = process.env.CLIENT_ID      ?? "<your-client-id>"
const CLIENT_SECRET = process.env.CLIENT_SECRET  ?? "<your-client-secret>"
const REDIRECT_URI  = "http://localhost:8787/callback"   // must be registered EXACTLY

// 1. Discovery. Read every endpoint from here — never hardcode them.
const conf = await fetch(`${ISSUER}/.well-known/openid-configuration`).then((r) => r.json())

// 2. PKCE + anti-forgery values. MIMI requires PKCE of every client.
const b64url    = (b) => b.toString("base64url")
const verifier  = b64url(crypto.randomBytes(32))
const challenge = b64url(crypto.createHash("sha256").update(verifier).digest())
const state     = b64url(crypto.randomBytes(16))
const nonce     = b64url(crypto.randomBytes(16))

const authUrl = new URL(conf.authorization_endpoint)
authUrl.search = new URLSearchParams({
  client_id: CLIENT_ID,
  response_type: "code",
  redirect_uri: REDIRECT_URI,
  scope: "openid email profile",
  state,
  nonce,
  code_challenge: challenge,
  code_challenge_method: "S256",
}).toString()

console.log("\nOpen this in a browser:\n" + authUrl + "\n")

// 3. Catch the redirect back, exchange the code, read the claims.
http
  .createServer(async (req, res) => {
    const url = new URL(req.url, REDIRECT_URI)
    if (url.pathname !== "/callback") return res.writeHead(404).end()

    const err = url.searchParams.get("error")
    if (err) {
      // Errors MIMI can redirect arrive here with the state you sent.
      console.error("authorization failed:", err, url.searchParams.get("error_description") ?? "")
      res.end("Failed — see the console.")
      return process.exit(1)
    }
    // Reject a response that is not the one you started. Non-negotiable.
    if (url.searchParams.get("state") !== state) {
      res.end("state mismatch")
      return process.exit(1)
    }

    const basic = Buffer.from(
      `${encodeURIComponent(CLIENT_ID)}:${encodeURIComponent(CLIENT_SECRET)}`,
    ).toString("base64")

    const tokens = await fetch(conf.token_endpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `Basic ${basic}`,          // client_secret_basic
      },
      body: new URLSearchParams({
        grant_type: "authorization_code",
        code: url.searchParams.get("code"),
        redirect_uri: REDIRECT_URI,
        code_verifier: verifier,                  // the other half of the PKCE pair
      }),
    }).then((r) => r.json())

    // In production, VALIDATE the id_token — signature against ${ISSUER}/jwks,
    // then iss / aud / exp / nonce. Use a library (openid-client, jose); do not
    // hand-roll it, and do not trust an unvalidated token because /userinfo
    // agreed with it.
    const claims = await fetch(conf.userinfo_endpoint, {
      headers: { Authorization: `Bearer ${tokens.access_token}` },
    }).then((r) => r.json())

    console.log("\nclaims:", claims)
    res.end("Signed in. You can close this tab.")
    process.exit(0)
  })
  .listen(8787)

GET /userinfo            Authorization: Bearer <access token>

200 OK
{
  "sub":   "a3f1c8b2-4d90-4a11-9f3e-0b2c7d5e9c02",
  "email": "amina@example.com",
  "name":  "Amina W. Kariuki"
}

GET /userinfo            Authorization: Bearer <access token>

200 OK
{
  "sub": "a3f1c8b2-…-9c02",
  "verified_claims": {
    "verification": {
      "trust_framework": "ke_mimi",
      "time": "2026-08-14T09:12:00Z",
      "evidence": [
        { "type": "document",  "document_type": "ke_national_id" },
        { "type": "biometric", "method": "face_match" }
      ]
    },
    "claims": {
      "given_name":  "Amina",
      "family_name": "Kariuki",
      "birthdate":   "1994-03-08"
    }
  }
}

<!-- point href at your own route that starts the OIDC redirect -->
<a class="mimi-button" href="#">
  <svg class="mimi-button__mark" viewBox="0 0 256 256" fill="none"
       stroke-width="16" stroke-linecap="round" stroke-linejoin="round"
       aria-hidden="true" focusable="false">
    <polyline points="48 88 48 48 88 48" />
    <polyline points="168 48 208 48 208 88" />
    <polyline points="208 168 208 208 168 208" />
    <polyline points="88 208 48 208 48 168" />
    <circle cx="128" cy="128" r="32" />
  </svg>
  Continue with MIMI
</a>

/* "Continue with MIMI" — drop into your own stylesheet.
   Values from the MIMI button spec: 60px tall, full pill, 18px padding,
   12px gap, 24px mark, 17px/600 label. */
.mimi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;              /* the spec draws it full-width in the host card */
  min-height: 60px;
  padding: 18px;
  border: 0;
  border-radius: 999px;
  background: #0F172A;
  color: #FFFFFF;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}

.mimi-button__mark { flex: 0 0 auto; width: 24px; height: 24px; display: block; }
.mimi-button__mark path,
.mimi-button__mark circle,
.mimi-button__mark polyline { stroke: #04D56D; }

/* On a dark surface (#07101F and similar): invert the pill, deepen the mark. */
.mimi-button--on-dark { background: #FFFFFF; color: #0F172A; }
.mimi-button--on-dark .mimi-button__mark path,
.mimi-button--on-dark .mimi-button__mark circle,
.mimi-button--on-dark .mimi-button__mark polyline { stroke: #0B7A42; }

/* Pressed: darken 8%. No scale, no bounce. */
.mimi-button:active { filter: brightness(0.92); }

/* NOT in the spec — added because a keyboard user must be able to see focus,
   and no focus treatment is drawn on the board. Restyle it to match your own
   focus language if you have one; do not remove it. */
.mimi-button:focus-visible { outline: 3px solid #04D56D; outline-offset: 3px; }

/* Redirecting: the label becomes "Taking you to MIMI", the mark spins, the
   button stays put. Add the class when you start the redirect. */
.mimi-button.is-redirecting .mimi-button__mark { animation: mimi-spin 1s linear infinite; }
@keyframes mimi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mimi-button.is-redirecting .mimi-button__mark { animation: none; }
}

/* Unavailable is NOT a disabled state. If MIMI cannot be reached, remove the
   button and fall through to your own form. Never show a dead MIMI button. */

// The board's "Redirecting" state: label swap + spinning mark, button in place.
document.querySelector(".mimi-button")?.addEventListener("click", (e) => {
  const el = e.currentTarget
  el.classList.add("is-redirecting")
  el.lastChild.textContent = " Taking you to MIMI "
})