SDK

JavaScript SDK

@authon/js — Universelles Browser-SDK, das in jeder JavaScript-Umgebung funktioniert. Rendert ein sofort einsatzfähiges Anmelde-Modal über ShadowDOM mit vollständiger Erscheinungsanpassung.

npm: @authon/jsBrowserESM / CJS

Installation

bash

npm install @authon/js

Oder laden Sie es von einem CDN für schnelles Prototyping:

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

Initialisierung

Erstellen Sie eine Authon Instanz mit Ihrem öffentlichen Schlüssel. Ihren Schlüssel finden Sie im Dashboard unter API-Schlüssel.

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",
});

Rufen Sie openSignIn() oder openSignUp() auf, um das Authon-Modal anzuzeigen. Das Modal wird in einem ShadowDOM-Root gerendert und kollidiert daher nie mit Ihren App-Stilen.

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

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

Beide Methoden sind asynchron — sie rufen Ihr Projekt-Branding und die OAuth-Anbieterliste von der API ab, bevor sie rendern, sodass das Modal immer Ihre Dashboard-Einstellungen widerspiegelt.

E-Mail-Authentifizierung

Für vollständig programmatische Flows (z. B. Ihre eigene benutzerdefinierte UI) rufen Sie die E-Mail-Methoden direkt auf:

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" },
);

OAuth-Anmeldung

Lösen Sie ein OAuth-Popup für jeden in Ihrem Dashboard konfigurierten Anbieter aus. Das Popup verarbeitet den PKCE-Flow und sendet nach Abschluss eine Nachricht zurück an Ihr Fenster.

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

Nur Anbieter, die in Ihrem Dashboard aktiviert sind, erscheinen im Anmelde-Modal. Stellen Sie sicher, dass Sie die Client-ID und das Secret für jeden Anbieter konfiguriert haben, den Sie unterstützen möchten.

Benutzer & Sitzung

// 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();

Ereignisse

Abonnieren Sie Authentifizierungs-Lebenszyklusereignisse mit authon.on(event, callback). Die Methode gibt eine Abmelde-Funktion zurück.

// 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();

Erscheinungsanpassung

Überschreiben Sie das Branding programmatisch über die appearance Konfiguration. Diese Einstellungen werden mit dem Branding zusammengeführt, das Sie im Dashboard festgelegt haben.

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",
  },
});

Bereinigung

Rufen Siedestroy() auf, um Ereignis-Listener zu entfernen, das Modal zu schließen und Sitzungsdaten zu löschen, wenn Ihre App ausgehängt wird.

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

Vollständiges Beispiel

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";
}