React SDK

Offizielles AuthSafe SDK für React-Anwendungen. React-Integration mit Hooks, Komponenten und Providern für sichere OAuth 2.0 und OpenID Connect Authentifizierung.

v0.0.2

React 18+

TypeScript

Überblick

Das authsafe-react SDK bietet eine vollständige Authentifizierungslösung für React-Anwendungen, basierend auf oidc-client-ts und TanStack Query. Es bewältigt die gesamte Komplexität der OAuth 2.0 / OpenID Connect Flows mit einer einfachen, deklarativen API.

Installation

npm install

npm install authsafe-react

Schnellstart

Installieren Sie das Paket mit Ihrem bevorzugten Paketmanager:

1. SDK installieren

import { AuthProvider } 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>
  );
}

2. App mit AuthProvider umschließen

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

function MyApp() {
  const { login } = useLogin();
  const { user, isAuthenticated } = useAuth();
  const { logout } = useLogout();

  if (!isAuthenticated) {
    return <button onClick={() => login()}>Login</button>;
  }

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

Bereit zum Starten!

Sobald Sie Ihre App mit AuthProvider umschlossen haben, stehen alle Hooks in jeder untergeordneten Komponente zur Verfügung.

Verfügbare APIs

Entdecken Sie die verfügbaren APIs im React SDK:

Provider

AuthProvider — Root-Authentifizierungskontext-Provider

Hooks

useLogin() — Hook zum Auslösen von Login-Flows
useLogout() — Hook zum Abmelden von Benutzern
useAuth() — Hook für den Zugriff auf den Authentifizierungsstatus
useAuthCallback() — Hook zur Verarbeitung von OAuth-Callbacks

Komponenten

Profile — Vorgefertigte Profilverwaltungskomponente

Konfigurationsoptionen

interface AuthConfig {
  clientId: string;              // Required: Your application's client ID
  redirectUri: string;            // Required: OAuth callback URL
  scope?: Array<AuthScope>;       // Optional: Requested scopes
  env?: 'development' | 'production';  // Optional: Environment
  authority?: string;             // Optional: Custom authority URL
  popupRedirectUri?: string;      // Optional: Popup redirect URL
  automaticSilentRenew?: boolean; // Optional: Auto-renew tokens
}

Nächste Schritte

Das AuthSafe React SDK erfordert React 18+ und ist kompatibel mit jedem React-Framework, einschließlich Next.js, Vite und Create React App.