SDK

JavaScript SDK

@authon/js — あらゆるJavaScript環境で動作するユニバーサルブラウザSDK。ShadowDOMを通じてドロップインログインモーダルをレンダリングし、完全な外観カスタマイズをサポート。

npm: @authon/jsBrowserESM / CJS

インストール

bash

npm install @authon/js

または、素早いプロトタイピングのためにCDNから読み込む：

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

初期化

publishable keyで Authon インスタンスを作成。ダッシュボードの API Keys.

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

openSignIn() または openSignUp() を呼び出してAuthonモーダルを表示。モーダルはShadowDOMルートにレンダリングされるため、アプリのスタイルと競合しません。

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

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

両メソッドは非同期です — レンダリング前にAPIからプロジェクトのブランディングとOAuthプロバイダーリストを取得するため、モーダルは常にダッシュボード設定を反映します。

メール認証

完全プログラム的なフロー（例：独自カスタムUI）では、メールメソッドを直接呼び出してください：

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サインイン

ダッシュボードで設定されたプロバイダーのOAuthポップアップをトリガーします。ポップアップがPKCEフローを処理し、完了時にウィンドウにメッセージを送ります。

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

ダッシュボードで有効なプロバイダーのみログインモーダルに表示されます。サポートしたい各プロバイダーのclient IDとsecretを設定済みであることを確認してください。

ユーザー & セッション

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

イベント

authon.on(event, callback). で認証ライフサイクルイベントを購読。このメソッドは購読解除関数を返します。

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

外観のカスタマイズ

appearance 設定でブランディングをプログラム的にオーバーライド。これらの設定はダッシュボードで設定したブランディングとマージされます。

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

クリーンアップ

destroy() を呼び出して、アプリのアンマウント時にイベントリスナーを削除し、モーダルを閉じ、セッションデータをクリアします。

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

完全な例

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