【Next.js】middlewareを用いて認証チェック時にリダレクトする

Amplify.configure(config, { ssr: true });

const clientId = process.env.NEXT_PUBLIC_COGNITO_USER_POOLS_WEB_CLIENT_ID;

/**
 * cookieからcognitoトークン情報を取得
 * @param {*} request
 * @param {*} tokenType
 * @returns
 */
export const getCognitoTokenByCookie = (request, tokenType) => {
  const regexp = new RegExp(
    `CognitoIdentityServiceProvider\\.${clientId}\\..+\\.${tokenType}`
  );
  const cookies = request.cookies
    .getAll()
    .filter((cookie) => regexp.test(cookie.name));
  const cookie = cookies.length === 1 ? cookies[0] : null;
  return cookie && cookie.value;
};

import { decodeProtectedHeader, importJWK, jwtVerify } from "jose";

const userPoolsId = process.env.NEXT_PUBLIC_USER_POOLS_ID;
const cognitoIdpUrl = `https://cognito-idp.${process.env.NEXT_PUBLIC_AWS_REGION}.amazonaws.com`;

/**
 * トークン検証
 * @param {*} token
 */
export const verifyCognitoToken = async (token) => {
  const { keys } = await fetch(
    `${cognitoIdpUrl}/${userPoolsId}/.well-known/jwks.json`
  ).then((res) => res.json());
  const { kid } = decodeProtectedHeader(token);
  const jwk = keys.find((key) => key.kid === kid);
  if (!jwk) {
    throw Error("JWK is not found in the token");
  }
  const jwtImport = await importJWK(jwk);
  await jwtVerify(token, jwtImport);
};

const cognitoDomain = process.env.NEXT_PUBLIC_COGNITO_DOMAIN;

/**
 * トークンの再取得
 * @param {*} refreshToken
 * @returns
 */
export const refreshCognitoToken = async (refreshToken) => {
  const res = await fetch(`${cognitoDomain}/oauth2/token`, {
    method: "POST",
    headers: new Headers({
      "content-type": "application/x-www-form-urlencoded",
    }),
    body: Object.entries({
      grant_type: "refresh_token",
      client_id: clientId,
      refresh_token: refreshToken,
    })
      .map(([k, v]) => `${k}=${v}`)
      .join("&"),
  });
  if (!res.ok) {
    throw new Error(JSON.stringify(await res.json()));
  }
  const newTokens = await res.json();
  return newTokens;
};

NEXT_PUBLIC_COGNITO_DOMAIN=xxx

/**
 * 認証トークンをCookieに設定
 * @param {*} request
 * @param {*} response
 * @param {*} tokenType
 * @param {*} tokenValue
 * @returns
 */
export const setTokenIntoCookie = (
  request,
  response,
  tokenType,
  tokenValue
) => {
  const cookie = getCognitoTokenByCookie(request, tokenType);
  if (!cookie) {
    throw Error(`${tokenType} is not found in the request cooke`);
  }
  response.cookies.set({
    name: cookie.name,
    value: tokenValue,
    secure: true,
    httpOnly: true,
  });
  return response;
};

import { NextResponse } from "next/server";
import {
  getCognitoTokenByCookie,
  verifyCognitoToken,
  refreshCognitoToken,
  setTokenIntoCookie,
} from "@/services/cognito";

// 未認証アクセス可画面
const unAuthenticatedPaths = ["/auth"];

export async function middleware(request) {
  const idToken = getCognitoTokenByCookie(request, "idToken").value;
  const accessToken = getCognitoTokenByCookie(request, "accessToken").value;
  const refreshToken = getCognitoTokenByCookie(request, "refreshToken").value;
  console.log("idToken", idToken);
  console.log("accessToken", accessToken);
  console.log("refreshToken", refreshToken);
  const url = request.nextUrl.clone();

  // cookieからtokenが取得できない場合
  if (!idToken && !accessToken && !refreshToken) {
    if (!unAuthenticatedPaths.includes(url.pathname)) {
      return NextResponse.redirect(new URL("/auth", request.url));
    }
    return NextResponse.next();
  }

  try {
    // idToken検証結果が有効(認証済)
    await verifyCognitoToken(idToken);
    if (unAuthenticatedPaths.includes(url.pathname)) {
      return NextResponse.redirect(new URL("/", request.url));
    }
    return NextResponse.next();
  } catch (error) {
    try {
      // refreshTokenを使用して認証トークンを再取得
      const newTokens = await refreshCognitoToken(refreshToken);
      console.log("newTokens", newTokens);
      let response = NextResponse.next();
      response = setTokenIntoCookie(
        request,
        response,
        "idToken",
        newTokens.id_token
      );
      response = setTokenIntoCookie(
        request,
        response,
        "accessToken",
        newTokens.access_token
      );
      return response;
    } catch (error) {
      console.error("failed to the refresh token", error);
    }
  }
  return NextResponse.redirect(new URL("/auth", request.url));
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};