useLogin
The useLogin hook provides methods to trigger the OAuth 2.0 login flow via redirect or popup.
Basic Usage
Basic usage with redirect-based 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>
);
}Return Values
| Property | Type | Description |
|---|---|---|
signinRedirect | (extraParams?) => Promise<void> | Function to trigger redirect-based login |
signinPopup | (extraParams?) => Promise<void> | Function to trigger popup-based login |
isLoading | boolean | Whether a login operation is in progress |
error | Error | null | Error object if login failed |
Extra Parameters
You can pass additional parameters to the authorization request:
| Parameter | Type | Description |
|---|---|---|
scope | string | Override default scopes for this login request |
prompt | string | Force re-authentication or consent (e.g., 'login', 'consent', 'none') |
ui_locales | string | Preferred UI language(s) for the login page |
login_hint | string | Pre-fill the email/username field on the login page |
max_age | string | Maximum authentication age in seconds before re-auth is required |
Extra Parameters
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
You can choose between two login strategies:
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>
);
}Type Definition
interface IUseLogin {
signinRedirect: (extraParams?: Record<string, string>) => Promise<void>;
signinPopup: (extraParams?: Record<string, string>) => Promise<void>;
isLoading: boolean;
error: Error | null;
}