useAuth
Der useAuth-Hook bietet Zugriff auf den aktuellen Authentifizierungsstatus einschließlich des Benutzerobjekts und des Ladestatus.
Grundlegende Verwendung
import { useAuth } from 'authsafe-react';
function UserProfile() {
const { user, isAuthenticated, isLoading } = useAuth();
if (isLoading) return <div>Loading...</div>;
if (!isAuthenticated) return <div>Please log in</div>;
return (
<div>
<h2>Welcome, {user?.name}!</h2>
<p>Email: {user?.email}</p>
</div>
);
}Rückgabewerte
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
user | User | null | Aktuelles Benutzerobjekt (null wenn nicht authentifiziert) |
isAuthenticated | boolean | Ob der Benutzer derzeit authentifiziert ist |
isLoading | boolean | Ob der Authentifizierungsstatus geladen wird |
error | Error | null | Authentifizierungsfehler, falls vorhanden |
Benutzerobjekt-Eigenschaften
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
sub | string | Eindeutige Benutzerkennung |
name | string | Anzeigename des Benutzers |
email | string | E-Mail-Adresse des Benutzers |
picture | string | undefined | URL zum Profilbild des Benutzers |
email_verified | boolean | undefined | Ob die E-Mail verifiziert wurde |
Routen schützen
Verwenden Sie den Hook, um Inhalte basierend auf dem Authentifizierungsstatus bedingt zu rendern:
import { useAuth } from 'authsafe-react';
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ children }) {
const { isAuthenticated, isLoading } = useAuth();
if (isLoading) return <div>Loading...</div>;
if (!isAuthenticated) return <Navigate to="/login" />;
return children;
}Typdefinitionen
export interface User {
sub: string;
name?: string;
email?: string;
picture?: string;
email_verified?: boolean;
[key: string]: any;
}
export interface IUseAuth {
user: User | null;
isAuthenticated: boolean;
isLoading: boolean;
error: Error | null;
}