SDK

SDK JavaScript

@authon/js — SDK universel pour navigateur fonctionnant dans n'importe quel environnement JavaScript. Affiche un modal de connexion clé en main via ShadowDOM avec une personnalisation complète de l'apparence.

npm: @authon/jsBrowserESM / CJS

Installation

bash

npm install @authon/js

Ou chargez depuis un CDN pour un prototypage rapide :

<script type="module">
  import { Authon } from "https://cdn.jsdelivr.net/npm/@authon/js/+esm";
</script>

Initialisation

Créez une instance Authon avec votre clé publiable. Trouvez votre clé dans le tableau de bord sous Clés API.

auth.ts

import { Authon } from "@authon/js";

const authon = new Authon("pk_live_your_publishable_key", {
  // Optional — override the API base URL (default: https://api.authon.dev)
  apiUrl: "https:1

  2
  mode: "popup",

  3
  theme: "auto",

  4
  locale: "en",
});

Appelez openSignIn() ou openSignUp() pour afficher le modal Authon. Le modal est rendu dans une racine ShadowDOM et n'entre donc jamais en conflit avec les styles de votre application.

// Open the sign-in modal
await authon.openSignIn();

// Open the sign-up modal (registration flow)
await authon.openSignUp();

Les deux méthodes sont asynchrones — elles récupèrent votre image de marque et la liste des fournisseurs OAuth depuis l'API avant le rendu, de sorte que le modal reflète toujours vos paramètres du tableau de bord.

Authentification par e-mail

Pour des flux entièrement programmatiques (ex. votre propre interface personnalisée), appelez directement les méthodes e-mail :

import type { AuthonUser } from "@authon/js";

// Sign in an existing user
const user: AuthonUser = await authon.signInWithEmail(
  "user@example.com",
  "securepassword",
);

// Register a new user
const user: AuthonUser = await authon.signUpWithEmail(
  "newuser@example.com",
  "securepassword",
  { displayName: "Jane Doe" },
);

Connexion OAuth

Déclenchez un popup OAuth pour n'importe quel fournisseur configuré dans votre tableau de bord. Le popup gérera le flux PKCE et enverra un message à votre fenêtre à la fin.

// Supported providers: google | apple | github | kakao | naver |
//   facebook | discord | x | line | microsoft
await authon.signInWithOAuth("google");
await authon.signInWithOAuth("github");
await authon.signInWithOAuth("kakao");

Seuls les fournisseurs activés dans votre tableau de bord apparaîtront dans le modal de connexion. Assurez-vous d'avoir configuré l'ID client et le secret pour chaque fournisseur que vous souhaitez prendre en charge.

Utilisateur et session

// Get the current signed-in user (returns null if not signed in)
const user = authon.getUser();
// {
//   id: "usr_abc123",
//   email: "user@example.com",
//   displayName: "Jane Doe",
//   avatarUrl: "https://...",
//   emailVerified: true,
//   isBanned: false,
//   publicMetadata: {},
//   createdAt: "2026-01-01T00:00:00Z",
// }

// Get the raw JWT access token for API calls
const token = authon.getToken();

// Sign out the current user and clear local session
await authon.signOut();

Événements

Abonnez-vous aux événements du cycle de vie de l'authentification avec authon.on(event, callback). La méthode retourne une fonction de désabonnement.

// Fired when a user successfully signs in or the session is restored
const unsubSignedIn = authon.on("signedIn", (user) => {
  console.log("Signed in:", user.email);
  router.push("/dashboard");
});

// Fired when the user signs out or the session expires
const unsubSignedOut = authon.on("signedOut", () => {
  console.log("Signed out");
  router.push("/");
});

// Fired when a token is auto-refreshed
authon.on("tokenRefreshed", (token) => {
  console.log("Token refreshed:", token.slice(0, 16) + "...");
});

// Fired on any API or auth error
authon.on("error", (error) => {
  console.error("Auth error:", error.message);
});

// Unsubscribe when needed
unsubSignedIn();
unsubSignedOut();

Personnalisation de l'apparence

Remplacez l'image de marque par programmation via la configuration appearance . Ces paramètres fusionnent avec l'image de marque définie dans le tableau de bord.

const authon = new Authon("pk_live_your_key", {
  appearance: {
    brandName: "Acme Corp",
    primaryColorStart: "#7c3aed",
    primaryColorEnd: "#4f46e5",
    darkBg: "#0f172a",
    darkText: "#f1f5f9",
    borderRadius: 12,
    showEmailPassword: true,
    showDivider: true,
    termsUrl: "https:0
    privacyUrl: "https://acme.com/privacy",
  },
});

Nettoyage

Appelezdestroy() pour supprimer les écouteurs d'événements, fermer le modal et effacer les données de session lorsque votre application se démonte.

// In a SPA — call on route change or component unmount
authon.destroy();

Exemple complet

main.ts

import { Authon } from "@authon/js";

const authon = new Authon("pk_live_your_key", {
  mode: "popup",
  theme: "dark",
  appearance: {
    brandName: "My App",
    primaryColorStart: "#7c3aed",
    primaryColorEnd: "#4f46e5",
  },
});

// Event listeners
authon.on("signedIn", (user) => {
  userNameEl.textContent = user.displayName ?? user.email ?? "";
  authSection.style.display = "block";
  loginBtn.style.display = "none";
});

authon.on("signedOut", () => {
  authSection.style.display = "none";
  loginBtn.style.display = "block";
});

authon.on("error", (err) => {
  console.error("Authon error:", err.message);
});

// Wire up buttons
loginBtn.addEventListener("click", () => authon.openSignIn());
logoutBtn.addEventListener("click", () => authon.signOut());

// Check if user is already signed in on page load
const user = authon.getUser();
if (user) {
  userNameEl.textContent = user.displayName ?? user.email ?? "";
  authSection.style.display = "block";
  loginBtn.style.display = "none";
}