⚠️

Next.js 14でSupabase Authを使用すると「AuthApiError: PKCE flow is not ...」

Ryuki

2023/10/31に公開

Next.js

supabase

tech

▲ Next.js 14.0.1を使用して、Supabaseのログイン周りをローカル環境で開発を行おうとすると「AuthApiError: PKCE flow is not supported on signups with autoconfirm enabled」と言われてエラーになる問題。

発生した流れ

ログイン機能をサクッと導入したかったので、Supabaseの公式が提供しているテンプレートを使用

npx supabase init
npx npx create-next-app@latest --typescript　-e with-supabase
npx supabase start

以下のようなディレクトリ構成にしている。

repos/supabase/xxx
repos/nextjs/xxx

npx supabase startをしたときに表示されるannon keyとAPI URLを「repos/nextjs/.env.local」に登録
Next.jsを起動（npm run dev）

http://localhost:3000/login　」でSign Upをしようとするとうまくいかない。

API側でエラーログを表示するようにすると以下の文章が表示された。

 ✓ Compiled /auth/sign-up/route in 359ms (357 modules)
AuthApiError: PKCE flow is not supported on signups with autoconfirm enabled
    at handleError (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js:42:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async _handleRequest (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js:89:9)
    at async _request (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js:69:18)
    at async SupabaseAuthClient.signUp (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/module/GoTrueClient.js:222:23)
    at async POST (webpack-internal:///(rsc)/./app/auth/sign-up/route.ts:19:23)
    at async /repos/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:61856 {
  __isAuthError: true,
  status: 400
}

解決策

Github Issueを見て解決。
nextjs 13 / PKCE flow is not supported on signups with autoconfirm enabled #569

Supabaseをストップ
supabase/config.tomlの70行目の下にemail_confirmations = trueを追加
/supabase/.temp/にgotrue-versionファイルを作成（拡張子無し）
goture-version内にv2.92.1と入力して保存
Supabaseを再起動

追記

SupabaseのCLIのバージョンが古かったために発生していた問題のよう。
SupabaseのCLIのバージョンを1.110.1に更新したら上記問題は発生しませんでした。

詳細

SasaTech Engineer BlogPublication

WEBアプリケーション開発の株式会社SasaTechの技術ブログです。

発生した流れ

解決策

追記

Discussion