🔐
Cloudflare PagesでNextAuth（Edge Runtime）
アッサーラム、にわとろです。変わらずずっとNext.jsで食いつないでいるのですが、最近VercelをやめてCloudflare Pagesを使い始めました。ところが先日、Cloudflare PagesではNextAuthが動かせず困ったので、どう解決したかここに書いておきます。Cloudflareユーザーのみなさんにより良き開発体験あらんことを！
TL;DR
原因はCloudflare Pagesで使っているEdge RuntimeがNextAuthと互換性がないことです。
解決策
- 2023/06/24時点では開発中のNextAuthのv5を使う。
Next.jsプロジェクトのルートで以下のコマンドを実行する。v5が正式リリースされていたらマイグレーションしてください。
npm i next-auth@experimental
- 合わせて
/src/app/api/auth/[...nextauth]/route.tsを以下のように書き換える。
俺はNext.js 13を使っていますが、バージョンによって多少パスが違うかもしれません。また俺はGoogle認証のみ実装しているので、合わせて変えておいてください。
import NextAuth, { NextAuthConfig } from "next-auth";
import Google from "@auth/core/providers/google";
import { Provider } from "@auth/core/providers";
const authOptions: NextAuthConfig = {
providers: [
Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}) as Provider,
],
secret: process.env.NEXTAUTH_SECRET,
};
const handler = NextAuth(authOptions);
export const GET = handler.handlers.GET;
export const POST = handler.handlers.POST;
export const runtime = "edge";
以上です！ Cloudflare Pagesもかなり便利なのでもっと充実してほしいですね。
余談1. NextAuth
LINEからSlackまで様々な認証方法を一括して扱えるのでかなり便利です。Firebase、貴様はもう二度と使わん。
余談2. Vercel
個人開発しているときにはVercelを無邪気に使っていたんですが、フリーランスで案件受け始めてから敬遠しています。Free版でタイムアウトの制限が厳しく、チーム一人当たり¥2000/月がそこそこ高いからです。ついでにTwitterでエンジニアの方がよく、近ごろのVercel社の囲い込みが信用ならないという話をしていて、依存するのがやや不安になってきたこともあります。詳しい方いればぜひぜひ教えてください。
過去の記事
昔書いた記事です。
Discussion