【前編】AWS初心者向け：React + Amazon Cognitoで認証機能を作るチュートリアルを深掘りする

はじめに

この記事では、AWS公式のAmazon CognitoのQuick Setup ガイド（2025/03時点）をベースにして、ReactアプリケーションにAmazon Cognitoを使用した認証機能を実装する方法を解説していきます。

Quick Setup ガイドで前提条件として求められる認証の基本概念の補足を行いながら、トークンの取り扱いに関してより実践的に深掘りしていくことを目指します。

この記事は前後編の前編にあたります。
後編はこちら

目次

【前編】

1. Amazon Cognitoの設定

   • ユーザープールの作成
   • アプリケーションクライアントの設定（Quick Setup ガイド①）
   • ユーザーの作成

2. Reactでの認証機能実装

   • プロジェクトのセットアップ
   • シングルサインオン（SSO）、OIDCとは
   • react-oidc-contextの導入（Quick Setup ガイド②）
   • 認証状態の管理
   • ログイン/ログアウトの実装（Quick Setup ガイド③、④）

【後編】
3. トークンの取得と管理

• 発行されるトークンについて
• トークンの有効期限管理

4. 自動ログイン実装

   • react-oidc-contextライブラリにおける自動ログイン実装

5. トークンを用いて他のサービスに認証（APIGatewayを例とする）

   • Cognitoオーソライザーの設定
   • APIを再デプロイ
   • オーソライザーテスト
   • トークンを使用したAPI認証

前提条件

• Reactの基本的な知識（コンポーネント、フック）
• AWSアカウントを持っていること
• （5章のみ）API GatewayのAPIを持っていること

環境準備

今回使用する技術スタックです。

• React 18.x
• Vite
• react-oidc-context（認証ライブラリ）
• Amazon Cognito
• Node.js 16以上

1. Amazon Cognitoの設定

1-1. ユーザープールの作成

まずは、ユーザー情報を管理するためのユーザープールを作成します。ユーザープールは、ユーザーの認証情報やプロファイル情報を保存する場所として機能します。

1. AWSマネジメントコンソールにログインし、Cognitoサービスを選択
2. 「ユーザープールの作成」をクリック
3. 以下の基本設定を行います。

アプリケーションタイプ: シングルページアプリケーション (SPA)
サインイン識別子のオプション: メールアドレス（任意に変えてよい）

1-2. アプリケーションクライアントの設定（Quick Setup ガイド①）

ユーザープールが作成できたらQuick Setup ガイド①に該当するアプリケーションクライアントの設定を行います。

1. メニューバーから「アプリケーション＞アプリケーションクライアント」をクリック
2. 「ログインページ」タブを選択してマネージドログインページの設定の「編集」をクリック
3. 以下の設定を行います。

許可されているコールバック URL: http://localhost:5173（開発用のURLを任意に入力）
許可されているサインアウト URL: http://localhost:5173（開発用のURLを任意に入力）
ID プロバイダー: Cognito ユーザープール
OAuth 付与タイプ: 認証コード付与
OpenID Connect のスコープ: email、openid、phone
カスタムスコープ: なし

1-3. テストユーザーの作成

1. メニューバーから「ユーザー管理＞ユーザー」タブを選択
2. 「ユーザーを作成」をクリック
3. テストユーザーを設定

テストユーザーを作成した後、必ずユーザーのステータスが「有効」になっていることを確認してください。
ステータスが「有効」でない場合、ログインができません。

2. Reactでの認証機能実装

2-1. プロジェクトのセットアップ

認証機能を実装するためのReactプロジェクトを作成します。

# Viteを使用してReactプロジェクトを作成
npm create vite@latest my-auth-app -- --template react
cd my-auth-app
npm install

# 開発サーバーを起動
npm run dev

これでhttp://localhost:5173にアクセスすると、Reactの初期画面が表示されます。

2-2. 認証ライブラリのインストール

認証機能の実装にはreact-oidc-contextというライブラリを使用します。このライブラリは、OpenID Connect（OIDC）プロトコルを使用した認証を React アプリケーションで簡単に実装できるようにするものです。

npm install react-oidc-context oidc-client-ts

react-oidc-contextとは？

• React向けのOIDC認証ライブラリで、認証状態の管理が簡単になっています。

参考：react-oidc-context GitHub

2-3. シングルサインオン（SSO）とOIDCについて

シングルサインオン（SSO）

