세션, 쿠키

NextAuth.js 사용하기

NextAuth.js는 Next.js에서 인증과 세션 관리를 쉽게 할 수 있는 라이브러리입니다. OAuth, 이메일 인증, 자격 증명 기반 인증 등 다양한 인증 방식을 지원합니다. NextAuth.js를 사용하면 세션 관리를 간단하게 할 수 있어요.

 

npm install next-auth

 

설정 (pages/api/auth/[...nextauth].js):

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  session: {
    jwt: true,
  },
});

 

NextAuth는 서버 측에서 세션 정보를 관리하고, 클라이언트에서 useSession 훅을 사용하여 현재 세션 정보를 가져올 수 있습니다.

import { useSession } from "next-auth/react";

export default function Page() {
  const { data: session } = useSession();
  
  if (session) {
    return <p>Logged in as {session.user.name}</p>;
  }
  return <p>Not logged in</p>;
}

 

JWT (JSON Web Token) 사용하기

Next.js API 라우트를 사용해 JWT 기반 세션 관리를 할 수도 있습니다. JWT는 클라이언트에서 토큰을 발급받고 이를 쿠키나 로컬 스토리지에 저장한 뒤, 요청 시 토큰을 포함하여 서버에 인증을 요청하는 방식입니다.

npm install jsonwebtoken

 

API 라우트에서 JWT 생성:

import jwt from "jsonwebtoken";

export default function handler(req, res) {
  if (req.method === "POST") {
    const token = jwt.sign({ userId: 1 }, process.env.JWT_SECRET, {
      expiresIn: "1h",
    });
    res.setHeader("Set-Cookie", `token=${token}; HttpOnly; Path=/`);
    res.status(200).json({ message: "Token created" });
  }
}

 

JWT 검증:

import jwt from "jsonwebtoken";

export default function handler(req, res) {
  const token = req.cookies.token;
  if (!token) {
    return res.status(401).json({ message: "Unauthorized" });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    res.status(200).json({ userId: decoded.userId });
  } catch (error) {
    res.status(401).json({ message: "Invalid token" });
  }
}

 

쿠키와 세션 저장소 사용하기

서버에서 쿠키를 생성하고, 이를 세션 저장소와 연결하여 사용자가 로그인 상태를 유지하도록 할 수 있습니다. 쿠키를 사용하면 클라이언트와 서버 간 세션 정보를 안전하게 주고받을 수 있습니다.

npm install cookie-session

 

세션 설정: pages/api/login.js에서 세션을 설정하는 예제입니다.

import cookieSession from "cookie-session";

export default function handler(req, res) {
  if (req.method === "POST") {
    req.session = {
      userId: 1,
    };
    res.status(200).json({ message: "Logged in" });
  }
}

 

세션 검증:

export default function handler(req, res) {
  const { session } = req;
  if (!session || !session.userId) {
    return res.status(401).json({ message: "Unauthorized" });
  }
  res.status(200).json({ message: "Session is valid", userId: session.userId });
}

 

요약

1. NextAuth.js: 설정이 간편하며 OAuth 인증을 쉽게 구현할 수 있습니다.
2. JWT: 세션 정보를 토큰으로 관리하며 API와 함께 사용할 수 있습니다.
3. 쿠키와 세션 저장소: 서버에서 쿠키와 세션을 직접 관리하는 전통적인 방법입니다.

 

 

세션은 로그인 정보만을 다루는 것은 아니지만, 로그인 상태와 같은 일시적인 정보를 관리하는 데 자주 사용돼요. 쉽게 말하면, 세션은 서버와 클라이언트(사용자) 간의 일시적인 상태를 유지하기 위한 캐시와 비슷한 일시적인 저장소라고 생각할 수 있습니다. 하지만 세션은 단순한 캐시보다 조금 더 복잡한 기능을 가지고 있어요.

 

세션의 주요 특징:

• 일시적 정보 저장: 세션은 로그인 정보뿐만 아니라, 사용자가 웹사이트에서 수행한 다양한 작업에 대한 정보를 일시적으로 저장할 수 있어요. 예를 들어, 쇼핑 카트에 담긴 물건, 페이지 탐색 기록, 특정 설정 등이 포함될 수 있죠.
• 고유한 세션 ID: 서버는 각 사용자를 구분하기 위해 고유한 세션 ID를 생성합니다. 이 세션 ID는 보통 쿠키에 저장되며, 사용자가 서버에 요청을 보낼 때 함께 전송되어 서버가 해당 사용자를 식별할 수 있게 해요.
• 서버 측에 저장: 세션은 보통 서버 측에서 관리됩니다. 사용자의 로그인 상태나 쇼핑 카트 내용 등 일시적인 데이터가 서버의 메모리나 데이터베이스에 저장되고, 사용자는 이 세션 정보에 접근할 수 있는 세션 ID만 가지고 있어요.
• 세션 만료: 세션은 일정 시간이 지나면 만료되기 때문에, 캐시와 유사한 일시적인 데이터 저장소로 볼 수 있어요. 예를 들어, 사용자가 로그인하고 나서 일정 시간이 지나면 세션이 만료되어 다시 로그인해야 할 수 있습니다.

캐시와의 차이점:

• 목적: 캐시는 주로 자주 사용하는 데이터를 빠르게 가져오기 위해 저장하는 것이 목적이고, 세션은 사용자와 서버 간의 상태를 유지하는 것이 목적이에요.
• 위치: 캐시는 보통 클라이언트(브라우저나 로컬)에 저장되거나, 서버의 메모리에서 관리됩니다. 반면 세션은 주로 서버에서 저장되며, 클라이언트는 세션 ID만 관리해요.
• 데이터 범위: 세션은 로그인 상태, 사용자 설정, 일시적인 작업 상태 등 사용자 맞춤 정보를 다루지만, 캐시는 웹 페이지나 이미지 같은 공통 데이터를 빠르게 제공하기 위해 사용됩니다.

예시:

• 세션: 사용자가 쇼핑몰에서 로그인을 하고, 쇼핑 카트에 물건을 담은 후 로그아웃하기 전까지 서버는 이 정보를 세션에 저장합니다. 이 정보는 서버에 저장되며, 브라우저가 닫히거나 로그아웃하면 세션이 만료됩니다.
• 캐시: 사용자가 자주 방문하는 웹사이트의 이미지나 글을 미리 로컬에 저장해서, 다음번에 사이트를 방문할 때 더 빠르게 페이지를 로드할 수 있게 하는 것이 캐시입니다.

정리하자면, 세션은 로그인 정보를 포함한 다양한 사용자 상태를 일시적으로 저장하고 관리하는 일시적인 저장소입니다. 캐시와 비슷하게 동작할 수 있지만, 세션은 사용자 맞춤 정보를 관리하는 데 중점을 둔다는 점에서 차이가 있습니다.