Prise en main

Démarrage rapide

Ajoutez l'authentification à votre application en moins de 5 minutes.

Créer un projet

Connectez-vous auTableau de bord Authon, créez un nouveau projet et copiez votre Clé publiable depuis la section Clés API.

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Installer le SDK

Installez le SDK pour votre framework :

bash

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

# Vue / Nuxt
npm install @authon/vue

# Vanilla JavaScript
npm install @authon/js

Envelopper votre application

Enveloppez votre composant racine avec AuthonProvider et passez votre clé publiable :

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

Protéger les routes

Utilisez les composantsSignedIn et SignedOut pour afficher le contenu de manière conditionnelle :

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

Accéder aux données utilisateur

Utilisez le hookuseUser() pour accéder à l'utilisateur actuel n'importe où dans votre application :

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

C'est terminé !

Votre application dispose maintenant d'une authentification entièrement gérée. Les utilisateurs peuvent se connecter avec n'importe quel fournisseur que vous avez activé dans le tableau de bord.

Important : Synchronisez les utilisateurs avec votre base de données

Si votre application possède sa propre base de données d'utilisateurs, vous devez configurer un webhook pour synchroniser les utilisateurs Authon. Lorsqu'un utilisateur s'inscrit via Authon, il n'apparaîtra pas automatiquement dans la base de données de votre application. Enregistrez un webhook (user.created, user.updated, user.deleted) pour maintenir votre base de données synchronisée.

Configurer la synchronisation des utilisateurs par webhook →

Référence SDK React

Référence API complète pour @authon/react

Référence SDK Next.js

Composants serveur, middleware et plus encore