[NextAuth] NextAuth로 로그인 구현하기 - 5 (middleware 적용)

로그인에 이어서 middleware를 추가하여 사용자가 접근할 수 있는 페이지를 제한 할 것이다.

우선 middleware를 작성해준다.

// src/middleware.ts
import { getToken } from 'next-auth/jwt';
import { getSession } from 'next-auth/react';
import { NextRequest, NextResponse } from 'next/server';

export const middleware = async (req: NextRequest) => {
  const token = await getToken({
    req,
    secret: process.env.NEXTAUTH_SECRET,
    raw: true,
  });
  const { pathname } = req.nextUrl;

  if (pathname.startsWith('/auth')) {
    if (token) {
      return NextResponse.redirect(new URL('/', req.url));
    }
  }
};

export const config = {
  matcher: ['/auth/:path*'],
};

NextAuth 메서드인 getToken으로 현재 로그인한 사용자의 토큰을 불러온다.
요청한 url을 확인하기위해 NextRequest에 존재하는 nextUrl을 통해 url path를 불러온다.
/auth로 시작하는 url이 브라우저에 입력이 되거나 사용자가 그 경로로 접근하려 한다면 토큰을 확인후 메인페이지로 redirect 시킨다.

반드시 matcher를 설정해주어야 하는데 미들웨어 매칭 규칙은 Next.js 공식문서에서 확인할 수 있다.

Next.js Middleware matcher rules

반드시 / 로 시작해야하고 :path* 를 적어주면 경로에있는 모든 값이 된다.