シングルサインオンは、1回のログインで複数のサービスにアクセスできる仕組みです。例えば、Cognitoでログインすると、同じAWSアカウント内の複数のアプリケーション（Webアプリやモバイルアプリなどのクライアントアプリケーション）にアクセスできるようになります。

OpenID Connect（OIDC）とは

OIDCは、OAuth 2.0をベースにした認証プロトコルです。今回使用するCognitoはOIDCプロバイダーとして機能します。

OpenID Connect（OIDC）の認証フロー

ReactアプリケーションとCognitoの間での認証フローを図解します。

ポイント

• Reactアプリでは、OIDCプロバイダーとの認証が成功したときにログイン中と判断する実装を行います。
• OIDCプロバイダーであるCognitoとの認証に成功したらトークンを発行してもらえます。
• 得られたトークンをもとに、他のサービスでシングルサインオンでのログインを行います。
• シングルサインオンを実現するには、各サービスでCognitoをOIDCプロバイダーとする設定が必要です。

参考：一番分かりやすい OpenID Connect の説明

2-4. ログイン/ログアウトの実装（Quick Setup ガイド③、④）

認証機能の実装は、大きく分けて以下の2つのステップで行います。

1. AuthProviderの設定
2. ログイン/ログアウト機能の実装

2-4-1. AuthProviderの設定

まず、アプリケーションのルートコンポーネントで認証の設定を行います。

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthProvider } from "react-oidc-context";

const cognitoAuthConfig = {
  // Cognitoユーザープールのドメイン
  authority: "https://cognito-idp.{リージョン}.amazonaws.com/{ユーザープールID}",
  // アプリケーションクライアントID
  client_id: "{クライアントID}",
  // アプリケーションのコールバックURL
  redirect_uri: "http://localhost:5173",
  response_type: "code",
  // 許可するスコープ
  scope: "email openid phone",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <AuthProvider {...cognitoAuthConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

設定値の説明

• アプリケーションクライアントの設定ができていたら自動で各項目に該当する値が記載されています
• authority: CognitoユーザープールのエンドポイントURL
• client_id: アプリケーションクライアントのID
• redirect_uri: ログイン後のリダイレクト先URL（アプリケーションクライアントの設定と一致させる）
• response_type: "code"（認証コードフロー）を使用
• scope: 要求する権限の範囲

2-4-2. ログイン/ログアウト機能の実装

次に、App.jsxコンポーネントでログイン/ログアウト機能を実装します。

src/App.jsx

import { useAuth } from "react-oidc-context";

function App() {
  const auth = useAuth();

  // ログアウト時のリダイレクト処理
  const signOutRedirect = () => {
    const clientId = "{クライアントID}";
    const logoutUri = "http://localhost:5173";
    const cognitoDomain = "https://{ドメイン名}.auth.{リージョン}.amazoncognito.com";
    window.location.href = `${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${encodeURIComponent(logoutUri)}`;
  };

  // ローディング中
  if (auth.isLoading) {
    return <div>Loading...</div>;
  }

  // エラー発生時
  if (auth.error) {
    return <div>エラーが発生しました: {auth.error.message}</div>;
  }

  // ログイン済みの場合
  if (auth.isAuthenticated) {
    return (
      <div>
        <h2>ログイン情報</h2>
        <pre> Hello: {auth.user?.profile.email} </pre>
        <pre> ID Token: {auth.user?.id_token} </pre>
        <pre> Access Token: {auth.user?.access_token} </pre>
        <pre> Refresh Token: {auth.user?.refresh_token} </pre>
        <button onClick={() => auth.removeUser()}>ログアウト</button>
      </div>
    );
  }

  // 未ログインの場合
  return (
    <div>
      <button onClick={() => auth.signinRedirect()}>ログイン</button>
    </div>
  );
}

export default App;

実装のポイント

• useAuthフックで認証状態を管理
• isLoading、error、isAuthenticatedで状態に応じた表示を切り替え
• signinRedirect()でログインページへリダイレクト
• removeUser()でログアウト処理を実行
• ログアウト時はsignOutRedirect()でCognitoのログアウトエンドポイントにリダイレクト

以上で、Amazon CognitoのQuick Setup ガイド（2025/03時点）の実装は完了です。
ログインに成功したら、ログイン情報が画面に表示されます。

続き

後編はこちら

参考資料

• Amazon Cognito公式ドキュメント
• react-oidc-context GitHub
• 一番分かりやすい OpenID Connect の説明
• Amazon Cognito トークンの概要
• IDトークンについて
• アクセストークンについて
• リフレッシュトークンについて