@authon/js

v0.7.14

Published

2 days ago

Authon core browser SDK — ShadowDOM login modal, OAuth, session management

Downloads

3,152

0High
0Medium
0Low

mikusnuz

authon auth authentication login oauth sdk

English | 한국어

@authon/js

Drop-in browser authentication SDK — Auth0 alternative, open-source auth

Prerequisites

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

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.)
Get your API keys from Project Settings → API Keys
- Publishable Key (pk_live_...) — use in your frontend code
- Test Key (pk_test_...) — for development, enables Dev Teleport
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.

Install

npm install @authon/js

Quick Start

<!-- index.html -->
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
  <button id="sign-in-btn">Sign In</button>
  <div id="user-info"></div>

  <script type="module">
    import { Authon } from '@authon/js';

    const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');

    document.getElementById('sign-in-btn').addEventListener('click', () => {
      authon.openSignIn();
    });

    authon.on('signedIn', (user) => {
      document.getElementById('user-info').textContent = `Hello, ${user.email}`;
      document.getElementById('sign-in-btn').style.display = 'none';
    });
  </script>
</body>
</html>

Common Tasks

Add Google OAuth Login

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

const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');

// Opens popup, falls back to redirect if blocked
await authon.signInWithOAuth('google');

// Force redirect mode
await authon.signInWithOAuth('google', { flowMode: 'redirect' });

// Supported providers: google, apple, github, discord, facebook,
// microsoft, kakao, naver, line, x

Add Email/Password Auth

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

const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');

// Sign up
const user = await authon.signUpWithEmail('[email protected]', 'MyP@ssw0rd', {
  displayName: 'Alice',
});

// Sign in
const user = await authon.signInWithEmail('[email protected]', 'MyP@ssw0rd');

Get Current User

// Synchronous — no network request
const user = authon.getUser();
// { id, email, displayName, avatarUrl, emailVerified, ... }

const token = authon.getToken();
// Use token for authenticated API calls

Open Built-in Sign-In Modal

// ShadowDOM modal — no CSS conflicts with your app
await authon.openSignIn();
await authon.openSignUp();

Handle Sign Out

await authon.signOut();

Add Passkey (WebAuthn) Login

// Register passkey (user must be signed in)
const credential = await authon.registerPasskey('My MacBook');

// Sign in with passkey
const user = await authon.authenticateWithPasskey();

Add Web3 Wallet Login (MetaMask)

const { message } = await authon.web3GetNonce('0xAbc...', 'evm', 'metamask', 1);
const signature = await window.ethereum.request({
  method: 'personal_sign',
  params: [message, '0xAbc...'],
});
const user = await authon.web3Verify(message, signature, '0xAbc...', 'evm', 'metamask');

Add MFA (TOTP)

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

// Setup MFA (user must be signed in)
const setup = await authon.setupMfa();
document.getElementById('qr').innerHTML = setup.qrCodeSvg;
await authon.verifyMfaSetup('123456'); // code from authenticator app

// Sign in with MFA
try {
  await authon.signInWithEmail('[email protected]', 'password');
} catch (err) {
  if (err instanceof AuthonMfaRequiredError) {
    const user = await authon.verifyMfa(err.mfaToken, '123456');
  }
}

Listen to Auth Events

authon.on('signedIn', (user) => console.log('Signed in:', user.email));
authon.on('signedOut', () => console.log('Signed out'));
authon.on('error', (err) => console.error(err.message));
authon.on('mfaRequired', (mfaToken) => { /* show MFA dialog */ });
authon.on('tokenRefreshed', (token) => { /* update API client */ });

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | AUTHON_PUBLISHABLE_KEY | Yes | Project publishable key (pk_live_... or pk_test_...) | | AUTHON_API_URL | No | Optional — defaults to api.authon.dev |

API Reference

Constructor

new Authon(publishableKey: string, config?: AuthonConfig)

