Schnellstartanleitung

Bringen Sie Ihre Anwendung in weniger als 10 Minuten mit AuthSafe-Authentifizierung zum Laufen.

5-10 Minuten

React SDK

OAuth 2.0

Bevor Sie beginnen

Voraussetzungen

Node.js 16 oder neuer
Eine React-Anwendung
Ein AuthSafe-Konto
Eine registrierte App mit Client-Zugangsdaten

Was Sie erstellen

Login- und Logout-Ablauf
OAuth-Callback-Verarbeitung
Authentifizierte Benutzersitzung
Ein geschuetztes App-Erlebnis

Schritt 1: Anwendung registrieren

Erstellen Sie eine Anwendung im AuthSafe-Dashboard und kopieren Sie Client-ID und Redirect-URI.

Client-ID sicher aufbewahren

Client-IDs sind fuer Frontend-Code unkritisch, aber Client-Secrets duerfen nie im Browser landen.

Schritt 2: SDK installieren

npm install authsafe-react
# or
yarn add authsafe-react
# or
pnpm add authsafe-react

Schritt 3: AuthProvider konfigurieren

Umschliessen Sie Ihre App mit AuthProvider, damit AuthSafe initialisiert wird und Auth-Status bereitsteht.

import { AuthProvider } from 'authsafe-react';

export default function RootLayout({ children }) {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id-here',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production',
      }}
    >
      {children}
    </AuthProvider>
  );
}

Schritt 4: OAuth-Callback-Route anlegen

Erstellen Sie eine Callback-Seite, die den Redirect verarbeitet und den Login abschliesst.

'use client';

import { useOAuthCallback } from 'authsafe-react';

export default function CallbackPage() {
  const { isLoading, error } = useOAuthCallback();

  if (isLoading) return <div>Processing login...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Login successful! Redirecting...</div>;
}

Vollstaendiges Beispiel

import { AuthProvider, useLogin, useAuth, useLogout } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production',
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

function LoginButton() {
  const { signinRedirect, isLoading } = useLogin();

  return (
    <button onClick={() => signinRedirect()} disabled={isLoading}>
      {isLoading ? 'Logging in...' : 'Login with AuthSafe'}
    </button>
  );
}

function UserProfile() {
  const { user, isAuthenticated } = useAuth();
  const { logout } = useLogout();

  if (!isAuthenticated) {
    return <LoginButton />;
  }

  return (
    <div>
      <h2>Welcome, {user?.name || user?.email}</h2>
      <button onClick={() => logout()}>Logout</button>
    </div>
  );
}

Naechste Schritte

React SDK entdecken

Lernen Sie Hooks, Provider-Setup und Komponenten fuer den Produktiveinsatz kennen.

React SDK Doku ansehen ->

Autorisierungsleitfaden

Verstehen Sie Scopes, Zugriffskontrolle und den Schutz von Ressourcen.

Autorisierungs-Doku ansehen ->

API-Referenz

Erkunden Sie Endpunktverhalten, Request-Muster und Response-Formate.

API-Doku ansehen ->