クイックスタートガイド
AuthSafe認証を使って、わずか10分以内にアプリケーションを稼働させましょう。このガイドでは、安全な認証をアプリに統合するための重要な手順を順を追って説明します。
5～10分
React SDK
OAuth 2.0
始める前に
前提条件
- Node.js 16以降
- Reactアプリケーション
- AuthSafeアカウント
- クライアント認証情報を持つ登録済みアプリ
あなたが構築するもの
- ログインとログアウトの流れ
- OAuthコールバック処理
- 認証済みユーザーセッション
- 保護されたアプリ体験
ステップ1：アプリケーションを登録する
AuthSafeダッシュボードでアプリケーションを作成し、クライアントIDとリダイレクトURIをコピーしてください。
ステップ2：SDKをインストールする
npm install authsafe-react
# or
yarn add authsafe-react
# or
pnpm add authsafe-reactステップ3：認証プロバイダーの設定
AuthProvider でアプリをラップして AuthSafe を初期化し、認証状態を利用可能にします。
import { AuthProvider } from 'authsafe-react';
export default function RootLayout({ children }) {
return (
<AuthProvider
config={{
clientId: 'your-client-id-here',
redirectUri: 'http://localhost:3000/callback',
scope: ['openid', 'profile', 'email'],
env: 'production',
}}
>
{children}
</AuthProvider>
);
}ステップ4：OAuthコールバックルートを追加する
リダイレクトを処理し、ユーザーのサインインを完了させるコールバックページを作成します。
'use client';
import { useOAuthCallback } from 'authsafe-react';
export default function CallbackPage() {
const { isLoading, error } = useOAuthCallback();
if (isLoading) return <div>Processing login...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Login successful! Redirecting...</div>;
}完全な例
import { AuthProvider, useLogin, useAuth, useLogout } 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>
);
}
function LoginButton() {
const { signinRedirect, isLoading } = useLogin();
return (
<button onClick={() => signinRedirect()} disabled={isLoading}>
{isLoading ? 'Logging in...' : 'Login with AuthSafe'}
</button>
);
}
function UserProfile() {
const { user, isAuthenticated } = useAuth();
const { logout } = useLogout();
if (!isAuthenticated) {
return <LoginButton />;
}
return (
<div>
<h2>Welcome, {user?.name || user?.email}</h2>
<button onClick={() => logout()}>Logout</button>
</div>
);
}