JWT 다루기 with Next.js app router + auth.js

👩🏻‍💻 로직

로그인 -> 프론트엔드 서버 -> 백엔드 서버 요청 -> 프론트엔드 서버로 쿠키담은 response 날려줌 -> 문자열로 된 토큰을 객체로 만들어주는 쿠키 굽기 -> 브라우저에 쿠키 심기

 

 

** 프론트 서버는 공용서버이기 때문에 쿠키를 심으면 안된다. 무조건 브라우저에 심어야한다.
- next-auth는 auth.js로 이름이 바꼈다. v.4 버전

- Auth.js가 해주는 일

• 쿠키 로그인의 가장 큰 보안 위협인 CSRF를 알아서 막아준다.

1. auth.js 설치

yarn add next-auth@beta @auth-core

• 공식 홈페이지를 들어가보면 아직은 v.5의 beta버전으로 사용할 수 있는 것을 확인할 수 있다. 그런데 이게 Next.js의 app router와 맞다.

 

2. auth.ts 파일을 app 폴더 최상단에 만든다.

• 이곳에서 providers를 사용해서 로그인, 소셜 로그인 기능 로직을 짜거나 가져올 수 있다.

/src/auth.ts

import NextAuth from "next-auth"

// 여기 handlers를 나중에 api폴더 안에서 사용할 예정
export const { handlers: { GET, POST }, signIn, signOut, auth } = NextAuth({ 
providers: \[\],  
})

 

3. middleware를 적용한다.

• Next.js에서 제공하는 기능으로 반드시 파일이름이 middleware.ts 여야한다.
• 로그인을 해야만 접근할 수 있는 페이지 (ex) mypage)등을 설정해서 미로그인시 해당 페이지로 접근할 경우 redirect한 경로로 보내버린다. 예전엔 페이지마다 일일이 설정해줘야했다면, 그런 수고를 덜어준다. 프레임 워크 최고..

/src/middleware.ts  

import { NextResponse } from 'next/server';

import { auth } from './auth';

