OAuth & Social Login

import { CSS_RESET } from "@crvouga/mockingbird-ui"
import { type Context, Hono } from "hono"
import * as oauth from "oauth4webapi"
import { type BehaviorInput, OAuthAPI, type Provider } from "../../src/index.js"
import { escapeHtml } from "../../src/ui.js"
import { COOKIE_HEADERS, ORIGIN_HEADER } from "./transport.js"

export const APP = "https://app.example.test"
export const IDENTITY = "https://accounts.example.test"
export type Trace = { sequence: number; actor: string; method: string; url: string; status: number }
type Identity = { sub: string; name?: string; email?: string }
const callback = `${APP}/auth/callback`
const client = { client_id: "example-app" }
const secret = "example-only-client-secret"
export type ExampleProvider = Extract<Provider, "google" | "apple" | "microsoft" | "github">

/** A complete application server. Every outbound OAuth request uses the local dispatcher. */
export function createExample(
  behavior: BehaviorInput = {},
  onTrace: (entry: Trace) => void = () => {},
  providerProfile: ExampleProvider = "google",
) {
  const provider = new OAuthAPI({
    provider: providerProfile,
    cookieHeaders: COOKIE_HEADERS,
    issuer: IDENTITY,
    behavior,
    accounts: [
      {
        id: "ada",
        name: "Ada Lovelace",
        email: "ada@example.test",
        github: {
          id: 101,
          login: "ada",
          publicEmail: null,
          emails: [
            {
              email: "ada@example.test",
              primary: true,
              verified: true,
              visibility: "private",
            },
          ],
        },
      },
      {
        id: "grace",
        name: "Grace Hopper",
        email: "grace@example.test",
        github: {
          id: 102,
          login: "grace",
          publicEmail: "grace@example.test",
          emails: [
            {
              email: "grace@example.test",
              primary: true,
              verified: true,
              visibility: "public",
            },
          ],
        },
      },
    ],
    clients: [
      {
        id: client.client_id,
        name: "Example app",
        secret,
        redirectUris: [callback],
        requirePkce: true,
      },
    ],
  })
  const preferences = { reuseLastAccount: false }
  const app = new Hono()
  const pending = new Map<
    string,
    { state: string; nonce: string; verifier: string; expires: number }
  >()
  const sessions = new Map<string, { user: Identity; expires: number }>()
  let sequence = 0
  async function dispatch(request: Request, actor = "Browser"): Promise<Response> {
    const url = new URL(request.url)
    if (![APP, IDENTITY].includes(url.origin))
      throw new Error("This example only routes its two in-process origins.")
    const id = ++sequence
    const response = await (url.origin === APP ? app.fetch(request) : provider.fetch(request))
    onTrace({
      sequence: id,
      actor,
      method: request.method,
      url: `${url.host}${url.pathname}`,
      status: response.status,
    })
    return response
  }
  const options = {
    [oauth.customFetch]: (
      input: string,
      init: oauth.CustomFetchOptions<string, URLSearchParams | undefined>,
    ) =>
      dispatch(
        new Request(input, {
          method: init.method,
          headers: init.headers,
          ...(init.body ? { body: init.body } : {}),
        }),
        "Hono server",
      ),
  }
  let discovery: Promise<oauth.AuthorizationServer> | undefined
  const metadata = () =>
    (discovery ??=
      providerProfile === "github"
        ? Promise.resolve({
            issuer: IDENTITY,
            authorization_endpoint: `${IDENTITY}/login/oauth/authorize`,
            token_endpoint: `${IDENTITY}/login/oauth/access_token`,
            userinfo_endpoint: `${IDENTITY}/user`,
          })
        : oauth
            .discoveryRequest(new URL(IDENTITY), options)
            .then((response) => oauth.processDiscoveryResponse(new URL(IDENTITY), response)))
  const current = (cookie: string | undefined) => {
    const session = cookie ? sessions.get(cookie) : undefined
    return session && session.expires > Date.now() ? session.user : undefined
  }
  app.get("/", (c) => c.html(document(current(cookie(c, "session")))))
  app.get("/api/session", (c) => c.json({ user: current(cookie(c, "session")) ?? null }))
  app.get("/auth/start", async (c) => {
    const as = await metadata()
    const state = oauth.generateRandomState()
    const nonce = oauth.generateRandomNonce()
    const verifier = oauth.generateRandomCodeVerifier()
    const key = crypto.randomUUID()
    for (const [id, value] of pending) if (value.expires < Date.now()) pending.delete(id)
    pending.set(key, { state, nonce, verifier, expires: Date.now() + 600_000 })
    setCookie(c, "login", key, {
      httpOnly: true,
      secure: true,
      sameSite: "Lax",
      path: "/",
      maxAge: 600,
    })
    const url = new URL(as.authorization_endpoint ?? "")
    url.search = new URLSearchParams({
      client_id: client.client_id,
      redirect_uri: callback,
      response_type: "code",
      ...(!preferences.reuseLastAccount ? { prompt: "select_account" } : {}),
      scope:
        providerProfile === "apple"
          ? "openid email name"
          : providerProfile === "github"
            ? "read:user user:email"
            : "openid email profile",
      ...(providerProfile === "apple" ? { response_mode: "form_post" } : {}),
      state,
      nonce,
      code_challenge: await oauth.calculatePKCECodeChallenge(verifier),
      code_challenge_method: "S256",
    }).toString()
    return c.redirect(url.href)
  })
  const callbackHandler = async (c: Context) => {
    const key = cookie(c, "login") ?? ""
    const transaction = pending.get(key)
    pending.delete(key)
    deleteCookie(c, "login", { path: "/" })
    try {
      if (!transaction || transaction.expires < Date.now()) throw new Error("Login expired")
      const as = await metadata()
      const callbackUrl = new URL(c.req.url)
      let appleUser: { name?: { firstName?: string; lastName?: string }; email?: string } = {}
      if (c.req.method === "POST") {
        const form = new URLSearchParams(await c.req.text())
        for (const name of ["code", "state", "error", "error_description"])
          if (form.has(name)) callbackUrl.searchParams.set(name, form.get(name) ?? "")
        try {
          appleUser = JSON.parse(form.get("user") ?? "{}")
        } catch {
          appleUser = {}
        }
      }
      const params = oauth.validateAuthResponse(as, client, callbackUrl, transaction.state)
      const response = await oauth.authorizationCodeGrantRequest(
        as,
        client,
        oauth.ClientSecretPost(secret),
        params,
        callback,
        transaction.verifier,
        options,
      )
      const tokens = await oauth.processAuthorizationCodeResponse(
        as,
        client,
        response,
        providerProfile === "github"
          ? { requireIdToken: false }
          : { expectedNonce: transaction.nonce, requireIdToken: true },
      )
      if (providerProfile !== "github")
        await oauth.validateApplicationLevelSignature(as, response, options)
      const claims =
        providerProfile === "github" ? undefined : oauth.getValidatedIdTokenClaims(tokens)
      const user: Identity =
        providerProfile === "github"
          ? await githubIdentity(as, tokens.access_token)
          : providerProfile === "apple" && claims
            ? {
                sub: claims.sub,
                ...(typeof claims.email === "string" ? { email: claims.email } : {}),
                ...(appleUser.name
                  ? {
                      name: [appleUser.name.firstName, appleUser.name.lastName]
                        .filter(Boolean)
                        .join(" "),
                    }
                  : {}),
              }
            : claims
              ? await oauth.processUserInfoResponse(
                  as,
                  client,
                  claims.sub,
                  await oauth.userInfoRequest(as, client, tokens.access_token, options),
                )
              : (() => {
                  throw new Error("Missing identity")
                })()
      const session = crypto.randomUUID()
      sessions.set(session, {
        user: {
          sub: user.sub,
          ...(typeof user.name === "string" ? { name: user.name } : {}),
          ...(typeof user.email === "string" ? { email: user.email } : {}),
        },
        expires: Date.now() + 3600_000,
      })
      setCookie(c, "session", session, {
        httpOnly: true,
        secure: true,
        sameSite: "Lax",
        path: "/",
        maxAge: 3600,
      })
      return c.redirect("/")
    } catch {
      return c.html(
        document(
          undefined,
          "Sign-in could not be completed. Permission may have been declined, the provider may be unavailable, or the login may have expired. You can safely try again.",
        ),
        400,
      )
    }
  }

  async function githubIdentity(as: oauth.AuthorizationServer, accessToken: string) {
    const profileResponse = await oauth.userInfoRequest(as, client, accessToken, options)
    if (!profileResponse.ok) throw new Error("GitHub profile request failed")
    const profile = (await profileResponse.json()) as {
      id?: number
      name?: string | null
      login?: string
      email?: string | null
    }
    if (!Number.isSafeInteger(profile.id)) throw new Error("GitHub profile has no stable ID")
    let email = profile.email ?? undefined
    if (!email) {
      const emailResponse = await dispatch(
        new Request(`${IDENTITY}/user/emails`, {
          headers: { authorization: `Bearer ${accessToken}` },
        }),
        "Hono server",
      )
      const emails = emailResponse.ok
        ? ((await emailResponse.json()) as { email: string; primary: boolean; verified: boolean }[])
        : []
      email = emails.find((item) => item.primary && item.verified)?.email
    }
    return {
      sub: String(profile.id),
      ...(profile.name || profile.login ? { name: profile.name ?? profile.login } : {}),
      ...(email ? { email } : {}),
    }
  }
  app.get("/auth/callback", callbackHandler)
  app.post("/auth/callback", callbackHandler)
  app.post("/auth/logout", (c) => {
    if (c.req.header(ORIGIN_HEADER) !== APP) return c.text("Invalid origin", 403)
    sessions.delete(cookie(c, "session") ?? "")
    deleteCookie(c, "session", { path: "/" })
    return c.redirect("/", 303)
  })
  return { dispatch, app, provider, preferences, providerProfile }
}

