OktaのAuth0を使ってReactアプリにログイン機能を追加してみる

こんにちは。ネットワールド技術担当の山下です。

Webアプリを作っていると、どこかのタイミングで「そろそろログイン機能が必要だな」となりますよね。
ただ、認証まわりを全部自前で作ろうとすると、画面だけでは済みません。ユーザー管理、パスワード管理、セキュリティ対策、ソーシャルログイン対応など、考えることが一気に増えてきます。

そこで今回は、OktaのAuth0を使って、Reactアプリケーションにログイン機能を追加する検証をやってみました。
題材は Vite + React + TypeScript のシンプルな SPA です。Auth0 React SDK を使って、ログイン、ログアウト、ユーザー情報表示まで確認していきます。

Auth0とは？

Auth0 は、アプリや Web サービスにログイン機能を簡単かつ安全に組み込める認証・認可プラットフォームです。
ざっくり言うと、認証機能を一から開発しなくても、セキュリティを保ちながら開発工数を大幅に削減できるサービスです。

Auth0 は「Okta Customer Identity Cloud（Okta CIC）」として提供されており、主に次のような機能を利用できます。

- ソーシャルログイン
Google、Apple、GitHub、LINE などのアカウントを使ったログイン

- シングルサインオン（SSO）
一度のログインで複数の関連サービスを利用できる構成

- 多要素認証（MFA）
ワンタイムパスワードや SMS 認証など、パスワード以外の認証手段を追加

- パスワードレス認証
メールのマジックリンクや生体認証（指紋など）を使ったログイン

- 高度なセキュリティ
ボット検出や脆弱なパスワードの検知など、最新の脅威への対策

このあたりを全部自前で面倒を見るのはかなり大変なので、まずは Auth0 のようなサービスで認証の土台を固めるのはかなり有力な選択肢です。

Auth0を使うと何がうれしいのか

今回触ってみて分かりやすかったメリットは、主にこの3つでした。

1. Reactへの組み込みがかなり早い
公式ドキュメントと SDK が充実しているので、最初の一歩がかなり軽いです。

今回も `@auth0/auth0-react` を追加して、`Auth0Provider` と `useAuth0` を使うだけで、認証の基本部分を組み込めました。

2. 認証基盤を自前で持たなくてよい
ログイン画面やユーザー情報管理の裏側をゼロから持つ必要がありません。
認証サーバーの保守・運用やセキュリティリスクを外部（Auth0）に任せられるのは、かなり大きいポイントです。

3. 柔軟にカスタマイズ・拡張できる
認証画面のカスタマイズや、特定の条件下で処理を実行する「Actions」機能を使って独自のビジネスロジックを組み込めます。

今回はシンプルなログイン検証ですが、その先で MFA や SSO、ソーシャルログインにも広げやすいです。

今回の検証構成

今回の構成はかなりシンプルです。

- フロントエンドは React のシングルページアプリケーション（SPA）
- 認証基盤として Auth0（Okta CIC）を使用
- React 側には Auth0 React SDK を導入
- 認証情報（ユーザーID・パスワード）の管理は Auth0 側で行う

つまり、React アプリから Auth0 にログインし、認証後にユーザー情報を受け取って画面に表示する流れです。

前提条件

検証前に、以下が入っていることを確認しておきます。

- Node.js 20 LTS 以上（https://nodejs.org/ja/download）
- npm 10 以上
- React 18.x 以降
- Auth0 アカウント

バージョン確認は以下でOKです。

```bash
node --version
npm --version
```

※ 手順の詳細は、Auth0 公式の React Quickstart も参考になります。
https://auth0.com/docs/quickstart/spa/react

まずはReactプロジェクトを作成

では、早速やっていきましょう！

今回は Vite を使って React + TypeScript のプロジェクトを作成します。

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

実行後、インストール確認が表示されたら「Yes」を選ぶと、依存関係のインストールと開発サーバーの起動まで自動で行われます。

```bash
cd auth0-react
```

ブラウザで `http://localhost:5173` にアクセスして、Vite の初期画面が表示されることを確認します。

```bash
npm run dev
```

表示確認ができたら、ターミナルで `Ctrl + C` を押して停止し、次へ進みます。
この画面を、Auth0 でログイン／ログアウトできるアプリに改修していきます。

Auth0 React SDKを追加

続いて、Auth0 React SDK を追加します。

```bash
npm add @auth0/auth0-react
```

依存関係は自動でインストールされるため、通常は `npm install` の再実行は不要です。

