SDK

SDK de React

@authon/react — Componentes y hooks de React para Authon. Compatible con Create React App, Vite y cualquier proyecto React 18+.

npm: @authon/reactReact 18+TypeScript

Instalación

bash

npm install @authon/react

AuthonProvider

Envuelve la raíz de tu app con AuthonProvider. Todos los hooks y componentes deben renderizarse dentro de este proveedor.

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 del proveedor

Prop	Tipo	Descripción
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()

El hook principal para interactuar con el estado de autenticación. Retorna el valor completo del contexto, incluidos los métodos para abrir el modal, obtener el token y cerrar sesión.

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()

Un hook enfocado que solo retorna los datos del usuario y el estado de carga. Úsalo en componentes que solo necesiten mostrar información del usuario.

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

Renderiza hijos de forma condicional según el estado de autenticación. Son la forma más sencilla de construir UIs con consciencia de autenticación sin condicionales manuales.

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>
    </>
  );
}

Activa la UI modal de Authon. En modo popup , el modal se abre al montar. En modo embedded , el formulario se renderiza en línea.

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ón de avatar integrado con un menú desplegable para cerrar sesión. Muestra el avatar del usuario si está disponible, o recurre a las iniciales con fondo degradado. Retorna null cuando no hay sesión iniciada.

tsx

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

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

Rutas protegidas

CombinauseAuthon()con React Router para proteger rutas 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 el token

UsagetToken() para adjuntar el JWT a las llamadas de tu API 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>;
}