function document(user?: Identity, error?: string) {
  const e = escapeHtml
  const account = user
    ? `<section class="card"><div class="row"><div><h1 tabindex="-1">Welcome, ${e(user.name?.split(" ")[0] ?? "friend")}.</h1><p>You are signed in.</p></div><form method="post" action="/auth/logout"><button type="submit">Sign out</button></form></div><dl><dt>Name</dt><dd>${e(user.name ?? "Name not shared")}</dd><dt>Email</dt><dd>${e(user.email ?? "Email not shared")}</dd><dt>Account ID</dt><dd>${e(user.sub)}</dd></dl></section>`
    : `<section class="card"><h1 tabindex="-1">Example app</h1><p>Sign in to continue.</p><a class="primary" href="/auth/start">Sign in</a></section>`
  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>Example app</title><style>
  :root{color-scheme:light dark;--bg:#fafafa;--card:#fff;--ink:#18181b;--muted:#62626b;--line:#dedee3;--accent:#27272a;--on:#fff}${CSS_RESET}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card);font-weight:600}main{max-width:560px;margin:0 auto;padding:32px 20px}h1{font-size:24px;font-weight:650;letter-spacing:0;margin:0 0 8px}p{margin:0 0 16px;color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px}.row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.primary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;background:var(--accent);color:var(--on);border-radius:8px;text-decoration:none;font-weight:600}button{font:inherit;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;min-height:36px;padding:0 12px;cursor:pointer}dl{margin:8px 0 0;font-size:13px}dt{color:var(--muted)}dd{margin:0 0 8px;overflow-wrap:anywhere}.notice{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:12px;color:var(--ink);margin:0 0 16px}:is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-color-scheme:dark){:root{--bg:#111113;--card:#19191c;--ink:#f4f4f5;--muted:#a9a9b2;--line:#36363c;--accent:#e4e4e7;--on:#18181b}}
  </style></head><body><header>Example app</header><main>${error ? `<p class="notice" role="alert">${e(error)}</p>` : ""}${account}</main></body></html>`
}

// Explicit local cookie envelope: browser Fetch strips native Cookie/Set-Cookie headers.
// The envelope is only used by this example's allowlisted in-process dispatcher.
function cookie(c: Context, name: string) {
  return c.req
    .header(COOKIE_HEADERS.request)
    ?.split(";")
    .map((value) => value.trim())
    .find((value) => value.startsWith(`${name}=`))
    ?.slice(name.length + 1)
}
function setCookie(
  c: Context,
  name: string,
  value: string,
  options: { maxAge: number; httpOnly: boolean; secure: boolean; sameSite: string; path: string },
) {
  c.header(
    COOKIE_HEADERS.response,
    `${name}=${value}; Path=${options.path}; HttpOnly; Secure; SameSite=${options.sameSite}; Max-Age=${options.maxAge}`,
    { append: true },
  )
}
function deleteCookie(c: Context, name: string, options: { path: string }) {
  c.header(COOKIE_HEADERS.response, `${name}=; Path=${options.path}; Max-Age=0`, { append: true })
}

export const COOKIE_HEADERS = { request: "x-example-cookie", response: "x-example-set-cookie" }
export const ORIGIN_HEADER = "x-example-origin"

/** A tiny, portable browser transport. Cookies and redirects never leave this instance. */
export function createBrowser(fetch: (request: Request) => Promise<Response>) {
  const cookies = new Map<
    string,
    { origin: string; path: string; name: string; value: string; expires: number }
  >()
  return {
    async navigate(
      input: string,
      init: { method?: string; body?: URLSearchParams; origin?: string } = {},
    ) {
      let url = new URL(input)
      let method = init.method ?? "GET"
      let body = init.body
      for (let redirects = 0; redirects < 15; redirects++) {
        const headers = new Headers()
        const matching = [...cookies.values()].filter(
          (c) =>
            c.origin === url.origin &&
            (url.pathname === c.path ||
              url.pathname.startsWith(c.path.endsWith("/") ? c.path : `${c.path}/`)) &&
            c.expires > Date.now(),
        )
        if (matching.length)
          headers.set(
            COOKIE_HEADERS.request,
            matching.map((c) => `${c.name}=${c.value}`).join("; "),
          )
        if (method !== "GET" && init.origin) headers.set(ORIGIN_HEADER, init.origin)
        const response = await fetch(
          new Request(url, { method, headers, ...(method !== "GET" && body ? { body } : {}) }),
        )
        for (const line of response.headers
          .get(COOKIE_HEADERS.response)
          ?.split(/,(?=\s*[^;,]+=)/) ?? []) {
          const [pair = "", ...attributes] = line.split(";")
          const split = pair.indexOf("=")
          const name = pair.slice(0, split).trim()
          const value = pair.slice(split + 1)
          const attrs = new Map(
            attributes.map((s) => {
              const [key = "", ...v] = s.trim().split("=")
              return [key.toLowerCase(), v.join("=")]
            }),
          )
          const path = attrs.get("path") ?? "/"
          const expires = attrs.has("max-age")
            ? Date.now() + Number(attrs.get("max-age")) * 1000
            : attrs.has("expires")
              ? Date.parse(attrs.get("expires") ?? "")
              : Infinity
          cookies.set(`${url.origin}:${path}:${name}`, {
            origin: url.origin,
            path,
            name,
            value,
            expires,
          })
        }
        const location = response.headers.get("location")
        if (!location || ![301, 302, 303, 307, 308].includes(response.status))
          return { url: url.href, response }
        url = new URL(location, url)
        if (
          response.status === 303 ||
          ((response.status === 301 || response.status === 302) && method === "POST")
        ) {
          method = "GET"
          body = undefined
        }
      }
      throw new Error("Too many redirects")
    },
  }
}

/**
 * Embedded browsers refuse nested frames, so the example pastes each
 * fetched document into its own shadow tree. `:root` / `html` / `body`
 * land on an inner `.page` and do not restyle the shell around it.
 * Returns that `.page` element.
 */
export function pasteDocument(host: HTMLElement, html: string): HTMLElement {
  const owner = host.ownerDocument
  const parsed = new DOMParser().parseFromString(html, "text/html")
  for (const script of parsed.querySelectorAll("script")) script.remove()
  const css = [...parsed.querySelectorAll("style")]
    .map((style) => style.textContent ?? "")
    .join("\n")
  for (const style of parsed.querySelectorAll("style")) style.remove()

  const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" })
  shadow.replaceChildren()
  const style = owner.createElement("style")
  style.textContent = scopeEmbeddedCss(css)
  const page = owner.createElement("div")
  page.className = "page"
  shadow.append(style, page)
  for (const node of [...parsed.body.childNodes]) page.append(owner.adoptNode(node))
  return page
}

const scopeEmbeddedCss = (css: string): string => {
  let out = ""
  let cursor = 0
  while (cursor < css.length) {
    const brace = css.indexOf("{", cursor)
    if (brace === -1) {
      out += css.slice(cursor)
      break
    }
    const prelude = css.slice(cursor, brace)
    const trimmed = prelude.trimStart()
    if (trimmed.startsWith("@keyframes") || trimmed.startsWith("@font-face")) {
      const end = skipBlock(css, brace)
      out += css.slice(cursor, end)
      cursor = end
      continue
    }
    if (trimmed.startsWith("@")) {
      out += `${rewriteWidthMedia(css.slice(cursor, brace))}{`
      cursor = brace + 1
      continue
    }
    const close = prelude.lastIndexOf("}")
    const head = close === -1 ? "" : prelude.slice(0, close + 1)
    const selector = close === -1 ? prelude : prelude.slice(close + 1)
    const selectorTrimmed = selector.trimStart()
    if (
      close !== -1 &&
      (selectorTrimmed.startsWith("@keyframes") || selectorTrimmed.startsWith("@font-face"))
    ) {
      const end = skipBlock(css, brace)
      out += head + css.slice(cursor + close + 1, end)
      cursor = end
      continue
    }
    if (close !== -1 && selectorTrimmed.startsWith("@")) {
      out += `${head}${rewriteWidthMedia(selector)}{`
      cursor = brace + 1
      continue
    }
    const rewritten = rewriteSelectorList(selector)
    out += `${head}${rewritten}{`
    if (isDocumentBox(rewritten)) {
      const end = skipBlock(css, brace)
      out += `${loosenDocumentHeight(css.slice(brace + 1, end - 1))}}`
      cursor = end
      continue
    }
    cursor = brace + 1
  }
  const sized = out.replaceAll("100svh", "100%").replaceAll("100vh", "100%")
  return `:host{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0}.page{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:100%;container-type:inline-size}${sized}`
}

/** Width queries follow the pasted box. Preference queries stay on the viewport. */
const rewriteWidthMedia = (prelude: string): string => {
  const at = prelude.search(/@media\b/i)
  if (at === -1) return prelude
  const condition = prelude.slice(at + "@media".length)
  if (!isWidthOnlyMedia(condition)) return prelude
  const query = condition.replace(/^\s*(?:only\s+)?(?:all|screen|print|speech)\s+and\s+/i, " ")
  return `${prelude.slice(0, at)}@container${query}`
}

const isWidthOnlyMedia = (condition: string): boolean => {
  const body = condition.replace(/\/\*[\s\S]*?\*\//g, " ")
  if (/\bnot\b/i.test(body)) return false
  if (!/(?:min-|max-)?width/i.test(body)) return false
  const stripped = body
    .replace(/\bonly\b/gi, " ")
    .replace(/\b(?:all|screen|print|speech)\b/gi, " ")
    .replace(/\b(?:and|or)\b/gi, " ")
    .replace(/\(\s*(?:min-|max-)?width\s*:\s*[^)]+\)/gi, " ")
    .replace(/\(\s*[^)]*?\bwidth\b[^)]*\)/gi, " ")
  return !/[a-z]/i.test(stripped)
}

/** Comments are not selectors. A comma inside one must not split the list. */
const stripComments = (value: string): string => value.replace(/\/\*[\s\S]*?\*\//g, "")

const isDocumentBox = (selector: string): boolean =>
  stripComments(selector)
    .split(",")
    .every((part) => part.trim() === ".page")

const loosenDocumentHeight = (declarations: string): string =>
  declarations.replace(/(^|;)\s*height(\s*:\s*100%)/g, "$1min-height$2")

const rewriteSelectorList = (selector: string): string => {
  if (selector.trim() === "") return selector
  return selector
    .split(",")
    .map((part) => part.replace(/:root\b|(?<![.\w-])(?:html|body)\b/g, ".page"))
    .join(",")
}

const skipBlock = (css: string, openBrace: number): number => {
  let depth = 0
  for (let index = openBrace; index < css.length; index++) {
    const char = css[index]
    if (char === "{") depth++
    else if (char === "}") {
      depth--
      if (depth === 0) return index + 1
    }
  }
  return css.length
}

import { CSS_RESET, scopeReset } from "@crvouga/mockingbird-ui"
import type { BehaviorInput } from "../../src/index.js"
import { APP, createExample, type ExampleProvider, IDENTITY, type Trace } from "./app.js"
import { pasteDocument } from "./paste.js"
import { createBrowser } from "./transport.js"

const closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="m6 6 12 12M18 6 6 18"/></svg>`
const closeButtonStyle = `display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;cursor:pointer;appearance:none`

export type ExampleOptions = {
  flow?: "popup" | "redirect"
  theme?: "system" | "light" | "dark"
  reuseLastAccount?: boolean
}

/** The only DOM-dependent layer: mount the portable application in any browser host. */
export async function mount(host: HTMLElement, options: ExampleOptions = {}) {
  const root = host.shadowRoot ?? host.attachShadow({ mode: "open" })
  root.innerHTML = `<style>
  ${scopeReset(":host")}
  :host{display:block;color:var(--fg,#242c29);font:14px/1.5 system-ui,sans-serif}.shell{border:1px solid var(--border,#d6ddd8);border-radius:14px;overflow:hidden;background:var(--bg,#fff)}.toolbar{display:flex;gap:16px;align-items:end;justify-content:space-between;padding:18px;flex-wrap:wrap}label{display:grid;gap:5px;font-size:12px;font-weight:600}select,button{font:inherit;color:inherit;background:var(--bg,#fff);border:1px solid var(--border,#c8d0ca);border-radius:7px;padding:9px 12px}button{cursor:pointer}button:hover{border-color:currentColor}:focus-visible{outline:2px solid var(--accent,#27272a);outline-offset:3px}.route{padding:10px 18px;border-block:1px solid var(--border,#d6ddd8);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.route span{opacity:.7}.address{padding:10px 18px;font:11px ui-monospace,monospace;overflow-wrap:anywhere;border-bottom:1px solid var(--border,#d6ddd8)}.app-frame{display:block;width:100%;height:700px;overflow:auto;color-scheme:inherit;background:var(--bg,#fff)}.status{padding:10px 18px;margin:0;font-size:12px;border-top:1px solid var(--border,#d6ddd8)}details{border-top:1px solid var(--border,#d6ddd8);padding:14px 18px}summary{cursor:pointer;font-weight:600}.trace{max-height:260px;overflow:auto;padding:0;list-style:none;font:11px/1.7 ui-monospace,monospace}.trace li{padding:6px 0;border-bottom:1px solid var(--border,#d6ddd8);overflow-wrap:anywhere}.trace b{display:inline-block;min-width:92px}.hint{font-size:12px;opacity:.7;margin:8px 0 0}
  .provider-layer{position:fixed;inset:0;z-index:1;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / 0.45)}.provider-layer[hidden]{display:none}dialog{position:static;display:flex;flex-direction:column;margin:0;padding:0;border:1px solid var(--border,#d6ddd8);border-radius:16px;width:min(540px,100%);height:min(820px,100%);background:var(--bg,#fff);color:inherit;box-shadow:0 24px 100px #0005;overflow:hidden}dialog:not([open]){display:none}.popup-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border,#d6ddd8)}.popup-bar strong{display:block;font-size:13px}.popup-bar small{font:11px ui-monospace,monospace;opacity:.7}.popup-bar button{${closeButtonStyle}}.popup-bar button:hover{background:light-dark(#f4f4f5,#242428);border-color:transparent}.popup-bar button svg{display:block}.provider-frame{display:block;flex:1;min-height:0;overflow:auto;color-scheme:inherit;background:var(--bg,#fff)}.provider-status{padding:14px;margin:0;font-size:13px}@media(max-width:500px){.app-frame{height:750px}.toolbar label{width:100%}select{width:100%}}
  </style><div class="shell"><div class="toolbar"><label>Provider profile<select class="profile" aria-label="Provider profile"><option value="google">Google-style OIDC</option><option value="apple">Apple-style OIDC</option><option value="microsoft">Microsoft-style OIDC</option><option value="github">GitHub-style OAuth</option></select></label><label>Provider behavior<select aria-label="Provider behavior"></select></label><label>Sign-in flow<select class="flow" aria-label="Sign-in flow"><option value="popup">Popup</option><option value="redirect">Redirect</option></select></label><label>Appearance<select class="theme-choice" aria-label="Appearance"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></label><label>Account selection<select class="account-choice" aria-label="Account selection"><option value="choose">Always choose</option><option value="reuse">Reuse last account</option></select></label><button type="button" class="reset">Reset example</button></div><div class="route"><strong>App → OAuth Emulator</strong><span>In process · no network</span></div><div class="address" aria-label="Virtual browser address"></div><div class="app-frame" role="region" aria-label="Example app"></div><p class="status" role="status" aria-live="polite">Starting the app…</p><details><summary>Request trace <span class="count">(0)</span></summary><p class="hint">Real Request / Response objects. Credentials and query strings are omitted.</p><ol class="trace"></ol></details></div><div class="provider-layer" hidden><dialog aria-label="OAuth Emulator sign-in" aria-modal="true"><div class="popup-bar"><div><strong>OAuth Emulator</strong><small class="provider-address">accounts.example.test</small></div><button type="button" class="close-provider" aria-label="Close sign-in popup">${closeIcon}</button></div><p class="provider-status" role="status">Connecting to the identity provider…</p><div class="provider-frame" role="region" aria-label="OAuth Emulator account selection and consent"></div></dialog></div>`
  function element<T extends Element>(selector: string): T {
    const value = root.querySelector<T>(selector)
    if (!value) throw new Error(`Missing example element: ${selector}`)
    return value
  }
  const frame = element<HTMLElement>(".app-frame")
  const shell = element<HTMLElement>(".shell")
  const layer = element<HTMLElement>(".provider-layer")
  const dialog = element<HTMLDialogElement>("dialog")
  const dialogFrame = element<HTMLElement>(".provider-frame")
  let popup: Window | null = null
  let popupTimer: ReturnType<typeof setInterval> | undefined
  let providerFrame: HTMLElement = dialogFrame
  let providerAddress = element<HTMLElement>(".provider-address")
  let providerStatus = element<HTMLElement>(".provider-status")
  const frameUrls = new WeakMap<HTMLElement, string>()
  const surfaceLoads = new WeakMap<HTMLElement, AbortController>()
  let navigation = 0
  const status = element<HTMLElement>(".status")
  const address = element<HTMLElement>(".address")
  const profile = element<HTMLSelectElement>(".profile")
  const select = element<HTMLSelectElement>('[aria-label="Provider behavior"]')
  const flow = element<HTMLSelectElement>(".flow")
  const appearance = element<HTMLSelectElement>(".theme-choice")
  const accountChoice = element<HTMLSelectElement>(".account-choice")
  flow.value = options.flow ?? "popup"
  appearance.value = options.theme ?? "system"
  accountChoice.value = options.reuseLastAccount ? "reuse" : "choose"
  const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
  let preferences = { reuseLastAccount: false }
  const traceList = element<HTMLOListElement>(".trace")
  const count = element<HTMLElement>(".count")
  let generation = 0
  let disposed = false
  let busy = false
  let browser: ReturnType<typeof createBrowser>
  let entries: Trace[] = []
  const behaviorChoices: Record<ExampleProvider, [string, string][]> = {
    google: [
      ["normal", "Normal sign-in"],
      ["missing_email", "Email claim omitted"],
      ["missing_name", "Profile name omitted"],
      ["unverified_email", "Email not verified"],
      ["consent_denied", "Consent declined"],
      ["unavailable", "Token endpoint unavailable"],
    ],
    apple: [
      ["normal", "Ask whether to share email"],
      ["apple_private_relay", "Always hide email"],
      ["apple_share_email", "Always share email"],
      ["apple_returning_user", "Returning user (no profile payload)"],
      ["apple_boolean_claims", "Boolean privacy claims"],
      ["missing_email", "Email claim omitted"],
      ["missing_name", "Name omitted"],
      ["consent_denied", "Consent declined"],
      ["unavailable", "Token endpoint unavailable"],
    ],
    microsoft: [
      ["normal", "Normal sign-in"],
      ["microsoft_missing_email", "Email claim omitted"],
      ["missing_name", "Display name omitted"],
      ["microsoft_spa_expiry", "24-hour refresh lifetime"],
      ["consent_denied", "Consent declined"],
      ["unavailable", "Token endpoint unavailable"],
    ],
    github: [
      ["normal", "Private email list fallback"],
      ["github_unverified_email", "Unverified primary email"],
      ["missing_email", "No usable email"],
      ["missing_name", "Profile name omitted"],
      ["consent_denied", "Authorization declined"],
      ["unavailable", "Token endpoint unavailable"],
    ],
  }
  function updateBehaviorChoices() {
    const previous = select.value
    select.replaceChildren(
      ...behaviorChoices[profile.value as ExampleProvider].map(([value, label]) => {
        const option = document.createElement("option")
        option.value = value
        option.textContent = label
        return option
      }),
    )
    if ([...select.options].some((option) => option.value === previous)) select.value = previous
  }
  function log(entry: Trace) {
    entries.push(entry)
    entries = entries.sort((a, b) => a.sequence - b.sequence).slice(-100)
    traceList.replaceChildren(
      ...entries.map((item) => {
        const li = document.createElement("li")
        const actor = document.createElement("b")
        actor.textContent = item.actor
        li.append(actor, ` ${item.method} ${item.url} → ${item.status}`)
        return li
      }),
    )
    count.textContent = `(${entries.length})`
  }
  function focusApp() {
    const doc = frame.shadowRoot
    const target =
      doc?.querySelector<HTMLElement>('a[href="/auth/start"]') ??
      doc?.querySelector<HTMLElement>("h1")
    if (target) {
      if (target.tagName === "H1") target.tabIndex = -1
      target.focus({ preventScroll: true })
    }
  }
  function clearSurface(target: HTMLElement) {
    surfaceLoads.get(target)?.abort()
    target.shadowRoot?.replaceChildren()
    frameUrls.delete(target)
  }
  function closeProvider() {
    if (popupTimer) clearInterval(popupTimer)
    popupTimer = undefined
    if (providerFrame !== dialogFrame) clearSurface(providerFrame)
    clearSurface(dialogFrame)
    popup?.close()
    popup = null
    if (dialog.open) dialog.close()
    layer.hidden = true
    shell.inert = false
    providerFrame = dialogFrame
  }
  function cancelProvider() {
    // Discard a response already in flight, so closing the popup cannot reopen it.
    navigation++
    busy = false
    closeProvider()
    status.textContent = "Sign-in window closed. You can try again."
    focusApp()
  }
  function colorScheme() {
    return appearance.value === "system"
      ? systemTheme.matches
        ? "dark"
        : "light"
      : appearance.value
  }
  function applyDocumentTheme(page: HTMLElement) {
    page.style.colorScheme = colorScheme()
    page.dataset.theme = appearance.value
    for (const input of page.querySelectorAll<HTMLInputElement>('input[name="oauth-theme"]'))
      input.checked = input.value === appearance.value
  }
  function syncTheme() {
    for (const target of new Set([frame, dialogFrame, providerFrame])) {
      target.style.colorScheme = colorScheme()
      const page = target.shadowRoot?.querySelector<HTMLElement>(".page")
      if (page) applyDocumentTheme(page)
    }
    if (popup && !popup.closed) popup.document.documentElement.style.colorScheme = colorScheme()
  }
  function openProvider() {
    // Called synchronously from the host app's click to retain popup user activation.
    if (popup && !popup.closed) {
      popup.focus()
      return
    }
    if (dialog.open) return
    try {
      popup = window.open("about:blank", "", "popup,width=540,height=820")
    } catch {
      popup = null
    }
    if (popup) {
      try {
        popup.document.open()
        popup.document.write(
          `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; form-action 'none'; base-uri 'none'"><title>OAuth Emulator</title><style>${CSS_RESET}html{height:100%;overflow:hidden}body{height:100%;display:flex;flex-direction:column;overflow:hidden;margin:0;font:14px/1.5 system-ui;background:light-dark(#fff,#111113);color:light-dark(#18181b,#f4f4f5)}header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid light-dark(#dedee3,#36363c)}strong{display:block;font-size:13px}small{font:11px ui-monospace,monospace;opacity:.7}button{${closeButtonStyle}}button:hover{background:light-dark(#f4f4f5,#242428)}button svg{display:block}button:focus-visible{outline:3px solid #71717a;outline-offset:3px}p{padding:14px;margin:0}.provider-mount{display:block;flex:1;min-height:0;overflow:auto}</style></head><body><header><div><strong>OAuth Emulator</strong><small>accounts.example.test</small></div><button aria-label="Close sign-in popup">${closeIcon}</button></header><p role="status">Connecting to the identity provider…</p><div class="provider-mount"></div></body></html>`,
        )
        popup.document.close()
        const child = popup.document.querySelector<HTMLElement>(".provider-mount")
        const label = popup.document.querySelector("small")
        const message = popup.document.querySelector("p")
        if (!child || !label || !message) throw new Error("Popup unavailable")
        providerFrame = child
        providerAddress = label
        providerStatus = message
        popup.document.querySelector("button")?.addEventListener("click", cancelProvider)
        popup.document.addEventListener("keydown", (event) => {
          if (event.key === "Escape") cancelProvider()
        })
        syncTheme()
        popupTimer = setInterval(() => {
          if (popup?.closed) cancelProvider()
        }, 250)
        return
      } catch {
        popup.close()
        popup = null
      }
    }
    providerFrame = dialogFrame
    providerAddress = element<HTMLElement>(".provider-address")
    providerStatus = element<HTMLElement>(".provider-status")
    providerStatus.hidden = false
    providerStatus.textContent = "Connecting to the identity provider…"
    // Modal to the example, not to the page: the layer covers only this example's
    // own box (its host's containing block when embedded), and the app behind it
    // is inert while it is open — the same rules as showModal(), scoped.
    layer.hidden = false
    shell.inert = true
    dialog.show()
  }
  function render(target: HTMLElement, url: string, html: string) {
    // Each surface gets the real response HTML, pasted in place. Embedded browsers
    // reject iframes, and the host bridges theme because the page's own script is omitted.
    surfaceLoads.get(target)?.abort()
    const page = pasteDocument(target, html)
    applyDocumentTheme(page)
    target.style.colorScheme = colorScheme()
    frameUrls.set(target, url)
    const step = navigation
    queueMicrotask(() => {
      if (disposed || step !== navigation || frameUrls.get(target) !== url) return
      loaded(target)
    })
  }
  async function navigate(url: string, init: Parameters<typeof browser.navigate>[1] = {}) {
    if (busy || disposed) return
    const run = generation
    const step = ++navigation
    busy = true
    status.textContent =
      flow.value === "popup" ? "Waiting for sign-in in the provider window…" : "Redirecting…"
    try {
      const result = await browser.navigate(url, init)
      const html = await result.response.text()
      if (run !== generation || step !== navigation || disposed) return
      const location = new URL(result.url)
      if (location.origin === APP) {
        closeProvider()
        address.textContent = `${location.host}${location.pathname}`
        render(frame, result.url, html)
        status.textContent = result.response.ok
          ? flow.value === "popup"
            ? "App ready. Sign-in opens a separate provider window."
            : "App ready. Sign-in redirects to the provider and back."
          : "Sign-in did not complete. You’re back in the app and can try again."
      } else if (location.origin === IDENTITY) {
        if (flow.value === "redirect") {
          address.textContent = `${location.host}${location.pathname}`
          render(frame, result.url, html)
          status.textContent =
            "Redirected to OAuth Emulator. Complete or cancel sign-in to return to the app."
          return
        }
        if (!popup && !dialog.open) throw new Error("The sign-in window was closed")
        providerAddress.textContent = `${location.host}${location.pathname}`
        providerStatus.hidden = true
        render(providerFrame, result.url, html)
        status.textContent =
          "Complete sign-in in the separate provider window. The app stays open here."
      }
    } catch (error) {
      if (run === generation && step === navigation && !disposed) {
        closeProvider()
        status.textContent = `Unable to continue: ${error instanceof Error ? error.message : "Unknown error"}. Try signing in again.`
        focusApp()
      }
    } finally {
      if (run === generation && step === navigation) busy = false
    }
  }
  function loaded(target: HTMLElement) {
    if (disposed) return
    const doc = target.shadowRoot
    const currentUrl = frameUrls.get(target)
    if (!doc || !currentUrl || !doc.querySelector("main")) return
    const page = doc.querySelector<HTMLElement>(".page")
    if (page) applyDocumentTheme(page)
    // A closed popup's delayed paint must never steal focus or submit another request.
    if (target !== frame && !popup && !dialog.open) return
    surfaceLoads.get(target)?.abort()
    const controller = new AbortController()
    surfaceLoads.set(target, controller)
    const signal = controller.signal
    doc.addEventListener(
      "change",
      (event) => {
        const input = event.target as HTMLInputElement
        if (input.name === "oauth-theme" && ["system", "light", "dark"].includes(input.value)) {
          appearance.value = input.value
          syncTheme()
        }
      },
      { signal },
    )
    doc.addEventListener(
      "submit",
      (event) => {
        event.preventDefault()
        const form = event.target as HTMLFormElement
        const data = new FormData(form, (event as SubmitEvent).submitter)
        const params = new URLSearchParams()
        for (const [name, value] of data) if (typeof value === "string") params.append(name, value)
        const url = new URL(form.getAttribute("action") ?? currentUrl, currentUrl)
        const method = (form.getAttribute("method") ?? "GET").toUpperCase()
        if (method === "GET") url.search = params.toString()
        void navigate(url.href, {
          method,
          ...(method === "GET" ? {} : { body: params }),
          origin: new URL(currentUrl).origin,
        })
      },
      { capture: true, signal },
    )
    doc.addEventListener(
      "click",
      (event) => {
        const link = (event.target as Element).closest?.("a[href]")
        if (!link) return
        event.preventDefault()
        const href = link.getAttribute("href") ?? ""
        if (href.startsWith("#")) {
          const anchor = doc.getElementById(href.slice(1))
          anchor?.focus()
          anchor?.scrollIntoView()
          return
        }
        const url = new URL(href, currentUrl)
        if (target === frame && url.origin === APP && url.pathname === "/auth/start") {
          if (busy) return
          if (flow.value === "popup") openProvider()
        }
        void navigate(url.href)
      },
      { capture: true, signal },
    )
    doc.addEventListener(
      "keydown",
      (event) => {
        if (!(event instanceof KeyboardEvent) || event.key !== "Escape" || target === frame) return
        event.preventDefault()
        event.stopPropagation()
        cancelProvider()
      },
      { signal },
    )
    const heading = doc.querySelector<HTMLElement>("h1")
    if (heading) {
      heading.tabIndex = -1
      heading.focus({ preventScroll: true })
    }
    // Apple's response_mode=form_post page auto-submits in a real browser. Its script is
    // omitted with the rest of the document scripts, so the host submits that form itself.
    // Deferred until after navigate() releases `busy`, or this submit would be ignored.
    doc.querySelector<HTMLFormElement>("form#callback")?.requestSubmit()
  }
  function reset() {
    const run = ++generation
    navigation++
    closeProvider()
    busy = false
    entries = []
    traceList.replaceChildren()
    count.textContent = "(0)"
    const behavior: BehaviorInput =
      select.value === "unavailable"
        ? { probabilities: { tokenUnavailable: 1 } }
        : select.value === "normal"
          ? {}
          : { preset: select.value as Exclude<BehaviorInput["preset"], undefined> }
    const example = createExample(
      behavior,
      (entry) => {
        if (run === generation && !disposed) log(entry)
      },
      profile.value as ExampleProvider,
    )
    preferences = example.preferences
    preferences.reuseLastAccount = accountChoice.value === "reuse"
    browser = createBrowser(example.dispatch)
    void navigate(APP)
  }
  layer.addEventListener("keydown", (event) => {
    if (event.key !== "Escape") return
    // Claimed, so an embedding modal treats this close request as handled.
    event.preventDefault()
    cancelProvider()
  })
  element<HTMLButtonElement>(".close-provider").addEventListener("click", cancelProvider)
  appearance.addEventListener("change", syncTheme)
  systemTheme.addEventListener("change", syncTheme)
  accountChoice.addEventListener("change", () => {
    preferences.reuseLastAccount = accountChoice.value === "reuse"
  })
  profile.addEventListener("change", () => {
    updateBehaviorChoices()
    reset()
  })
  flow.addEventListener("change", () => {
    cancelProvider()
    void navigate(APP)
  })
  select.addEventListener("change", reset)
  element<HTMLButtonElement>(".reset").addEventListener("click", reset)
  updateBehaviorChoices()
  reset()
  return () => {
    disposed = true
    generation++
    closeProvider()
    systemTheme.removeEventListener("change", syncTheme)
    root.replaceChildren()
  }
}