これで React から Auth0 を扱う準備ができました。

環境変数を設定

プロジェクトルートに `.env` ファイルを作成して、次の2つを設定します。

```bash
VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
```

Vite では、`VITE_` が付いた環境変数のみ `import.meta.env` から参照できます。
ここは地味ですが大事なので、忘れずに押さえておきたいところです。

なお、実際の値はこのあと Auth0 ダッシュボードでアプリを作成したときに取得します。

Auth0側でアプリケーションを作成

まずは Auth0 のアカウントを作成し、ダッシュボードへログインします。

- Auth0 公式サイト: https://auth0.com/jp

- ダッシュボード: https://manage.auth0.com/dashboard/

※ 必要に応じて、画面右上のメニューから表示言語を「日本語」に変更できます。

ダッシュボードにログイン後、左メニューから「アプリケーション」→「アプリケーション」を開き、「アプリケーションを作成」をクリックします。

ポップアップ画面でアプリ名を入力します。今回のような React アプリでは、アプリケーション種別は「シングルページ Web アプリケーション」を選択して「作成」ボタンをクリックします。

作成後は「設定」タブを開き、画面をスクロールして以下の値を確認します。

- ドメイン
- クライアント ID

この2つを、先ほど作成した `.env` に反映します。

```bash
VITE_AUTH0_DOMAIN=取得したドメイン
VITE_AUTH0_CLIENT_ID=取得したクライアントID
```

さらに、「アプリケーションの URI」欄で以下3つを設定し、「Save」ボタンをクリックします。

- 許可するCallback URL : http://localhost:5173
- 許可するログアウトURL: http://localhost:5173
- 許可するWebオリジン: http://localhost:5173

ここが揃っていないとローカル検証でハマりやすいので、先にまとめて入れておくのがおすすめです（笑）

検証用ユーザーを作成

続いて、ログイン確認用のユーザーを作成します。

左メニューから「ユーザー管理」→「ユーザー」を選び、「ユーザーを作成」をクリックします。

作成方法は「UIで作成」を選択し、ポップアップ画面でメールアドレスとパスワードを入力して「作成」ボタンをクリックします。

作成後は確認メールが届くので、メール内のリンクをクリックしてメールアドレスの確認まで済ませておきます。
ここまで終われば、通常ログインの準備はできています。

ReactアプリにAuth0Providerを追加

次に、React アプリ全体を `Auth0Provider` でラップします。

`src/main.tsx` の内容を以下のように書き換えてください。

```tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.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} // Auth0のドメイン
clientId={import.meta.env.VITE_AUTH0_CLIENT_ID} // Auth0のクライアントID
cacheLocation="localstorage" // トークンをlocalStorageに保存（リロード後も維持）
authorizationParams={{
redirect_uri: window.location.origin // ログイン後のリダイレクト先
}}
>
<App />
</Auth0Provider>
</StrictMode>
);
```

`Auth0Provider` でアプリ全体をラップすることで、配下のコンポーネントから認証機能を利用できるようになります。

`domain` と `clientId` に `.env` の値を渡し、ログイン後の戻り先として `window.location.origin` を指定しています。
`cacheLocation="localstorage"` を指定することで、ページをリロードしても認証状態が維持されます。

ログイン / ログアウト / プロフィール表示を実装

続いて `src/App.tsx` 側です。

`useAuth0` フックを使って、未ログイン時はログインボタン、ログイン済みならユーザー情報とログアウトボタンを表示するようにします。

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

function App() {
// Auth0の状態とメソッドを取得
const { isAuthenticated, isLoading, error, loginWithRedirect, logout, user } = useAuth0();

// 認証状態の読み込み中
if (isLoading) return <p>Loading...</p>;

// 認証エラー
if (error) return <p>Error: {error.message}</p>;

return (
<div style={{ padding: '2rem', textAlign: 'center' }}>
<h1>Auth0サンプル</h1>

{isAuthenticated && user ? (
// ログイン済み：プロフィールとログアウトボタンを表示
<>
<img src={user.picture} alt={user.name} style={{ borderRadius: '50%', width: 80 }} />
<p>{user.name}</p>
<p>{user.email}</p>
<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
ログアウト
</button>
</>
) : (
// 未ログイン：ログインボタンを表示
<button onClick={() => loginWithRedirect()}>ログイン</button>
)}
</div>
);
}

export default App;
```

実装自体はかなりシンプルです。
`useAuth0` から認証状態を受け取って分岐するだけなので、React 側のコード量はかなり抑えられます。