AuthProvider

AuthProvider ist die Root-Komponente, die den AuthSafe-Authentifizierungskontext für Ihre React-Anwendung initialisiert.

Grundlegende Verwendung

Umschließen Sie Ihre Anwendungswurzel mit AuthProvider:

import { AuthProvider } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

Props

Eigenschaft	Typ	Erforderlich	Beschreibung
`config`	`AuthConfig`	Yes	AuthSafe-Konfigurationsobjekt (erforderlich)
`children`	`React.ReactNode`	Yes	Untergeordnete Komponenten zum Rendern innerhalb des Providers
`queryClient`	`QueryClient`	No	Optionaler benutzerdefinierter TanStack Query Client

Konfigurationsoptionen

Option	Typ	Erforderlich	Standard	Beschreibung
`clientId`	`string`	Yes	—	Ihre AuthSafe OAuth Client-ID
`redirectUri`	`string`	Yes	—	URL, zu der Benutzer nach dem Login weitergeleitet werden
`scope`	`Array<AuthScope>`	No	`['openid', 'profile']`	Anzufordernde OAuth-Scopes (durch Leerzeichen getrennt oder Array)
`env`	`'development' \| 'production'`	No	`'production'`	Umgebung: 'development' oder 'production'
`authority`	`string`	No	`'https://authsafe.in'`	AuthSafe Authority-URL (optional, wird aus env aufgelöst)
`popupRedirectUri`	`string`	No	—	URI für Popup-basierte Authentifizierung
`automaticSilentRenew`	`boolean`	No	`false`	Automatische stille Token-Erneuerung aktivieren

Vollständiges Konfigurationsbeispiel

Hier ist ein vollständiges Konfigurationsbeispiel mit allen Optionen:

import { AuthProvider } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email', 'offline_access'],
        env: 'production',
        authority: 'https://authsafe.in',
        popupRedirectUri: 'http://localhost:3000/popup-callback',
        automaticSilentRenew: true,
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

TanStack Query Integration

AuthProvider verwendet TanStack Query für Datenabruf und Caching. Sie können bei Bedarf einen benutzerdefinierten QueryClient übergeben:

import { AuthProvider } from 'authsafe-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { Locale } from '@/utils/locale';

const queryClient = new QueryClient();

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

Benutzerdefinierter QueryClient

Automatisches Caching und Deduplizierung von Auth-Anfragen
Hintergrund-Aktualisierung für veraltete Daten
Optimistische Updates für bessere UX
Integrierte Wiederholungslogik für fehlgeschlagene Anfragen

Hinweis

Wenn Sie bereits TanStack Query in Ihrer App verwenden, übergeben Sie Ihren vorhandenen QueryClient an AuthProvider, um den Cache zu teilen.

Typdefinitionen

export interface User {
  sub: string;
  email?: string;
  name?: string;
  email_verified?: boolean;
  [key: string]: any;
}

export type AuthScope = "openid" | "profile" | "email" | "offline_access";

export interface AuthConfig {
  clientId: string;
  redirectUri: string;
  scope?: Array<AuthScope>;
  env?: "development" | "production";
  authority?: string;
  popupRedirectUri?: string;
  automaticSilentRenew?: boolean;
}

export interface AuthProviderProps {
  config: AuthConfig;
  children: React.ReactNode;
  queryClient?: QueryClient;
}

Root-Level Provider

AuthProvider sollte am Stamm Ihres Komponentenbaums platziert werden, damit alle Komponenten Zugriff auf den Authentifizierungsstatus haben.

Sicherheitshinweise

Geben Sie niemals Ihr Client-Secret im Frontend-Code preis
Verwenden Sie Umgebungsvariablen für alle sensiblen Konfigurationen
Aktivieren Sie stille Token-Erneuerung in der Produktion für nahtlose UX
Legen Sie geeignete Scopes fest — fordern Sie nur an, was Sie benötigen