Ir al contenido
AtheronDEVELOPERS
← JavaScript and TypeScript SDK

Vue and Nuxt (JavaScript and TypeScript)

Sign in with Atheron in Vue and Nuxt.

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

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/vue brings Sign in with Atheron to Vue 3 and Nuxt: a plugin, a useAtheron() composable, the <AtheronSignInButton> component, and @aton-network/vue/nuxt for Nuxt's server routes.

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/vue

Nuxt: the server routes

Este ejemplo aún no está escrito en cURL. Se muestra 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;

Vue: the plugin and the person

Este ejemplo aún no está escrito en cURL. Se muestra 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.

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.