React SDK

Reactアプリケーション向けAuthSafe公式SDK。React統合のためのフック、コンポーネント、プロバイダーが揃っており、OAuth 2.0とOpenID Connectの認証を安全に実装できます。

v0.0.2

React 18+

TypeScript

概要

authsafe-react SDKは、oidc-client-tsとTanStack Queryをベースに構築された、Reactアプリケーション向けのフル機能認証ソリューションを提供します。シンプルで宣言的なAPIにより、OAuth 2.0 / OpenID Connectフローの複雑な処理をすべて処理します。

インストール

npm install

npm install authsafe-react

クイックスタート

お好みのパッケージマネージャーを使用してパッケージをインストールしてください。

1. SDKをインストールする

import { AuthProvider } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production'
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

2. アプリをAuthProviderでラップする

import { useLogin, useAuth, useLogout } from 'authsafe-react';

function MyApp() {
  const { login } = useLogin();
  const { user, isAuthenticated } = useAuth();
  const { logout } = useLogout();

  if (!isAuthenticated) {
    return <button onClick={() => login()}>Login</button>;
  }

  return (
    <div>
      <h1>Welcome, {user?.name}!</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

出発準備完了！

アプリをAuthProviderでラップすると、すべてのフックが任意の子コンポーネントで使用できるようになります。

利用可能なAPI

React SDKで利用可能なAPIを調べてみましょう。

プロバイダー

AuthProvider — ルート認証コンテキストプロバイダー

フック

useLogin() — ログインフローをトリガーするためのフック
useLogout() — ユーザーをログアウトさせるためのフック
useAuth() — 認証状態にアクセスするためのフック
useAuthCallback() — OAuthコールバックを処理するためのフック

コンポーネント

Profile — 事前構築済みのプロファイル管理コンポーネント

設定オプション

interface AuthConfig {
  clientId: string;              // Required: Your application's client ID
  redirectUri: string;            // Required: OAuth callback URL
  scope?: Array<AuthScope>;       // Optional: Requested scopes
  env?: 'development' | 'production';  // Optional: Environment
  authority?: string;             // Optional: Custom authority URL
  popupRedirectUri?: string;      // Optional: Popup redirect URL
  automaticSilentRenew?: boolean; // Optional: Auto-renew tokens
}

次のステップ

AuthSafe React SDKはReact 18以降を必要とし、Next.js、Vite、Create React Appを含むあらゆるReactフレームワークと互換性があります。