Next.jsのAPI RoutesでAuth0の認可を実装する

Next.js+Auth0-1.png

Auth0は認証・認可の仕組みを提供してくれるIDaaS(Identity as a Service)です。

公式サイトに実装サンプルも豊富でNext.jsを利用した認証のサンプルコードなども公式サイトに用意されており手軽に利用できます。

Auth0 Next.js SDK Quickstarts: Login

ただ、Next.jsのAPI Routesを利用した認可用のサンプルコードがなかったので作成してみました。

src/features/auth0/util.tsなど適当なファイルに以下のような確認用の関数を作成します。

jsonwebtokenはJWTの確認に利用されるライブラリで、jwk-to-pemはjwkをpemファイルに変換するライブラリです。

import jwt from 'jsonwebtoken';
import jwkToPem from 'jwk-to-pem';
 
/**
 * Auth0の公開鍵をpemに変換して返す
 * @returns 公開鍵のpem
 */
const jwks = async () => {
    // Auth0の公開鍵のURL
    const path = `${process.env.AUTH0_ISSUER_BASE_URL}/.well-known/jwks.json`
    // Auth0の公開鍵を取得
    const response = await fetch(path, {
        method: 'GET'
    });
    const jwk = (await response.json());
    // 公開鍵の１つ目をpemに変換する
    const pem = jwkToPem(jwk.keys[0]);
    return pem;
};
  
/**
 * 受け取ったidトークンが認証済みかどうかを確認して結果を返す
 * @param idToken 
 * @returns 認証済みかどうか
 */
export const authCheck = async (idToken: string) => {
    const pem = await jwks();
    try {
        jwt.verify(String(idToken), pem, { algorithms: ['RS256'] });
        return true
    } catch (e) {
        console.error(e)
        return false
    }
}

src/pags/api/aaaa.tsなどのAPIでは先程作成したauthCheck関数を利用して認可確認をしてから実際の処理を記述していきます。

import { NextApiRequest, NextApiResponse } from "next"
import { getSession } from '@auth0/nextjs-auth0';
import { authCheck } from "@/features/auth0";
  
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  
    const session = await getSession(req, res);
    const idToken = session?.idToken;
  
    if (!idToken || !await authCheck(idToken)) {
        return res.status(401).json({
            message: 'ログインしてください。'
        })
    }
  
   // 認可済みの処理を書く
   res.status(200).json({ aaa: 'bbb' })
};

スポンサードリンク

«AstroでgetStaticPathsで指定したpropsをTypeScriptの型推論で型情報を取りだす | メイン | Nuxt3でESLintの設定をする»