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).
npm install @aton-network/vueNuxt: the server routes
// 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
// 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),
stateandnonceon 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 IAPregunte 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.