Ir al contenido
AtheronDEVELOPERS
← Quickstart

Quickstart: Next.js

Add Sign in with Atheron to a Next.js app with route handlers and an HTTP-only session cookie.

Inicie sesión para ver su propio ID de cliente de prueba en los ejemplos.

This page is for Next.js. The quickstart has every step in every language.

This uses openid-client, which reads our discovery document and handles PKCE, state and the token exchange for you.

1. Settings

Add http://localhost:3000/auth/callback as a redirect address of your test environment in the portal.

bash
ATHERON_ISSUER=https://accounts.aton-network.org
ATHERON_CLIENT_ID=test-xxxxxxxxxxxxxxxx
ATHERON_CLIENT_SECRET=ath_cs_...
ATHERON_REDIRECT_URI=http://localhost:3000/auth/callback

2. Start the sign-in

ts
// app/auth/start/route.ts
import * as client from "openid-client";
import { cookies } from "next/headers";

export async function GET() {
  const config = await client.discovery(new URL(process.env.ATHERON_ISSUER!), process.env.ATHERON_CLIENT_ID!, process.env.ATHERON_CLIENT_SECRET!);
  const verifier = client.randomPKCECodeVerifier();
  const state = client.randomState();
  const nonce = client.randomNonce();
  (await cookies()).set("atheron_pending", JSON.stringify({ verifier, state, nonce }), { httpOnly: true, sameSite: "lax", secure: true, path: "/", maxAge: 600 });
  const url = client.buildAuthorizationUrl(config, {
    redirect_uri: process.env.ATHERON_REDIRECT_URI!,
    scope: "openid profile email",
    code_challenge: await client.calculatePKCECodeChallenge(verifier),
    code_challenge_method: "S256",
    state,
    nonce,
  });
  return Response.redirect(url.href, 303);
}

3. Finish it

ts
// app/auth/callback/route.ts
import * as client from "openid-client";
import { cookies } from "next/headers";

export async function GET(request: Request) {
  const jar = await cookies();
  const pending = JSON.parse(jar.get("atheron_pending")?.value ?? "{}");
  jar.delete("atheron_pending");
  const config = await client.discovery(new URL(process.env.ATHERON_ISSUER!), process.env.ATHERON_CLIENT_ID!, process.env.ATHERON_CLIENT_SECRET!);
  const tokens = await client.authorizationCodeGrant(config, new URL(request.url), {
    pkceCodeVerifier: pending.verifier,
    expectedState: pending.state,
    expectedNonce: pending.nonce,
  });
  const claims = tokens.claims()!;
  // claims.sub is the person's ID for your app alone, and never changes. Open your own session here.
  return Response.redirect(new URL("/", request.url), 303);
}

4. Ask for current details

The ID token is a snapshot from sign-in. Userinfo answers as of now, so ask it when something may have changed, such as a membership.

ts
const info = await client.fetchUserInfo(config, tokens.access_token, claims.sub);

Pregunte a Atlas

Asistente de IA

Pregunte lo que quiera sobre Iniciar sesión con Atheron, la API o el portal. La respuesta sale de nuestra documentación, con enlaces a las páginas usadas.