export async function middleware() {  
const session = await auth();  
if (!session) {  
return NextResponse.redirect('[http://localhost:3000/login'](http://localhost:3000/login'));  
}  
}

// 미들웨어를 적용할 라우터 -> 로그인을 해야만 접근할 수 있는 곳  
export const config = {  
matcher: \['/mypage'\],  
};

 

4. API 라우트를 만들어준다.

• 이것도 경로가 중요하다. Next.js는 폴더로 라우팅되기 때문에 폴더, 파일 이름이 중요하다.
• 여기서 [...nextauth]는 Catch-all 라우트인데 아래처럼 쓸 수 있다. 즉 해당 위치의 모든 url이 다 포함되는 것이다.

Next.js 공식문서

src/app/api/auth/[...nextauth]/route.ts

export { GET, POST } from '@/auth'; 

• 위 경로로 api를 만들면 프론트엔드 서버에서 만들어진 것이기 때문에 주소 "http://localhost:3000/api~"가 숨겨져 있다고 생각하면 된다.
• 하지만 auth.js를 사용하면 거기서 제공하는 handler를 쓰면 된다.

** Next.js도 서버를 가지고 있기 때문에 간단한 로그인, 회원가입 등은 충분히 프론트엔드에서도 해결할 수 있다. 하지만 규모가 커질수록 프론트, 백 서버를 분리하는 것이 유리하다.

Why? 만일 프론트에 요청이 많이오고 백에는 요청이 적게 올경우 프론트만 서버를 늘려주면 된다. 하지만 한 서버를 같이 이용할 경우에는 그 하나만 늘릴 수 있기 때문에 비효율적이다.

 

5. SessioProvider로 감싸서 useSession 사용하기

[참고 ]https://authjs.dev/getting-started/session-management/get-session

Auth.js | Get Session

 

/src/app/AuthSession.tsx

'use client';

import { SessionProvider } from 'next-auth/react';

type Props = {
  children: React.ReactNode;
};

export default function AuthSession({ children }: Props) {
  return <SessionProvider>{children}</SessionProvider>;
}

/app/layout.tsx

<AuthSession>
    <main className="h-screen w-full">{children}</main>
</AuthSession>

session 정보 가져올 때,

a. 클라이언트 컴포넌트용

'use client'  

import { useSession } from 'next-auth/react';  
import { useRouter } from 'next/navigation';

(...)  
const router = useRouter()  
const {data: session} = useSession();  
if (session?.user) {  
Router.replace('/mypage');  
return null;  
}  
(...)

b. 서버 컴포넌트용

import {auth} from "@/auth";

export default async function Home() {
    const session = await auth();
    if(session?.user) {
        redirect('/mypage')
        return null;
    }
    return(
        <Main/>
    )
}

 

6. 백엔드 서버에서 jwt 받아오기

2번에서 만들어놓은 auth.ts에서 로그인 로직을 짠다. 내 경우에는 로그인 시 백엔드에서 response로 jwt를 날려주고 그걸가지고 다시 유저정보 확인 API에 요청을 날려서 그 유저의 정보를 받아오는 형식이다.

 

즉, 백엔드 api로 로그인 요청 -> 응답값으로 받는 jwt를 cookies에 저장 -> jwt의 access_token을 가지고 회원정보 호출 -> zustand에 회원정보 저장 -> 저장한 cookies를 접근 권한이 필요한 API에 헤더로 넣어서 사용

 

여기서 주의할 점은 return 값에 넣는 키 값에는 Auth.js에서 지정한 email, name, image 만 들어간다. 

/src/auth.ts

import { fetcher } from '@/lib/fetcher';
import { cookies } from 'next/headers';
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

import { SignInResponse, UserResponse } from './services/auth/type';

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  pages: {
      // Auth.js에서 지정해 놓은 경로를 내가 만들어 놓은 endpoint로 대체
    signIn: '/login',
    newUser: '/register',
  },
  callbacks: {
      // 로그인시 프론트엔드 서버에서 실행되는 부분 (터미널에서 확인 가능)
    jwt({ token }) {
      console.log('auth.ts jwt', token);
      return token;
    },
    session({ session, newSession, user }) {
      console.log('auth.ts session', session, newSession, user);
      return session;
    },
  },
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 로그인 호출
        const authResponse = await fetcher.post<SignInResponse>('/api/v1/auth/login', {
          // next-auth에서 고정된 이름 credentials.~
          email: credentials.username,
          password: credentials.password,
        });

        const setCookie = authResponse['access_token'];
        if (setCookie) {
          // 브라우저에 쿠키를 심어주기
          cookies().set('access_token', setCookie, {
            httpOnly: true,
          });
        }
        if (!authResponse) {
          return null;
        }

        const myInfo = await fetcher.get<UserResponse>('/api/v1/user/me', {
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${setCookie}`,
          },
        });
        const { user } = myInfo;

        return {
          // next-auth에서는 아래의 세개 이름만 지원
          email: user.email,
          name: user.nickname,
          image: user.profile_image,
          ...user,
        };
      },
    }),
  ],
});

 

7. 로그인 컴포넌트

credentials에 username, password만 가지고 올 수 있어서 그 이름에 맞춰서 Submit을 해줘야한다. 

클라이언트 컴포넌트일 경우 'next-auth/react'에서 불러와야하고 서버 컴포넌트일 경우 위에 만들어놓은 'auth.ts'에서 불러오면된다. 

 // login/page.tsx
 (...)
 import { signIn } from 'next-auth/react'; 
 
 const onSubmit = async (data: z.infer<typeof LoginSchema>) => {
    try {
      const response = await signIn('credentials', {
        username: data.email,
        password: data.password,
      });
      if (!response.ok) {
        console.log('로그인 실패');
      } else {
        console.log('로그인 성공');
      }
      router.replace('/');
    } catch (err) {
      throw new Error(`${err}`);
    }
  };
  
  (...)

 

로그인 후 찍히는 프론트엔드 서버 터미널

 

8. 쿠키 사용

/** 접근 권한 필요 api 예시 */
import { fetcher } from '@/lib/fetcher';
import { cookies } from 'next/headers';

export const Test = async () => {
  const cookieStore = cookies();
  const cookie = cookieStore.get('access_token');
  const data = await fetcher.get('/api/v1/user/me', {
    headers: {
      Authorization: `Bearer ${cookie}`,
    },
  });
  return data;
};

 

 

현재는 access_token을 가지고 접근 제한이 있는 기능을 사용할 수 있는 정도로만 해놓았다. 추후 refresh_token을 가지고 access_token이 만료되었을 때 자동으로 새로운 access_token을 불러올 수 있도록 하는 기능을 구현할 예정이다.