Aller au contenu
AtheronDEVELOPERS
← JavaScript and TypeScript SDK

React (JavaScript and TypeScript)

Sign in with Atheron in React.

Connectez-vous pour voir votre propre ID client de test dans les exemples.

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

Cet exemple n'est pas encore écrit en cURL. Affiché en 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.

Cet exemple n'est pas encore écrit en cURL. Affiché en 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.

Demandez à Atlas

Assistant IA

Posez n'importe quelle question sur Se connecter avec Atheron, l'API ou le portail. La réponse vient de notre documentation, avec les liens des pages utilisées.