useLogin
Der useLogin-Hook bietet Methoden zum Auslösen des OAuth 2.0 Login-Flows per Redirect oder Popup.
Grundlegende Verwendung
Grundlegende Verwendung mit redirect-basiertem Login:
import { useLogin } from 'authsafe-react';
function LoginButton() {
const { signinRedirect, isLoading } = useLogin();
return (
<button onClick={() => signinRedirect()} disabled={isLoading}>
{isLoading ? 'Logging in...' : 'Login with AuthSafe'}
</button>
);
}Rückgabewerte
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
signinRedirect | (extraParams?) => Promise<void> | Funktion zum Auslösen des redirect-basierten Logins |
signinPopup | (extraParams?) => Promise<void> | Funktion zum Auslösen des popup-basierten Logins |
isLoading | boolean | Ob ein Login-Vorgang läuft |
error | Error | null | Fehlerobjekt bei fehlgeschlagenem Login |
Zusätzliche Parameter
Sie können zusätzliche Parameter an die Autorisierungsanfrage übergeben:
| Parameter | Typ | Beschreibung |
|---|---|---|
scope | string | Standard-Scopes für diese Login-Anfrage überschreiben |
prompt | string | Erzwingen Sie erneute Authentifizierung oder Zustimmung (z.B. 'login', 'consent', 'none') |
ui_locales | string | Bevorzugte UI-Sprache(n) für die Login-Seite |
login_hint | string | E-Mail-/Benutzername-Feld auf der Login-Seite vorausfüllen |
max_age | string | Maximales Authentifizierungsalter in Sekunden vor erneuter Authentifizierung |
Zusätzliche Parameter
import { useLogin } from 'authsafe-react';
function LoginButton() {
const { signinRedirect, isLoading, error } = useLogin();
const handleLogin = () => {
signinRedirect({
scope: 'openid profile email',
prompt: 'login',
ui_locales: 'en-US'
});
};
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<button onClick={handleLogin} disabled={isLoading}>
{isLoading ? 'Logging in...' : 'Login'}
</button>
);
}Popup vs Redirect
Sie können zwischen zwei Login-Strategien wählen:
import { useLogin } from 'authsafe-react';
function LoginButton() {
const { signinPopup, isLoading } = useLogin();
const handlePopupLogin = async () => {
try {
await signinPopup({ scope: 'openid profile email' });
} catch (err) {
console.error('Login failed:', err);
}
};
return (
<button onClick={handlePopupLogin} disabled={isLoading}>
{isLoading ? 'Logging in...' : 'Login with Popup'}
</button>
);
}Typdefinition
interface IUseLogin {
signinRedirect: (extraParams?: Record<string, string>) => Promise<void>;
signinPopup: (extraParams?: Record<string, string>) => Promise<void>;
isLoading: boolean;
error: Error | null;
}