Erste Schritte

Schnellstart

Fügen Sie Ihrer App in unter 5 Minuten Authentifizierung hinzu.

Projekt erstellen

Melden Sie sich beimAuthon Dashboardan, erstellen Sie ein neues Projekt und kopieren Sie Ihren Öffentlichen Schlüssel aus dem Bereich API-Schlüssel.

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

SDK installieren

Installieren Sie das SDK für Ihr Framework:

bash

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

# Vue / Nuxt
npm install @authon/vue

# Vanilla JavaScript
npm install @authon/js

App einbinden

Umschließen Sie Ihre Stammkomponente mit AuthonProvider und übergeben Sie Ihren öffentlichen Schlüssel:

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

Routen schützen

Verwenden SieSignedIn und SignedOut Komponenten, um Inhalte bedingt zu rendern:

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

Auf Benutzerdaten zugreifen

Verwenden Sie denuseUser() Hook, um überall in Ihrer App auf den aktuellen Benutzer zuzugreifen:

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

Fertig!

Ihre App verfügt jetzt über vollständig verwaltete Authentifizierung. Benutzer können sich mit jedem Anbieter anmelden, den Sie im Dashboard aktiviert haben.

Wichtig: Benutzer mit Ihrer Datenbank synchronisieren

Wenn Ihre App eine eigene Benutzerdatenbank hat, müssen Sie einen Webhook einrichten, um Authon-Benutzer zu synchronisieren. Wenn sich ein Benutzer über Authon registriert, erscheint er nicht automatisch in der Datenbank Ihrer App. Registrieren Sie einen Webhook (user.created, user.updated, user.deleted), um Ihre Datenbank synchron zu halten.

Webhook-Benutzersynchronisation einrichten →

React SDK-Referenz

Vollständige API-Referenz für @authon/react

Next.js SDK-Referenz

Server-Komponenten, Middleware und mehr