Next.js - next.js에서 session 활용하기

📌session 이란 무엇인가? 

클라이언트와 서버 간의 연결 상태를 의미, 즉 클라이언트가 브라우저에 접속하여 서버와 접속이 종료하기 전의 상태를 의미한다.

 

📌session 동작 순서 

출처: https://dongsik93.github.io/til/2020/01/08/til-authorization(1)/

1. 사용자가 로그인을 한다
2. 서버측에서는 로그인 정보를 통해 사용자를 확인한다.
3. 서버측에서 세션 저장소에 사용자 세션 생성을 요청한다.
4. 사용자의 고유한 ID값을 부여하여 세션 저장소에 저장하고, 이와 연결되는 세션 ID를 발행한다.
5. 사용자는 서버에서 해당 세션ID를 받아 쿠키에 저장한다
6. 인증이 필요한 요청을 할 때 헤더에 쿠키를 실어 요청한다
7. 서버에서는 쿠키를 받아 세션 저장소에 대조를 한다
8. 인증 후 요청된 정보를 가져온다
9. 인증이 완료되고 서버는 사용자에게 맞는 데이터를 보내준다

 

📌session 과 cookie

저장위치	클라이언트	서버
라이프사이클(만료시점)	쿠키 저장시 설정	브라우저 종료 시 삭제
보안	비교적 취약	안전
속도	빠름	비교적 느림

 

 

 

📌Next.js에서 session과 cookie이용하기 

server 컴포넌트와 client 컴포넌트 관점에서 프로젝트에서 사용한 로직을 정리해보았다. 

 

서버 컴포넌트 - instance.ts, authApi.ts

'use server';

import { cookies } from 'next/headers'; // 서버 사이드에서 쿠키를 처리하기 위한 내장 모듈
import { BASE_URL } from '@/constants/url';
import { auth } from '@/auth';
import { redirect } from 'next/dist/server/api-utils';

interface RequestOptions {
  headers?: Record<string, string>;
  [key: string]: string | Record<string, string> | undefined;
}

const fetchInstance = async (url: string, options: RequestOptions = {}) => {
  const session = await auth();
  const accessToken = session?.user?.accessToken;

  const headers: RequestOptions['headers'] = {
    'Content-Type': 'application/json',
    ...options.headers,
  };

  if (accessToken) {
    headers.Authorization = `Bearer ${accessToken}`;
  }

  try {
    const response = await fetch(`${BASE_URL}${url}`, {
      ...options,
      headers,
    });

   //response 로직 생략 
   
  } catch (error) {
   //에러 처리 로직 생략
  }
};

export const instance = fetchInstance;

'use server';

import { BASE_URL } from '@/constants/url';
import { instance } from './instance';

export const signIn = async ({ email, password }: { email: string; password: string }) => {
  const response = await instance('sign-in', {
    body: JSON.stringify({ email, password }),
    credentials: 'include',
    method: 'POST',
  });

  return response;
};

export const reissueToken = async (refresh_token: string) => {
  const response = await fetch(`${BASE_URL}reissue`, {
    headers: {
      Cookie: `refresh_token=${refresh_token}`,
    },
    method: 'POST',
  });

  // reponse에러 로직 생략

  const cookie = response.headers.get('Set-Cookie');
  const { accessToken } = await response.json();
  const refreshToken = cookie?.split(';')[0].split('=')[1];

  return { accessToken, refreshToken };
};

 

세션(Session)

• 서버 사이드에서는 auth() 함수를 통해 세션 정보를 가져온다. 
  • 여기에는 보통 사용자 액세스 토큰과 같은 인증 관련 정보가 포함되며, 이를 이용해 API 요청 시 인증을 처리한다. 
  • fetchInstance 함수에서는 세션 정보를 가져와서 액세스 토큰(session?.user?.accessToken)을 추출하고, 이 토큰을 Authorization 헤더에 넣어 API 요청 시 사용한다.  (Bearer ${accessToken})

액세스 토큰(Access Token)

