World Hacker（ぎょうざブログ）

＜前置き、挨拶＞

みなさんどうも、こんばんみ～。ぎょうざです。

Webアプリ上などでユーザー認証機能を実装する際に便利なツール

Clerk（クラーク）を利用する際に、ぎょうざが躓いたところを備忘録として記録しておきます。

同じようなケースあるいは現象で困っている方の参考になれば幸いです。

【目次】

• 現象：TypeError: (0 , clerk_nextjs__WEBPACK_IMPORTED_MODULE_2_.useAuth) is not a function
• 原因：Internal Error 500

• 解決策：import元をimport { useAuth } “@clerk/nextjs”からimport { auth } “@clerk/nextjs/server”へ変更

• 現象：ブラウザ表示画面上で、ERR_TOO_MANY_REDIRECTSがエラー表示される
• 原因：Next.jsとClerkの認証設定が競合してリダイレクトが繰り返されている
  💡

  原因を推測するに、middleware.ts の isPublicRoute と config.matcher の設定が競合していた可能性があります。

  具体的には、

  1. localhost:3000 にアクセスすると、middleware.ts が実行されます。
  2. / が isPublicRoute に含まれているため、userAuth.protect() は実行されません。
  3. しかし、config.matcher の設定により、localhost:3000 はミドルウェアの対象となります。
  4. その結果、Clerk のミドルウェアが何らかの処理を行い、意図しないリダイレクトが発生していた可能性があります。

  / を isPublicRoute から削除することで、localhost:3000 へのアクセス時に userAuth.protect() が実行されるようになり、Clerk のサインインページへのリダイレクトが正しく行われるようになったと考えられます。

  Clerk のミドルウェアは、認証が必要なページにアクセスがあった際に、ユーザーをサインインページにリダイレクトする役割を担います。/ を isPublicRoute に含めていた場合、ルートページへのアクセスも認証が必要と判断され、リダイレクトが発生していた可能性があります。

  ただし、/ を isPublicRoute から削除することで、ルートページへのアクセスが常に認証を要求されるようになります。もしルートページを認証なしでアクセスできるようにしたい場合は、別の方法で対応する必要があります。

• 解決策：isPublicRouteからルートページ、自分の場合は'/'を削除

Clerkは、ユーザー認証機能を簡単に実装できるツールとして優秀です。
メール認証だけにとどまらず、Google認証やSNS認証なども可能です。

ここまで読んでいただき、ありがとうございました。

以上、ぎょうざでした。