Sign in with AnyRouter

Register your app (once)

Register your app to get a client_id. Redirect URIs must be exact matches and use https (localhost is allowed for development).

curl https://anyrouter.dev/api/v1/mcp/oauth/register \
  -H "Content-Type: application/json" \
  -d '{
    "client_name": "My AI App",
    "redirect_uris": ["https://myapp.example/callback"],
    "app_type": "signin",
    "origin_url": "https://myapp.example"
  }'

The response includes your client_id. Save it — it is public and safe to embed in frontend code.

Add the sign-in button

Generate a PKCE verifier/challenge in the browser, then send the user to the authorize page:

<button id="signin-anyrouter">Sign in with AnyRouter</button>
<script>
  const CLIENT_ID = "your_client_id"
  const REDIRECT_URI = "https://myapp.example/callback"

  function base64url(bytes) {
    return btoa(String.fromCharCode(...new Uint8Array(bytes)))
      .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
  }

  document.getElementById("signin-anyrouter").addEventListener("click", async () => {
    // PKCE: random verifier, S256 challenge
    const verifier = base64url(crypto.getRandomValues(new Uint8Array(32)))
    const challenge = base64url(
      await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier)),
    )
    const state = base64url(crypto.getRandomValues(new Uint8Array(16)))
    sessionStorage.setItem("ar_verifier", verifier)
    sessionStorage.setItem("ar_state", state)

    const url = new URL("https://anyrouter.dev/api/v1/mcp/oauth/authorize")
    url.search = new URLSearchParams({
      client_id: CLIENT_ID,
      redirect_uri: REDIRECT_URI,
      response_type: "code",
      code_challenge: challenge,
      code_challenge_method: "S256",
      state,
    }).toString()
    location.href = url.toString()
  })
</script>

The user lands on the AnyRouter consent screen, sees your app's name and the exact permissions requested, and approves.

Exchange the code on your callback page

After approval, the user returns to your redirect_uri with ?code=…&state=…. Verify the state, then exchange the code:

<script>
  const params = new URLSearchParams(location.search)
  if (params.get("state") !== sessionStorage.getItem("ar_state")) {
    throw new Error("State mismatch — restart sign-in")
  }

  const res = await fetch("https://anyrouter.dev/api/v1/mcp/oauth/token", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      grant_type: "authorization_code",
      code: params.get("code"),
      redirect_uri: "https://myapp.example/callback",
      client_id: "your_client_id",
      code_verifier: sessionStorage.getItem("ar_verifier"),
    }),
  })
  const token = await res.json()
  // {
  //   "access_token": "sk-ar-v1-…",
  //   "token_type": "Bearer",
  //   "scope": "inference read:profile",
  //   "expires_in": 2592000
  // }
  saveTokenForThisUser(token.access_token)
</script>

Run AI requests as the user

Use the token like any AnyRouter API key. The request is billed to the signed-in user's account.

const res = await fetch("https://anyrouter.dev/api/v1/chat/completions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${token}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "google/gemini-3.5-flash",
    messages: [{ role: "user", content: "Hello from my app!" }],
  }),
})

Show who's signed in

Fetch the user's basic profile to render a "Signed in as …" badge:

const me = await fetch("https://anyrouter.dev/api/v1/me", {
  headers: { Authorization: `Bearer ${token}` },
}).then((r) => r.json())
// display name, avatar, plan