• 액세스 토큰은 서버에서 외부 서비스로의 API 요청을 인증하기 위해 사용된다. 이 토큰이 있어야만 권한이 필요한 작업들을 수행할 수 있다. 
• 코드에서는 /sign-in이나 토큰 재발급(reissue) 같은 API 요청을 보낼 때, 헤더 또는 본문에 액세스 토큰을 포함시켜 요청을 인증한다. 만약 액세스 토큰이 만료되거나 없을 경우, 새로운 토큰을 발급받거나 에러 처리 로직이 실행된다.

쿠키(Cookies)

• 쿠키는 주로 서버 사이드에서 세션을 유지하는 데 사용된다. reissueToken 함수에서는 refresh_token이 쿠키에 저장되어, 이를 이용해 새로운 액세스 토큰을 발급받는다.
• 또한 서버는 Set-Cookie 헤더를 통해 새로운 토큰을 클라이언트에 저장할 수 있다. (response.headers.get('Set-Cookie'))

 

클라이언트 컴포넌트 - Header.tsx

'use client';

//style관련 import 생략

import useUserInfo from '@/hook/useUserInfo';
import { useUserInfoStore } from '@/store/memberStore';
import { useSession } from 'next-auth/react';
import { useEffect } from 'react';
import { getUserInfo } from '@/api/memberApi';

export default function Header() {
  const userInfo = useUserInfo();
  const { setUserInfo } = useUserInfoStore();

  const { data: session, update } = useSession();

  const accessToken = session?.user?.accessToken;
  const refreshToken = session?.user?.refreshToken;

  // update();

  useEffect(() => {
    const storedUserInfo = localStorage.getItem('userInfo');
    if (storedUserInfo && !accessToken && !refreshToken) {
      localStorage.removeItem('userInfo');
      setUserInfo(null);
    }
  }, [accessToken, refreshToken, setUserInfo]);

  // 유저정보조회
  useEffect(() => {
    (async () => {
      if (!localStorage.getItem('userInfo') && accessToken && refreshToken) {
        const result = await getUserInfo();
        const storedUserInfo = { name: result.name, course: result.course, email: result.email };
        if (result) {
          localStorage.setItem('userInfo', JSON.stringify(storedUserInfo));
          setUserInfo(result);
        }
      }
    })();
  }, [accessToken, refreshToken, setUserInfo]);

  return (
     // html 로직 생략
  );
}

세션(Session)

• 클라이언트 사이드에서는 next-auth의 useSession을 사용해 사용자 세션 상태를 관리한다. 로그인 시 액세스 토큰과 리프레시 토큰을 세션에 저장한 후, 이를 이용해 인증된 API 요청을 보낼 수 있다. 
• 토큰을 가져오고(session?.user?.accessToken, session?.user?.refreshToken), 이 토큰들을 이용해 사용자 정보를 서버에서 받아와 전역 상태에 저장하거나 localStorage에 저장

액세스 토큰(Access Token)

• 액세스 토큰이 없으면, 기존에 저장된 사용자 정보를 지우도록 로직이 처리

쿠키(Cookies)

• 클라이언트 사이드에서는 쿠키를 직접적으로 다루진 않지만, credentials: 'include' 옵션을 통해 쿠키를 자동으로 요청에 포함시킬 수 있다. 이를 통해 브라우저가 자동으로 쿠키(예: 리프레시 토큰)를 서버에 전송하여 세션이 유진된다.

 

전반적으로 핵심은 next.js는 서버 컴포넌트에서 쿠키를 읽고 처리한 뒤 클라이언트로 필요한 데이터만 보내주는 방식이기 때문에 쿠키 값을 클라이언트에서 직접 노출시키지 않고도 사용할 수 있다!! 

그리고 우리 프로젝트에서는 세션과 쿠키, 토큰을 모두 사용했다. 보통 세션, 쿠키 vs jwt(토큰) 이렇게 나눠서 로그인을 구현한다. 하지만 Next.js에서 제공하는 useSession훅을 사용해 세션 관리 기능을 활용하면서도, 클라이언트에서 토큰을 통해 API 요청을 처리하는 방식으로 혼합된 구조를 사용할 수 있다. 

 

 

참고자료

• https://nextjs.org/docs/app/building-your-application/authentication#session-management
• https://dongsik93.github.io/til/2020/01/08/til-authorization(1)/
• https://velog.io/@beneficial/Session%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80