AWS Cognitoを用いてユーザー認証を実装する：Next（SSR）

こんばんは。

今日は「AWS Cognitoを用いてユーザー認証を実装する：Next（SSR）」について説明いたします。

Next.jsのApp Routerを使ったサーバーサイドレンダリング（SSR）を行う際、AWS Cognitoを用いてユーザー認証を実装することが可能です。AWS Cognitoは、アプリケーションにセキュアなユーザー認証と管理機能を提供するサービスで、ユーザー管理の手間を軽減できます。Next.jsのApp RouterとSSRを活用すれば、ユーザー情報をサーバー側で管理し、レンダリングを最適化したページを提供できます。

実装手順

以下の手順で、CognitoとNext.js App RouterのSSRを統合する方法を紹介します。

AWS Cognitoの設定

まず、AWS CognitoでUser Poolを作成し、ユーザーを登録・管理できるようにします。以下が基本的な手順です。

• AWS管理コンソールにログインし、Cognitoを開く。
• 「User Pool」を作成し、認証方法やパスワードポリシーなどを設定。
• アプリクライアントを設定し、Client IDやClient Secretを取得。
• 必要に応じて、SNSやGoogleなどの外部プロバイダーと統合。

Next.jsアプリでのCognitoの設定

次に、Next.jsのApp Routerを使用するアプリケーション内でCognitoを設定します。

AWS AmplifyやAmazon Cognito Identity SDKを使う方法が一般的です。これらのライブラリをインストールしておくと便利です。

npm install amazon-cognito-identity-js

環境変数として、User Pool IDやClient IDを.env.localに保存します。

NEXT_PUBLIC_COGNITO_USER_POOL_ID=your_user_pool_id
NEXT_PUBLIC_COGNITO_CLIENT_ID=your_client_id

サーバーサイドレンダリングでの認証フローの実装

App Routerで、サーバーサイドレンダリング時にCognitoを利用してユーザー認証を行います。認証後、ユーザー情報を取得してレンダリングに利用します。

// src/app/page.js

import { CognitoUserPool, CognitoUser } from 'amazon-cognito-identity-js';
import { cookies } from 'next/headers';

export async function getServerSideProps() {
  const token = cookies().get('token')?.value;

  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  const userPool = new CognitoUserPool({
    UserPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
    ClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
  });

  const user = new CognitoUser({ Username: token, Pool: userPool });

  return {
    props: {
      user: {
        username: user.getUsername(),
        // 他のユーザー情報
      },
    },
  };
}

認証のクライアント側実装

サーバー側の認証処理が成功した場合、トークンを取得し、クッキーやセッションストレージに保存して次回以降の認証に利用します。

import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';

const authenticateUser = async (username, password) => {
  const userPool = new CognitoUserPool({
    UserPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
    ClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
  });

  const user = new CognitoUser({ Username: username, Pool: userPool });
  const authDetails = new AuthenticationDetails({ Username: username, Password: password });

  return new Promise((resolve, reject) => {
    user.authenticateUser(authDetails, {
      onSuccess: (result) => {
        document.cookie = `token=${result.getAccessToken().getJwtToken()}; path=/`;
        resolve(result);
      },
      onFailure: (err) => {
        reject(err);
      },
    });
  });
};

まとめ

1. CognitoのUser Pool設定：AWS CognitoでUser Poolを作成し、認証機能を設定。
2. Next.jsの環境変数設定：User Poolの情報を環境変数として保存。
3. SSRでの認証：App Routerを使い、getServerSidePropsやAPIルートでユーザー認証を行う。
4. クライアント側認証管理：トークンをクッキーに保存し、次回以降のリクエストで利用。

これにより、Next.jsのApp Routerを使った効率的なSSRとAWS Cognitoを用いたユーザー認証が実現します。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。