ログインを使用する
useLoginフックは、リダイレクトまたはポップアップを介してOAuth 2.0ログインフローをトリガーするためのメソッドを提供します。
基本的な使い方
リダイレクトベースのログインにおける基本的な使用方法：
import { useLogin } from 'authsafe-react';
function LoginButton() {
const { signinRedirect, isLoading } = useLogin();
return (
<button onClick={() => signinRedirect()} disabled={isLoading}>
{isLoading ? 'Logging in...' : 'Login with AuthSafe'}
</button>
);
}戻り値
| 財産 | タイプ | 説明 |
|---|---|---|
signinRedirect | (extraParams?) => Promise<void> | リダイレクトベースのログインをトリガーする機能 |
signinPopup | (extraParams?) => Promise<void> | ポップアップベースのログインをトリガーする機能 |
isLoading | boolean | ログイン操作が進行中かどうか |
error | Error | null | ログイン失敗時のエラーオブジェクト |
追加パラメータ
認証リクエストに追加のパラメータを渡すことができます。
| パラメータ | タイプ | 説明 |
|---|---|---|
scope | string | このログインリクエストのデフォルトスコープを上書きします |
prompt | string | 再認証または同意を強制する（例：「ログイン」、「同意」、「なし」） |
ui_locales | string | ログインページの優先UI言語 |
login_hint | string | ログインページのメールアドレス/ユーザー名欄に事前入力する |
max_age | string | 再認証が必要になるまでの最大認証有効時間（秒単位） |
追加パラメータ
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>
);
}ポップアップとリダイレクト
ログイン方法は2種類から選択できます。
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>
);
}型定義
interface IUseLogin {
signinRedirect: (extraParams?: Record<string, string>) => Promise<void>;
signinPopup: (extraParams?: Record<string, string>) => Promise<void>;
isLoading: boolean;
error: Error | null;
}