React アプリケーションにログインを追加

このガイドでは、Auth0 React SDK を使って、React ベースのシングルページアプリケーション（SPA）に Auth0 を統合し、認証 を追加して、ユーザープロファイル情報を表示する方法を紹介します。

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、agent skills を使って数分で Auth0 の認証を自動的に追加できます。

インストール:

npx skills add auth0/agent-skills --skill auth0

次に、AI アシスタントに以下のように依頼します。

Add Auth0 authentication to my React app

AI アシスタントが Auth0 アプリケーションを自動的に作成し、認証情報を取得して、@auth0/auth0-react をインストールし、Auth0Provider を設定し、必要なコンポーネントをすべて作成します。agent skills の完全なドキュメント →

前提条件: 始める前に、以下がインストールされていることを確認してください。

• Node.js 20 LTS 以降
• npm 10 以降、または yarn 1.22 以降、または pnpm 8 以降

インストールの確認: node --version && npm --version

React のバージョン互換性: この Quickstart は React 18.x 以降で動作します。

​

はじめる

この Quickstart では、React アプリケーションに Auth0 の認証を追加する方法を紹介します。Auth0 React SDK を使って、ログイン、ログアウト、ユーザープロファイル機能を備えた安全なシングルページアプリケーションを構築します。

1. 新しいプロジェクトを作成

   このQuickstart用に新しいReactプロジェクトを作成する

   npm create vite@latest auth0-react -- --template react-ts
   

   プロジェクトを開く

   cd auth0-react
   
2. Auth0 React SDKをインストールする

   npm add @auth0/auth0-react && npm install
   
3. Auth0 App をセットアップする

   次に、Auth0 テナントに新しいアプリを作成し、プロジェクトに環境変数を追加します。

   Auth0 アプリのセットアップ方法は 3 つあります。Quick Setup ツール (推奨) を使う方法、CLI コマンドを実行する方法、または Auth0 Dashboard で手動設定する方法です。

   Quick Setup（推奨）

   Auth0 App を作成し、適切な設定値があらかじめ入力された .env ファイルをコピーします。

   CLI

   プロジェクトのルートディレクトリで次のコマンドを実行し、Auth0 アプリを作成して .env ファイルを生成します。

   Mac

   # Auth0 CLI をインストールします（まだインストールしていない場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # Auth0 アプリをセットアップし、.env ファイルを生成します
   auth0 qs setup --app --type spa --framework react --build-tool vite --name "My App" --port 5173
   

   このコマンドでは次のことが行われます。

   1. 認証済みかどうかを確認します (必要に応じてログインを求められます)
   2. http://localhost:5173 用に設定された Auth0 シングルページアプリケーションを作成します
   3. VITE_AUTH0_DOMAIN と VITE_AUTH0_CLIENT_ID を含む .env ファイルを生成します

   Dashboard

   始める前に、プロジェクトのルートディレクトリに .env ファイルを作成してください

   .env

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

   1. Auth0 Dashboard に移動します
   2. アプリケーション > アプリケーション > Create Application をクリックします
   3. ポップアップでアプリ名を入力し、アプリの種類として Single Page Web Application を選択して Create をクリックします
   4. Application Details ページで Settings タブに切り替えます
   5. .env ファイルの YOUR_AUTH0_APP_DOMAIN と YOUR_AUTH0_APP_CLIENT_ID を、dashboard の Domain と Client ID の値に置き換えます

   最後に、Application Details ページの Settings タブで次の URL を設定します。

   Allowed Callback URLs:

   http://localhost:5173
   

   Allowed Logout URLs:

   http://localhost:5173
   

   Allowed Web Origins:

   http://localhost:5173
   

   Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致する URL がないとログイン処理は失敗し、ユーザーはアプリにアクセスできず、代わりに Auth0 のエラーページが表示されます。

   Allowed Logout URLs は、サインアウト後のシームレスなユーザーエクスペリエンスに不可欠です。一致する URL がないと、ユーザーはログアウト後にアプリケーションへリダイレクトされず、代わりに汎用的な Auth0 ページに残ることになります。

   Allowed Web Origins は Silent Authentication に不可欠です。これがないと、ユーザーはページを更新したときや、後でアプリに戻ったときにログアウトされます。

   .env ファイルが存在することを確認してください: cat .env (Mac/Linux) または type .env (Windows)

