Skip to content
AtheronDEVELOPERS
← JavaScript and TypeScript SDK

React (JavaScript and TypeScript)

Sign in with Atheron in React.

Sign in to see your own test client ID in the samples.

Coming soon. @aton-network/sdk is not published on npm yet, so the install line on this page does not work until it is. Until then, everything works over plain HTTP: pick cURL in any code block, or start from Endpoints.

@aton-network/react gives React a provider that asks your server who is signed in, a useAtheron() hook and the brand kit's button in five languages. Pair it with a server package (Next.js, Express, React Router and the others), which answers /auth/session.

Install

Set these on your server (never in code): ATHERON_CLIENT_ID, ATHERON_CLIENT_SECRET (server apps), ATHERON_REDIRECT_URI (the callback address you registered, such as https://your.app/auth/callback) and ATHERON_SECRET (32 or more random characters for sealing cookies: openssl rand -base64 32).

bash
npm install @aton-network/react

Sign in and out

This example is not written in cURL yet. Showing Next.js.

// app/auth/[...atheron]/route.ts: every Sign in with Atheron route in one file.
// Set ATHERON_CLIENT_ID, ATHERON_CLIENT_SECRET, ATHERON_SECRET and
// ATHERON_REDIRECT_URI=https://your.app/auth/callback (the address you registered).
import { Atheron } from "@aton-network/nextjs";

const atheron = Atheron();

export const { GET, POST } = atheron.handlers;

Show something only to a signed-in person

<SignInButton> takes locale (en, fr-CA, es-ES, de, ur-IN), theme (dark, light, auto), size (32, 40, 48) and variant (signIn, continue), as the button kit describes.

This example is not written in cURL yet. Showing Next.js.

// proxy.ts (middleware.ts before Next 16): anybody not signed in goes to Atheron first, then back.
import { Atheron } from "@aton-network/nextjs";

const atheron = Atheron({ protect: ["/account", "/settings"] });

export async function proxy(request: Request): Promise<Response | undefined> {
  return atheron.proxy(request);
}

// In a server component, read the person with: await atheron.user(await cookies())

How it keeps you safe

  • PKCE (S256), state and nonce on every sign-in, checked in that order when the browser comes back.
  • The flow and the session live in HTTP-only cookies sealed with AES-256-GCM, so the browser carries them but cannot read or change them. Tokens never reach your page's JavaScript.
  • Sign-out is a POST from your own site only, and revokes the refresh token at Atheron.
  • A return address is always a path on your own site.

The same rules hold in every Atheron SDK: they all run one set of conformance tests.

Ask Atlas

AI assistant

Ask anything about Sign in with Atheron, the API or the portal. You get an answer from our docs, with links to the pages it used.