English | 한국어

@authon/react

Drop-in React authentication with hooks and components — Auth0 alternative, open-source auth

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 keys 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.

Install

npm install @authon/react

Quick Start

// src/main.tsx — complete working file
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthonProvider, useAuthon, useUser, SignedIn, SignedOut, UserButton } from '@authon/react';

function App() {
  const { openSignIn, signOut } = useAuthon();
  const { user } = useUser();

  return (
    <div>
      <SignedOut>
        <button onClick={() => openSignIn()}>Sign In</button>
      </SignedOut>
      <SignedIn>
        <p>Welcome, {user?.email}</p>
        <UserButton />
        <button onClick={() => signOut()}>Sign Out</button>
      </SignedIn>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <AuthonProvider
    publishableKey="pk_live_YOUR_PUBLISHABLE_KEY"
  >
    <App />
  </AuthonProvider>
);

Common Tasks

Add Google OAuth Login

import { useAuthon } from '@authon/react';

function GoogleLoginButton() {
  const { client } = useAuthon();
  return (
    <button onClick={() => client?.signInWithOAuth('google')}>
      Sign in with Google
    </button>
  );
}

Protect a Route

import { Protect } from '@authon/react';

function Dashboard() {
  return (
    <Protect fallback={<p>Please sign in to view this page.</p>}>
      <h1>Dashboard</h1>
    </Protect>
  );
}

// With role-based condition
function AdminPanel() {
  return (
    <Protect
      condition={(user) => user.publicMetadata?.role === 'admin'}
      fallback={<p>Admin access required.</p>}
    >
      <h1>Admin Panel</h1>
    </Protect>
  );
}

Get Current User

import { useUser } from '@authon/react';

function Profile() {
  const { user, isLoading } = useUser();
  if (isLoading) return <p>Loading...</p>;
  if (!user) return <p>Not signed in</p>;
  return (
    <div>
      <p>Email: {user.email}</p>
      <p>Name: {user.displayName}</p>
    </div>
  );
}

Add Email/Password Auth

import { useAuthon } from '@authon/react';
import { useState } from 'react';

function EmailSignIn() {
  const { client } = useAuthon();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await client?.signInWithEmail(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign In</button>
    </form>
  );
}

Handle Sign Out

import { useAuthon } from '@authon/react';

function SignOutButton() {
  const { signOut } = useAuthon();
  return <button onClick={() => signOut()}>Sign Out</button>;
}

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

Components

| Component | Description | |-----------|-------------| | <AuthonProvider> | Context provider. Props: publishableKey, config? | | <SignIn> | Pre-built sign-in form (mode="popup" or "embedded") | | <SignUp> | Pre-built sign-up form | | <UserButton> | Avatar dropdown with user info and sign-out | | <UserProfile> | Full user profile management | | <SignedIn> | Renders children only when signed in | | <SignedOut> | Renders children only when signed out | | <Protect> | Conditional render with fallback and condition | | <SocialButton> | Single OAuth provider button | | <SocialButtons> | All enabled OAuth provider buttons |

Hooks

| Hook | Returns | |------|---------| | useAuthon() | { isSignedIn, isLoading, user, signOut, openSignIn, openSignUp, getToken, client } | | useUser() | { user, isLoading } | | useAuthonMfa() | MFA setup, verification, and management | | useAuthonPasskeys() | Passkey registration and authentication | | useAuthonPasswordless() | Magic link and email OTP | | useAuthonWeb3() | Web3 wallet sign-in and management | | useAuthonSessions() | List and revoke active sessions | | useOrganization() | Active organization management | | useOrganizationList() | List and switch organizations |

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