Getting Started

Quickstart

Add authentication to your app in under 5 minutes.

Create a project

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Install the SDK

Install the SDK for your framework:

bash

# React / Next.js
npm install @authon/react

# Vue / Nuxt
npm install @authon/vue

# Vanilla JavaScript
npm install @authon/js

# Node.js (server-side)
npm install @authon/node

Wrap your app

Wrap your root component with AuthonProvider and pass your publishable key:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { AuthonProvider } from "@authon/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AuthonProvider publishableKey="pk_live_your_key">
      <App />
    </AuthonProvider>
  </React.StrictMode>
);

Protect routes

Use SignedIn and SignedOut components to conditionally render content:

src/App.tsx

import {
  SignedIn,
  SignedOut,
  UserButton,
  SignIn,
  useUser,
} from "@authon/react";

export default function App() {
  return (
    <div>
      <header>
        <SignedIn>
          <UserButton />
        </SignedIn>
        <SignedOut>
          <SignIn mode="popup" />
        </SignedOut>
      </header>

      <main>
        <SignedIn>
          <Dashboard />
        </SignedIn>
        <SignedOut>
          <LandingPage />
        </SignedOut>
      </main>
    </div>
  );
}

Access user data

Use the useUser() hook to access the current user anywhere in your app:

src/Dashboard.tsx

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

export default function Dashboard() {
  const { user, isLoaded } = useUser();

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {user?.displayName}!</h1>
      <p>Email: {user?.email}</p>
      <p>User ID: {user?.id}</p>
    </div>
  );
}

You're done!

Your app now has fully managed authentication. Users can sign in with any provider you've enabled in the dashboard.

React SDK Reference

Full API reference for @authon/react

Next.js SDK Reference

Server components, middleware, and more