NextAuthを利用した保護されたルートの設定

今日はNextAuthを利用した保護されたルートの設定を学んでみましょう。

実際、この記事に関する情報がバラバラで苦労しました。

まずはできる限り公式ドキュメントを使って書いてみます。

1. この記事を書くことにした理由

NextAuthを利用した保護されたルートの設定-1

NextAuthを利用してログインは実装しました。

問題は、ルート保護とリダイレクトを一緒に使いたい場合でした。

ログインしていないユーザーでも、ログインしたユーザーでもルートパス「/」にアクセスしたときに「/category」へリダイレクトしたかったのです。

さらにログイン済みの人には「/profile」や「/login」へのアクセスをブロックしたかったのです。

しかし、これに関する記事もあまりなく、ChatGPTもずっと変なことばかり言うのでとてもイライラしました。

2. NextAuth公式ドキュメント

NextAuthを利用した保護されたルートの設定-2

結局、検索と公式ドキュメントで解決しました。

やはり公式ドキュメントは良いです。

このリンクにアクセスすると、NextAuthとmiddlewareをどのように組み合わせて利用するかが載っています。

import { withAuth } from "next-auth/middleware";

export default withAuth(
  // `withAuth` augments your `Request` with the user's token.
  function middleware(req) {
    console.log(req.nextauth.token);
  },
  {
    callbacks: {
      authorized: ({ token }) => token?.role === "admin",
    },
  }
);

export const config = { matcher: ["/admin"] };

ここでのポイントは、middlewareをwithAuthで包むとリクエストのトークンにアクセスできるということです。

トークンが不要であれば、middleware内で処理し、authorizedが必要であればcallbacksに渡して処理すれば良いです。

middlewareでも処理は可能なので、わざわざcallbackで渡さなくても問題ないかもしれません。

3. 機能を実装する

NextAuthを利用した保護されたルートの設定-3

これを応用してみましょう。

withAuthでmiddlewareを包みます。

簡略化するとwithAuth(middleware, callbacks: {})という形式です。

リクエストが来ると、まずミドルウェアで処理し、次へ渡します。

まずコードから見てみましょう。

import { withAuth } from "next-auth/middleware";
import { NextResponse } from "next/server";

// withAuthで包んだミドルウェアをexport
export default withAuth(
  function middleware(req) {
    // ルートURL(/)へのアクセス時に/categoryへリダイレクト
    if (req.nextUrl.pathname === "/") {
      return NextResponse.redirect(new URL("/category", req.url));
    }
    if (
      req.nextauth.token?.authLevel !== "admin" &&
      req.nextUrl.pathname.startsWith("/dashboard")
    ) {
      return NextResponse.redirect(new URL("/category", req.url));
    }

    return NextResponse.next();
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        // dashboard権限チェック
        // profileで始まるパスのみ認証検査
        if (req.nextUrl.pathname.startsWith("/profile")) {
          return !!token;
        }
        // その他のパスは常にtrueを返す
        return true;
      },
    },
  }
);

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|.*\\.avif$).*)", // 静的ファイル除外
    "/",
    "/dashboard",
    "/profile/:path*", // profileパスのみmatcherに含む
  ],
};