Primeros pasos

Inicio rápido

Agrega autenticación a tu app en menos de 5 minutos.

Crea un proyecto

Inicia sesión en elPanel de Authon, crea un nuevo proyecto y copia tu Clave publicable desde la sección de Claves API.

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Instala el SDK

Instala el SDK para tu framework:

bash

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

# Vue / Nuxt
npm install @authon/vue

# Vanilla JavaScript
npm install @authon/js

Envuelve tu app

Envuelve tu componente raíz con AuthonProvider y pasa tu clave publicable:

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

Protege las rutas

Usa los componentesSignedIn y SignedOut para renderizar contenido de forma condicional:

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

Accede a los datos del usuario

Usa el hookuseUser() para acceder al usuario actual en cualquier parte de tu 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>
  );
}

¡Listo!

Tu app ahora tiene autenticación completamente gestionada. Los usuarios pueden iniciar sesión con cualquier proveedor que hayas habilitado en el panel.

Importante: Sincroniza los usuarios con tu base de datos

Si tu app tiene su propia base de datos de usuarios, debes configurar un webhook para sincronizar los usuarios de Authon. Cuando un usuario se registra a través de Authon, no aparecerá automáticamente en la base de datos de tu app. Registra un webhook (user.created, user.updated, user.deleted) para mantener tu base de datos sincronizada.

Configurar sincronización de usuarios por webhook →

Referencia del SDK de React

Referencia completa de la API para @authon/react

Referencia del SDK de Next.js

Componentes de servidor, middleware y más