4. プロバイダーを追加する

   src/main.tsx

   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import './index.css'; // メインCSSファイルのインポート
   import App from './App.tsx';
   import { Auth0Provider } from '@auth0/auth0-react';
   
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <Auth0Provider
         domain={import.meta.env.VITE_AUTH0_DOMAIN}
         clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
         authorizationParams={{
           redirect_uri: window.location.origin
         }}
       >
         <App />
       </Auth0Provider>
     </StrictMode>
   );
   

5. Login、Logout、Profile コンポーネントを作成する

   ファイルを作成する

   Mac/Linux

   touch src/LoginButton.tsx && touch src/LogoutButton.tsx && touch src/Profile.tsx
   

   次のコードスニペットを追加します

6. アプリを起動する

   npm run dev
   

   ポート5173が使用中の場合は、npm run dev -- --port 5174 を実行し、Auth0 App の callback URL を http://localhost:5174 に更新してください

チェックポイント

これで、Auth0のログインページが localhost 上で正しく動作するようになっているはずです

---

​

高度な使い方

React Router でルートを保護する

Auth0 の認証状態を使用して、アプリケーション内の特定のルートを保護できます。

src/App.jsx

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import Profile from './components/Profile';
import Dashboard from './components/Dashboard';
import LoginButton from './components/LoginButton';

function ProtectedRoute({ children }) {
  const { isAuthenticated, isLoading } = useAuth0();
  
  if (isLoading) return <div>Loading...</div>;
  
  return isAuthenticated ? children : <Navigate to="/" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginButton />} />
        <Route 
          path="/profile" 
          element={
            <ProtectedRoute>
              <Profile />
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

保護された API を呼び出す

API の audience を含めるように Auth0Provider を設定し、getAccessTokenSilently メソッドを使用します。

src/main.jsx

import { Auth0Provider } from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Auth0Provider
    domain={import.meta.env.VITE_AUTH0_DOMAIN}
    clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: "YOUR_API_IDENTIFIER"
    }}
  >
    <App />
  </Auth0Provider>
);

次に、認証済みの API 呼び出しを行います。

src/components/ApiCall.jsx

import { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function ApiCall() {
  const { getAccessTokenSilently } = useAuth0();
  const [apiResponse, setApiResponse] = useState(null);

  const callProtectedApi = async () => {
    try {
      const token = await getAccessTokenSilently();
      
      const response = await fetch('/api/protected', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      
      const data = await response.json();
      setApiResponse(data);
    } catch (error) {
      console.error('API call failed:', error);
    }
  };

  return (
    <div>
      <button onClick={callProtectedApi}>Call API</button>
      {apiResponse && <pre>{JSON.stringify(apiResponse, null, 2)}</pre>}
    </div>
  );
}

export default ApiCall;

カスタムフックで Auth0 を使用する

一般的な認証パターン向けに、再利用可能なカスタムフックを作成します。

src/hooks/useAuthenticatedUser.js

import { useAuth0 } from '@auth0/auth0-react';
import { useEffect, useState } from 'react';

export function useAuthenticatedUser() {
  const { user, isAuthenticated, isLoading, getAccessTokenSilently } = useAuth0();
  const [accessToken, setAccessToken] = useState(null);

  useEffect(() => {
    if (isAuthenticated && !isLoading) {
      getAccessTokenSilently()
        .then(token => setAccessToken(token))
        .catch(console.error);
    }
  }, [isAuthenticated, isLoading, getAccessTokenSilently]);

  return {
    user,
    accessToken,
    isAuthenticated,
    isLoading
  };
}

コンポーネントでの使用例:

src/components/UserDashboard.jsx

import { useAuthenticatedUser } from '../hooks/useAuthenticatedUser';

function UserDashboard() {
  const { user, accessToken, isLoading } = useAuthenticatedUser();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {user?.name}</h1>
      <p>Access Token: {accessToken ? 'Available' : 'Not available'}</p>
    </div>
  );
}