Authon SDK

Official SDKs for Authon — a modern authentication platform. Provides drop-in auth for any framework.

Packages

JavaScript / TypeScript

Package	Version	Description	npm
@authon/shared	0.3.0	Shared types and constants for all Authon SDKs	npm
@authon/js	0.7.14	Core browser SDK — ShadowDOM modal, OAuth, sessions, CAPTCHA, i18n (21 languages)	npm
@authon/react	0.3.2	Provider, hooks, and components for React	npm
@authon/nextjs	0.3.0	Middleware and React components for Next.js	npm
@authon/vue	0.3.3	Plugin, composables, and components for Vue 3	npm
@authon/nuxt	0.3.3	Auto-imported composables and middleware for Nuxt 3	npm
@authon/svelte	0.3.3	Stores and components for Svelte	npm
@authon/angular	0.3.3	Service, guard, and components for Angular	npm
@authon/react-native	0.3.10	Mobile authentication for React Native	npm
@authon/create-app	0.1.0	CLI scaffolding tool — create new projects with Authon pre-configured	npm

Features

• Email / Password — Sign up, sign in, password reset
• OAuth — Google, Apple, GitHub, Discord, Facebook, Microsoft, Kakao, Naver, LINE, X
• Passwordless — Magic link and email OTP
• Passkeys (WebAuthn) — Register, authenticate, manage credentials
• Web3 — EVM wallet (MetaMask, WalletConnect, Coinbase Wallet, Pexus) and Solana (Phantom)
• MFA (TOTP) — Google Authenticator / Authy compatible, backup codes
• Session Management — List and revoke active sessions
• User Profile — Update display name, avatar, phone, and custom metadata
• Webhook Verification — Validate incoming webhook payloads from Authon

Prerequisites

Before installing the SDK, create an Authon project and get your API keys:

1. Create a project at Authon Dashboard

   • Click "Create Project" and enter your app name
   • Select the authentication methods you want (Email/Password, OAuth providers, etc.)

2. Get your API key from Project Settings → API Keys

   • Publishable Key (pk_live_...) — use in your frontend code
   • Test Key (pk_test_...) — for development, enables Dev Teleport

3. Configure OAuth providers (optional) in Project Settings → OAuth

   • Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
   • Set the redirect URL to https://api.authon.dev/v1/auth/oauth/redirect

Test vs Live keys: Use pk_test_... during development. Switch to pk_live_... before deploying to production. Test keys use a sandbox environment with no rate limits.

Quick Start

Vanilla JavaScript

npm install @authon/js

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

const authon = new Authon('pk_live_...');

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

// Or sign in programmatically
const user = await authon.signInWithEmail('user@example.com', 'password');
console.log(user.displayName);

// Listen for auth state changes
authon.on('signedIn', (user) => {
  console.log('Signed in as', user.email);
});

authon.on('signedOut', () => {
  console.log('Signed out');
});

// Get the current user and token
const currentUser = authon.getUser();
const token = authon.getToken();

// Sign out
await authon.signOut();

See the full @authon/js README for all available methods.

React

npm install @authon/react

import { AuthonProvider, SignedIn, SignedOut, UserButton, useAuthon } from '@authon/react';
import { useUser } from '@authon/react';

function App() {
  return (
    <AuthonProvider publishableKey="pk_live_...">
      <SignedIn>
        <UserButton />
        <Dashboard />
      </SignedIn>
      <SignedOut>
        <LandingPage />
      </SignedOut>
    </AuthonProvider>
  );
}

function Dashboard() {
  const { user } = useUser();
  return <h1>Welcome, {user?.displayName}</h1>;
}

function LandingPage() {
  const { openSignIn } = useAuthon();
  return <button onClick={openSignIn}>Sign in</button>;
}

Next.js

npm install @authon/nextjs

// middleware.ts
import { authMiddleware } from '@authon/nextjs';

export default authMiddleware({
  publishableKey: process.env.NEXT_PUBLIC_AUTHON_KEY!,
  publicRoutes: ['/', '/about', '/pricing'],
});

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'],
};

// app/layout.tsx
import { AuthonProvider } from '@authon/nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <AuthonProvider publishableKey={process.env.NEXT_PUBLIC_AUTHON_KEY!}>
          {children}
        </AuthonProvider>
      </body>
    </html>
  );
}

// Server-side token verification
import { currentUser } from '@authon/nextjs/server';

export async function GET() {
  const user = await currentUser();
  if (!user) return new Response('Unauthorized', { status: 401 });
  return Response.json({ user });
}

Package READMEs

• @authon/js — Core browser SDK (full API reference)
• @authon/react
• @authon/nextjs
• @authon/vue
• @authon/nuxt
• @authon/svelte
• @authon/angular
• @authon/react-native

Documentation

Full documentation: authon.dev/docs

Website: authon.dev

Contributing

We welcome contributions. Please open an issue first to discuss any changes you'd like to make.

git clone https://github.com/mikusnuz/authon-sdk.git
cd authon-sdk
pnpm install

# Build all packages
pnpm build

# Development mode (watch)
pnpm dev

License

MIT