| Config Option | Type | Default | Description | |--------------|------|---------|-------------| | apiUrl | string | https://api.authon.dev | API base URL | | mode | 'popup' \| 'embedded' | 'popup' | Modal display mode | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | UI theme | | locale | string | 'en' | UI locale | | containerId | string | -- | Element ID for embedded mode | | appearance | Partial<BrandingConfig> | -- | Override branding |

Auth Methods

| Method | Returns | |--------|---------| | openSignIn() | Promise<void> | | openSignUp() | Promise<void> | | signInWithEmail(email, password) | Promise<AuthonUser> | | signUpWithEmail(email, password, meta?) | Promise<AuthonUser> | | signInWithOAuth(provider, options?) | Promise<void> | | signOut() | Promise<void> | | getUser() | AuthonUser \| null | | getToken() | string \| null |

Passwordless

| Method | Returns | |--------|---------| | sendMagicLink(email) | Promise<void> | | sendEmailOtp(email) | Promise<void> | | verifyPasswordless({ token?, email?, code? }) | Promise<AuthonUser> |

Passkeys (WebAuthn)

| Method | Returns | |--------|---------| | registerPasskey(name?) | Promise<PasskeyCredential> | | authenticateWithPasskey(email?) | Promise<AuthonUser> | | listPasskeys() | Promise<PasskeyCredential[]> | | renamePasskey(id, name) | Promise<PasskeyCredential> | | revokePasskey(id) | Promise<void> |

Web3

| Method | Returns | |--------|---------| | web3GetNonce(address, chain, walletType, chainId?) | Promise<Web3NonceResponse> | | web3Verify(message, signature, address, chain, walletType) | Promise<AuthonUser> | | listWallets() | Promise<Web3Wallet[]> | | linkWallet(params) | Promise<Web3Wallet> | | unlinkWallet(walletId) | Promise<void> |

MFA

| Method | Returns | |--------|---------| | setupMfa() | Promise<MfaSetupResponse & { qrCodeSvg }> | | verifyMfaSetup(code) | Promise<void> | | verifyMfa(mfaToken, code) | Promise<AuthonUser> | | getMfaStatus() | Promise<MfaStatus> | | disableMfa(code) | Promise<void> | | regenerateBackupCodes(code) | Promise<string[]> |

Organizations

| Method | Returns | |--------|---------| | organizations.list() | Promise<OrganizationListResponse> | | organizations.create(params) | Promise<AuthonOrganization> | | organizations.get(orgId) | Promise<AuthonOrganization> | | organizations.update(orgId, params) | Promise<AuthonOrganization> | | organizations.delete(orgId) | Promise<void> | | organizations.invite(orgId, params) | Promise<OrganizationInvitation> |

Events

| Event | Payload | |-------|---------| | signedIn | AuthonUser | | signedOut | -- | | tokenRefreshed | string | | mfaRequired | string (mfaToken) | | passkeyRegistered | PasskeyCredential | | web3Connected | Web3Wallet | | error | Error |

Comparison

| Feature | Authon | Clerk | Auth.js | |---------|--------|-------|---------| | Pricing | Free | $25/mo+ | Free | | OAuth providers | 10+ | 20+ | 80+ | | ShadowDOM modal | Yes | No | No | | MFA/Passkeys | Yes | Yes | Plugin | | Web3 auth | Yes | No | No | | Organizations | Yes | Yes | No |

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@authon/js

Prerequisites

Install

Quick Start

Common Tasks

Add Google OAuth Login

Add Email/Password Auth

Get Current User

Open Built-in Sign-In Modal

Handle Sign Out

Add Passkey (WebAuthn) Login

Add Web3 Wallet Login (MetaMask)

Add MFA (TOTP)

Listen to Auth Events

Environment Variables

API Reference

Constructor

Auth Methods

Passwordless

Passkeys (WebAuthn)

Web3

MFA

Organizations

Events

Comparison

License