Get started with Sign in with NobleID

# .env.local  (server-only: no NEXT_PUBLIC_ prefix)
NOBLEID_CLIENT_ID=nbcl_your_client_id
NOBLEID_CLIENT_SECRET=nbcs_your_client_secret
# While you test. In production, register and use your https URL.
NOBLEID_REDIRECT_URI=http://localhost:3000/auth/nobleid/callback

# npm install jose

<a href="/auth/nobleid/start" style="display:inline-block;line-height:0">
  <img src="https://www.nobleid.org/brand/sign-in-with-nobleid-light.svg"
       alt="Sign in with NobleID" height="40">
</a>

// app/auth/nobleid/start/route.ts
import { NextResponse } from "next/server"
import crypto from "node:crypto"

const b64url = (buf: Buffer) => buf.toString("base64url")

export async function GET() {
  const state = b64url(crypto.randomBytes(32))
  const nonce = b64url(crypto.randomBytes(32))
  const verifier = b64url(crypto.randomBytes(32))
  const challenge = b64url(crypto.createHash("sha256").update(verifier).digest())

  const url = new URL("https://www.nobleid.org/oauth/authorize")
  url.search = new URLSearchParams({
    response_type: "code",
    client_id: process.env.NOBLEID_CLIENT_ID!,
    redirect_uri: process.env.NOBLEID_REDIRECT_URI!,
    scope: "openid profile",
    state,
    nonce,
    code_challenge: challenge,
    code_challenge_method: "S256",
  }).toString()

  const res = NextResponse.redirect(url)
  // Short-lived, httpOnly, scoped to the callback path. SameSite=Lax is sent
  // on the top-level redirect back from NobleID.
  res.cookies.set("nobleid_oidc", JSON.stringify({ state, nonce, verifier }), {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production", // http://localhost while you test
    sameSite: "lax",
    path: "/auth/nobleid",
    maxAge: 600,
  })
  return res
}

// app/auth/nobleid/callback/route.ts
import { NextRequest, NextResponse } from "next/server"
import { createRemoteJWKSet, jwtVerify } from "jose"

const ISSUER = "https://id.nobleid.org"
const JWKS = createRemoteJWKSet(new URL(`${ISSUER}/.well-known/jwks.json`))

function fail(msg: string) {
  const res = new NextResponse(`Sign-in failed: ${msg}`, { status: 400 })
  res.cookies.delete({ name: "nobleid_oidc", path: "/auth/nobleid" })
  return res
}

export async function GET(req: NextRequest) {
  const raw = req.cookies.get("nobleid_oidc")?.value
  if (!raw) return fail("session expired, try again")
  const { state, nonce, verifier } = JSON.parse(raw)

  // Check state, then iss, before believing anything else in the URL,
  // an error included: a forged callback can carry any error it likes.
  const q = req.nextUrl.searchParams
  if (q.get("state") !== state) return fail("state mismatch")
  if (q.get("iss") !== ISSUER) return fail("issuer mismatch") // RFC 9207
  if (q.get("error")) return fail(q.get("error_description") ?? q.get("error")!)

  // Token exchange: form-encoded, client_secret_basic.
  const id = encodeURIComponent(process.env.NOBLEID_CLIENT_ID!)
  const secret = encodeURIComponent(process.env.NOBLEID_CLIENT_SECRET!)
  const tokenRes = await fetch(`${ISSUER}/oauth/token`, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: `Basic ${Buffer.from(`${id}:${secret}`).toString("base64")}`,
    },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code: q.get("code") ?? "",
      redirect_uri: process.env.NOBLEID_REDIRECT_URI!,
      code_verifier: verifier,
    }),
    cache: "no-store",
  })
  if (!tokenRes.ok) return fail("token exchange failed")
  const tokens = await tokenRes.json()

  // Verify the ID token: ES256 signature against NobleID's JWKS, iss, aud, exp.
  const { payload } = await jwtVerify(tokens.id_token, JWKS, {
    issuer: ISSUER,
    audience: process.env.NOBLEID_CLIENT_ID!,
    algorithms: ["ES256"],
  })
  if (payload.nonce !== nonce) return fail("nonce mismatch")

  // Optional: claims that are only in userinfo (affiliations, research_interests…)
  const userinfo = await fetch(`${ISSUER}/oauth/userinfo`, {
    headers: { Authorization: `Bearer ${tokens.access_token}` },
    cache: "no-store",
  }).then((r) => r.json())
  if (userinfo.sub !== payload.sub) return fail("userinfo subject mismatch")

  // Key the account on payload.sub (stable). Never link accounts by email
  // unless email_verified is true.
  // const user = await upsertUser({ nobleidSub: payload.sub, nobleid: payload.nobleid, name: userinfo.name })
  // await createYourOwnSession(user)

  const res = NextResponse.redirect(new URL("/", req.url))
  res.cookies.delete({ name: "nobleid_oidc", path: "/auth/nobleid" })
  return res
}