AuthProvider
AuthProviderは、ReactアプリケーションのAuthSafe認証コンテキストを初期化するルートコンポーネントです。
基本的な使い方
アプリケーションのルートをAuthProviderでラップします。
import { AuthProvider } from 'authsafe-react';
function App() {
return (
<AuthProvider
config={{
clientId: 'your-client-id',
redirectUri: 'http://localhost:3000/callback',
}}
>
<YourApp />
</AuthProvider>
);
}プロパティ
| 財産 | タイプ | 必須 | 説明 |
|---|---|---|---|
config | AuthConfig | Yes | AuthSafe設定オブジェクト（必須） |
children | React.ReactNode | Yes | プロバイダー内でレンダリングする子コンポーネント |
queryClient | QueryClient | No | オプションのカスタム TanStack クエリ クライアント |
設定オプション
| オプション | タイプ | 必須 | デフォルト | 説明 |
|---|---|---|---|---|
clientId | string | Yes | — | AuthSafe OAuthクライアントID |
redirectUri | string | Yes | — | ログイン後にユーザーがリダイレクトされるURL |
scope | Array<AuthScope> | No | ['openid', 'profile'] | リクエストするOAuthスコープ（スペース区切りの文字列または配列） |
env | 'development' | 'production' | No | 'production' | 環境：「開発」または「生産」 |
authority | string | No | 'https://authsafe.in' | AuthSafe認証局のURL（オプション、環境変数から自動解決されます） |
popupRedirectUri | string | No | — | ポップアップ認証用のURI |
automaticSilentRenew | boolean | No | false | トークンの自動サイレント更新を有効にする |
完全な構成例
以下は、すべてのオプションを含む完全な設定例です。
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クエリ統合
AuthProvider は、データの取得とキャッシュに TanStack Query を使用します。必要に応じて、カスタム QueryClient を渡すこともできます。
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>
);
}型定義
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;
}