Primeiros Passos

Início Rápido

Adicione autenticação ao seu app em menos de 5 minutos.

Crie um projeto

Entre noDashboard do Authon, crie um novo projeto e copie sua Chave Publicável na seção Chaves de API.

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Instale o SDK

Instale o SDK para o seu framework:

bash

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

# Vue / Nuxt
npm install @authon/vue

# Vanilla JavaScript
npm install @authon/js

Configure seu app

Envolva seu componente raiz com AuthonProvider e passe sua chave publicável:

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

Proteja as rotas

Use os componentesSignedIn e SignedOut para renderizar conteúdo condicionalmente:

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

Acesse os dados do usuário

Use o hookuseUser() para acessar o usuário atual em qualquer parte do seu 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>
  );
}

Pronto!

Seu app agora tem autenticação totalmente gerenciada. Os usuários podem entrar com qualquer provedor que você habilitou no dashboard.

Importante: Sincronize usuários com seu banco de dados

Se seu app tem seu próprio banco de dados de usuários, você precisa configurar um webhook para sincronizar os usuários do Authon. Quando um usuário se cadastra via Authon, ele não aparece automaticamente no banco de dados do seu app. Registre um webhook (user.created, user.updated, user.deleted) para manter seu banco de dados sincronizado.

Configurar sincronização de usuários via webhook →

Referência do SDK React

Referência completa da API para @authon/react

Referência do SDK Next.js

Componentes de servidor, middleware e mais