➡️

Next.js App router + TS で Auth0 handleAuth() の custom callback を動かす

2024/06/11に公開

Next.js

この辺りを読んでて route.ts(route.js) が動かないよ〜と詰まった人向け。

動作確認済みサンプル

app/api/auth/[auth0]/route.ts

import {
  type AfterCallbackAppRoute,
  type Session,
  handleAuth,
  handleCallback,
} from '@auth0/nextjs-auth0'
import jwt from 'jsonwebtoken'
import type { NextApiRequest, NextApiResponse } from 'next'
import type { NextRequest } from 'next/server'

const afterCallback: AfterCallbackAppRoute = (_req: NextRequest, session: Session) => {
  const payload = {
    userId: session.user.sub,
    exp: Math.floor(Date.now() / 1000) + 60 * 60,
  }

  if (!process.env.SUPABASE_JWT_SECRET) {
    throw new Error('SUPABASE_JWT_SECRET environment variable is not set')
  }
  session.user.accessToken = jwt.sign(payload, process.env.SUPABASE_JWT_SECRET)

  return session
}

export const GET = handleAuth({
  async callback(req: NextApiRequest, res: NextApiResponse) {
    try {
      const response = await handleCallback(req, res, {
        afterCallback,
      })
      return response
    } catch (error) {
      if (error instanceof Error) {
        return new Response(error.message, { status: 500 })
      }
      return new Response('An unknown error occurred.', { status: 500 })
    }
  },
})

背景と解説

Supabase, Auth0 それぞれが公式で Next.js における Supabase + Auth0 の RLS 入門ドキュメントを上げてくれているのだが Page Router だったり TS じゃなかったり、そもそもサンプルコードのままだと動かなかったりと not for me かつ厳しかったので修正版を共有しました。

公式の最大の問題は afterCallback の引数に res を置いてるとこなので、そこを取り除くだけでまずは動くと思います。その上で今回のサンプルでは型付けやそのほか Biome Lint の修正など含めて総合的に問題なさそうなコードに変更しています。

動作確認済みサンプル

背景と解説

Discussion