SDK

SDK React

@authon/react — Componentes React e hooks para o Authon. Funciona com Create React App, Vite e qualquer projeto React 18+.

npm: @authon/reactReact 18+TypeScript

Instalação

bash

npm install @authon/react

AuthonProvider

Envolva a raiz do seu app com AuthonProvider. Todos os hooks e componentes devem ser renderizados dentro deste provider.

src/main.tsx

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

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

Props do Provider

Prop	Tipo	Descrição
publishableKey	string	Your pk_live_ or pk_test_ key from the dashboard
config.apiUrl	string?	Override the Authon API base URL
config.theme	'light' \| 'dark' \| 'auto'	Color theme for the modal (default: auto)
config.locale	string?	Locale string for the modal UI (default: en)
config.appearance	Partial<BrandingConfig>?	Override branding config programmatically

Hooks

useAuthon()

O hook principal para interagir com o estado de autenticação. Retorna o valor completo do contexto, incluindo métodos para abrir o modal, obter o token e sair.

tsx

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

function Header() {
  const {
    isSignedIn,
    isLoading,
    user,
    openSignIn,
    openSignUp,
    signOut,
    getToken,
  } = useAuthon();

  if (isLoading) return <Spinner />;

  return (
    <nav>
      {isSignedIn ? (
        <>
          <span>Hello, {user?.displayName}</span>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      ) : (
        <button onClick={() => openSignIn()}>Sign in</button>
      )}
    </nav>
  );
}

useUser()

Um hook focado que retorna apenas os dados do usuário e o estado de carregamento. Use em componentes que só precisam exibir informações do usuário.

tsx

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

function ProfileCard() {
  const { user, isLoading } = useUser();

  if (isLoading) return <Skeleton />;
  if (!user) return null;

  return (
    <div className="profile-card">
      {user.avatarUrl && (
        <img src={user.avatarUrl} alt={user.displayName ?? ""} />
      )}
      <h2>{user.displayName}</h2>
      <p>{user.email}</p>
      <span>Member since {new Date(user.createdAt).getFullYear()}</span>
    </div>
  );
}

Componentes

SignedIn / SignedOut

Renderize filhos condicionalmente com base no estado de autenticação. São a forma mais fácil de criar UIs conscientes de autenticação sem condicionais manuais.

tsx

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

function App() {
  return (
    <>
      <SignedIn>
        {/* Only rendered when user is signed in */}
        <Dashboard />
        <UserButton />
      </SignedIn>

      <SignedOut>
        {/* Only rendered when user is NOT signed in */}
        <LandingPage />
        <SignInButton />
      </SignedOut>
    </>
  );
}

Acione a UI modal do Authon. No modo popup , o modal abre na montagem. No modo embedded , o formulário é renderizado inline.

tsx

import { SignIn, SignUp } from "@authon/react";

// Popup — opens the modal when mounted
function LoginPage() {
  return <SignIn mode="popup" />;
}

// Embedded — renders a form container in-place
function SignUpPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignUp mode="embedded" />
    </div>
  );
}

UserButton

Botão de avatar drop-in com um menu suspenso de saída. Exibe o avatar do usuário, se disponível, ou recorre a iniciais com um fundo gradiente. Retorna null quando não está conectado.

tsx

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

function AppHeader() {
  return (
    <header className="flex items-center justify-between p-4">
      <Logo />
      <UserButton />
    </header>
  );
}

Rotas Protegidas

CombineuseAuthon()com o React Router para proteger rotas privadas:

components/ProtectedRoute.tsx

import { Navigate } from "react-router-dom";
import { useAuthon } from "@authon/react";

interface ProtectedRouteProps {
  children: React.ReactNode;
  redirectTo?: string;
}

export function ProtectedRoute({
  children,
  redirectTo = "/sign-in",
}: ProtectedRouteProps) {
  const { isSignedIn, isLoading } = useAuthon();

  if (isLoading) return <FullPageSpinner />;
  if (!isSignedIn) return <Navigate to={redirectTo} replace />;

  return <>{children}</>;
}

// Usage in router
const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  {
    path: "/dashboard",
    element: (
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    ),
  },
]);

Usando o Token

UsegetToken() para anexar o JWT às chamadas da sua API de backend:

tsx

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

function useApi() {
  const { getToken } = useAuthon();

  const apiFetch = async (path: string, init?: RequestInit) => {
    const token = getToken();
    return fetch(`/api${path}`, {
      ...init,
      headers: {
        ...init?.headers,
        Authorization: token ? `Bearer ${token}` : "",
        "Content-Type": "application/json",
      },
    });
  };

  return { apiFetch };
}

// In a component
function OrdersList() {
  const { apiFetch } = useApi();
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    apiFetch("/orders").then((r) => r.json()).then(setOrders);
  }, []);

  return <ul>{orders.map((o) => <li key={o.id}>{o.name}</li>)}</ul>;
}