🌊

Auth0でログインやサインアップ時に外部DBの操作をする（Next13）

2023/10/30に公開

Next.js

Auth0

tech

仕事内でAuth0を触っていたが、Auth0について初学者だったため少し手間取ったのもあり備忘録として記述しておく。

実装内容

試しにサインアップしたときに外部DBのUserテーブルにemailを格納する流れを作ってみる。

Next13にDBへなんやこんやするAPIを作成する
Auth0のActionsでFlowの途中に実行する処理を追加

他の環境

DB操作にはprismaを使用
マイグレーションなどは終わっている

API作成

bodyに渡されたemailアドレスを取得してUserテーブルにemailを格納するAPIを作る。

app/api/signup/route.ts

import { NextResponse } from 'next/server'
import prisma from '~/utils/prisma'

export async function POST(req: Request) {
  const body = await req.json()
  try {
    if (!body.email) throw new Error('email not found')
    await prisma.user.create({
      data: {
        email: body.email as string,
      },
    })
    
    return new NextResponse(JSON.stringify({ status: 'ok', data: 'Successfully created user.' }))
  } catch (e: any) {
    console.error(`ERROR: Prisma create user error at ${body.email}, ${e}.`)
    return new NextResponse(JSON.stringify({ status: 'error', data: e.message }))
  }
}

Auth0のActionsにFlowを追加する

メニュー > Actions > Flowsで設定できる。
ログインだとLogin、SignupだとPost User Registrationといった感じに個別に設定できる。
他にもパスワードリセット・変更などのFlowもあるので状況に合わせてドキュメントを見てみるといい。

Post User Registrationで処理を追加する

Add Actionの+ボタンを選択してBuild Customを選択。

NameやTriggerの設定をしてCreateするとコードを書けるようになるのでここで作成したAPIに投げる処理を書いていく。

コードの横にあるメニューは

テスト
シークレット設定
ライブラリのインストール

という感じ。
event.secrets.API_URLはシークレットにAPI_URLという名前で作成したAPIのエンドポイントを登録してある。

const axios = require("axios");
/**
* Handler that will be called during the execution of a PostUserRegistration flow.
*
* @param {Event} event - Details about the context and user that has registered.
* @param {PostUserRegistrationAPI} api - Methods and utilities to help change the behavior after a signup.
*/
exports.onExecutePostUserRegistration = async (event, api) => {
  try {
    const email = event.user.email
    const response = await axios.post(
      `${event.secrets.API_URL}`,
      {
        email: email,
      },
      { headers: { 'Content-Type': 'application/json' } },
    )
  } catch (e) {
    console.error(`ERROR: add user to db error, ${e}`)
  }
}

eventからは結構色々取得できる。ドキュメント参照。

ライブラリが使用できるのでサンプルに沿ってaxiosで実装。

テスト走らせたりして問題なさそうであればDeployしてFlowに追加する。
※忘れない

感想

最近Auth0を初めて使ったが、カスタマイズしやすいのはさすがユーザーが多いだけあるなあと。
ただコミュニティがあまり活発に動いていないので、ドキュメントにない問題だったりを探すときはGithubのissueを見るのが一番早く解決できる（同じ状況の質問を見つけても解決してないものばかりだった）。
ログインやサインアップの動きは安定しているので、Auth0自体はとても使いやすいなと思う。