🕌

ClerkのAuthMiddlewareをClerkMiddlewareで書き換える方法

2024/08/14に公開

JavaScript

はじめに

個人開発の勉強にて以下のYoutube動画を参考にクローンアプリを作りながらNextJSに触れているのですが、Middlewareの認証周りで非推奨に出会ったので、ClerkMiddlewareでのコーディングを載せておきます.

Clerkとは何か

Clerkは、Next.jsアプリケーションに簡単に認証機能を追加できるサービスです.
個人開発アプリを公開をする場合に認証情報の管理は非常に大切ですが、他の機能の作り込みを頑張りたいのが性な気がします(個人の感想ですが...).
Clerkは簡単な実装で、GoogleやGithub,LINEといったソーシャルログインに対応しているので個人開発にはうってつけです.
無料枠もあるので、お金を抑えたい個人開発においてはとっても便利です.(2024/08/14時点)

変更後のコード

変更前のコードは、Youtubeチャンネルをご覧になればわかると思うので割愛します.

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isPublicRoute = createRouteMatcher([
  "/",
  "/sign-in(.*)"
])
export default clerkMiddleware((auth, req) => {
  const userAuth = auth();  

  if(userAuth.userId && isPublicRoute(req)) {
    let path = "/select-org";

    if (userAuth.orgId) {
      path = `/organization/${userAuth.orgId}`;
    }

    const orgSelection = new URL(path, req.url);
    return NextResponse.redirect(orgSelection);
  }

  if(!userAuth.userId && !isPublicRoute(req)) {
    userAuth.protect()
  }

  if(userAuth.userId && !userAuth.orgId && req.nextUrl.pathname !== "/select-org") {
    const orgSelection = new URL("/select-org", userAuth.orgId)
    return NextResponse.redirect(orgSelection)
  }
});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

ClerkMiddlewareは何も指定しない場合、全てのページがpublicになるので、非ログインユーザーのブロックをRouteMatcherを使って行う必要性があります.
"/sign-in(.*)"を記載しないと、ERR_TOO_MANY_REDIRECTSになるので要注意です.
また、redirectToSignInも非推奨のためauth().redirectToSignIn()を使用できるのですが、AppRouterを利用している場合はauth().protect()が手っ取り早いのでおすすめです.
詳しくは、参考に載せているClerkのドキュメントをご覧ください.

参考

https://clerk.com/

はじめに

Clerkとは何か

変更後のコード

参考

Discussion