SDK

JavaScript SDK

@authon/js — 모든 JavaScript 환경에서 동작하는 범용 브라우저 SDK. ShadowDOM을 통해 드롭인 로그인 모달을 렌더링하며, 완전한 외관 커스터마이징을 지원합니다.

npm: @authon/jsBrowserESM / CJS

설치

bash
npm install @authon/js

또는 빠른 프로토타이핑을 위해 CDN에서 로드하세요:

js
<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 루트에 렌더링되어 앱 스타일과 충돌하지 않습니다.

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

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

두 메서드 모두 비동기입니다 — 렌더링 전에 API에서 프로젝트 브랜딩과 OAuth 제공자 목록을 가져오므로, 모달은 항상 대시보드 설정을 반영합니다.

이메일 인증

완전 프로그래밍 방식의 흐름(예: 직접 만든 UI)에서는 이메일 메서드를 직접 호출하세요:

ts
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 흐름을 처리하고 완료 시 윈도우에 메시지를 전달합니다.

ts
// 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을 설정했는지 확인하세요.

사용자 & 세션

ts
// 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). 로 인증 라이프사이클 이벤트를 구독하세요. 이 메서드는 구독 해제 함수를 반환합니다.

ts
// 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 설정으로 프로그래밍 방식으로 브랜딩을 재정의하세요. 이 설정은 대시보드에 설정한 브랜딩과 병합됩니다.

ts
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() 를 호출하여 앱 언마운트 시 이벤트 리스너를 제거하고 모달을 닫고 세션 데이터를 삭제하세요.

ts
// 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";
}
Authon — 범용 인증 플랫폼