🍆

Supabaseのauth-helpersはサーバー側での認証処理withMiddlewareAuthはNext12.2系では未対応っぽい

2022/08/01に公開約1,000字

取り急ぎ。

Supabaseの認証ヘルパーであるauth-helpersを使うとサーバーサイドで認証判定することができます。それによってログイン状況に応じて、ページや階層によってアクセス制限をかけることができます。

公式ドキュメント

Next12.2系ではミドルウェアをルートディレクトリに middleware.ts として追加すると動くのですが、Supabaseはこの階層での処理にはまだ未対応のようです。(Twitter認証にて確認)

つまり、Next.jsの12.2系ではSupabaseによるサーバーサイドでの認証判定が現時点(2022年8月1日)では不可能ということです。

※Cookieには認証データが一部だけ保持されているようですが、Next.js側で認証判定をスルーしているような挙動です。

サーバーサイドで認証が必要な場合はNext.jsの12.1.6 ぐらいに戻しておくと動きます。
なお、12.1系は各ディレクトリに _middleware.ts を置くことで動作します。

/pages/各ディレクトリ/_middleware.ts
import { withMiddlewareAuth } from "@supabase/auth-helpers-nextjs/dist/middleware";

export const middleware = withMiddlewareAuth({
  redirectTo: "/login",
});

これで /各ディレクトリ の配下にアクセスした場合、自動的にログインチェックを行ってくれて、ログインしていない場合は /login に飛ばしてくれます。


issuesにてサーバーサイドでの認証について多くの方が報告しているため、そう遠くないタイミングで改善されるものと思われます。

https://github.com/supabase-community/auth-helpers/issues/203

2022/08/23追記
対応はまもなく!

https://github.com/supabase/auth-helpers/pull/227

Discussion

ログインするとコメントできます