엉금엉금

Next.js에서는 auth.js ( 구 Next.auth)를 통해서 유저 인증(authentication )및 권한 부여(authorization)를 손쉽게 구현 할 수 있습니다.

Oauth를 활용하여 유저 인증을 하는 방법은 앞선 게시글에서 다루었고, 권한 설정에 대해서 다루어 볼려고 합니다.

https://ungumungum.tistory.com/110

방법 1. session을 통해서 다루기

우선 auth.ts 파일에서 유저 정보를 얻을 수 있는 auth함수를 반환하고 있습니다.

//auth.ts
import NextAuth, { NextAuthConfig } from 'next-auth';
import Google from 'next-auth/providers/google';

export const authConfig = {
  theme: { logo: 'https://authjs.dev/img/logo-sm.png' },
  providers: [Google],
} satisfies NextAuthConfig;

export const { handlers, signIn, signOut, auth } = NextAuth(authConfig);

이를 활용하여 sesion 정보의 유무를 확인할 수 있고, 만약 로그인 되어있지 않다면 원하는 주소로 redirect 시킬 수 있습니다. 

import { auth } from '@/auth';
import { redirect } from 'next/navigation';

export default async function Mypage() {
  const session = await auth();
  if (!session) return redirect('/');
  return <main>로그인해야 볼 수 있는 페이지</main>;
}

다만 이렇게 할 경우 모든 페이지에 대해서 동일한 코드가 반복되어야 합니다. 또한 관심사가 분리되지 않아서, 어떤 페이지가 권한이 필요한지 한눈에 파악하기가 힘듭니다.

방법 2.  config에서 callback 설정하기

Next.js의 공식문서 tutorial에서는 아래와 같은 코드를 통해  접근권한을 관리합니다.

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
// authorized에서 false가 반환될 때 이동할 로그인 페이지(signIn)
  pages: {
    signIn: '/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
    // user가 있으면 로그인 없으면 로그인 되지 않은 상태
      const isLoggedIn = !!auth?.user;
      // url의 경로가 /dashboard로 시작하는지
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      
      // dashboard에서는 권한이 필요하므로, 비로그인시 login페이지로 이동
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
      // 만약 로그인 된 유저라면 홈에서 origin과 더해서 /dashboard로 이동
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    },
  },
  providers: [], // Add providers with an empty array for now
} satisfies NextAuthConfig;

config설정의 callbacks를 통하여서 권한 확인할 수 있는데,  이중 authorized는 next.js의 middleware와 함께 사용해서 

true를 반환하면, 권한 인증, false를 반환하면 권한이 없다는 것이다.

저는 위 코드를 기반으로 mypage에 접속햇는데 비로그인시 /로 이동하도록 하였습니다.

export const authConfig = {
  pages: {
    signIn: '/',
  },
  theme: { logo: 'https://authjs.dev/img/logo-sm.png' },
  callbacks: {
     authorized({ auth, request: { nextUrl } }) {
       const isLoggedIn = !!auth?.user;
       const protectedPath = ['/mypage'];
       const isProtected = protectedPath.includes(nextUrl.pathname);
       if (isProtected) {
         if (isLoggedIn) return true;
         return Response.redirect(new URL('/', nextUrl));
       }
       return true;
     },
   },
  providers: [Google],
} satisfies NextAuthConfig;

이제 위 코드를 적용하기 위해서는 middleware에 등록해야 합니다.

미들웨어 등록

//middleware.ts
import NextAuth from 'next-auth';
import { authConfig } from './auth';

export default NextAuth(authConfig).auth;

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

next.js에서는 middleware 파일에서 미들웨어등록을 할 수 있습니다.

이때 config에 matcher를 통해서 언제 미들웨어를 사용할 지 결정할 수 있는데,

정규식의 부정형 전방 탐색을 활용하여

1. api
2. _next/static
3. _next/image
4. .png로 끝나는 문자열

을 포함한 경우에는 middleware가 실행되지 않도록 하였습니다.
( next.js에서는  불필요한 요청을 줄이기 위해서 cache가 진행되는데, _next/static , _next/image는 각각 cache된 파일들의 경로입니다.)

Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
// https://nextjs.org/docs/pages/building-your-application/routing/middleware

이렇게 미들웨어를 사용하는 경우에는 특정페이지 요청전에 미들웨어가 실행되어 불필요한 요청을 막을 수 있습니다.

next.js에서 파일의 실행순서는 아래와 같습니다.

1. headers from next.config.js
2. redirects from next.config.js
3. Middleware (rewrites, redirects, etc.)
4. beforeFiles (rewrites) from next.config.js
5. Filesystem routes (public/, _next/static/, pages/, app/, etc.)
6. afterFiles (rewrites) from next.config.js
7. Dynamic Routes (/blog/[slug])
8. fallback (rewrites) from next.config.js

참고 문헌

https://nextjs.org/docs/pages/building-your-application/routing/middleware

https://authjs.dev/reference/nextjs#callbacks

https://authjs.dev/reference/nextjs#authorized