[javascript] Next.js에서의 인증(로그인) 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

세션 기반 인증: Next.js에서는 express-session과 같은 세션 관리 미들웨어를 사용하여 세션 기반 인증을 구현할 수 있습니다. 사용자가 로그인에 성공하면, 세션에 사용자 정보를 저장하고, 요청마다 세션을 확인하여 인증 상태를 유지하는 방식입니다.

// pages/api/login.js

import session from 'express-session';

export default function login(req, res) {
  // 인증 로직 실행 후 로그인 성공시
  const user = {
    id: 1,
    username: 'john',
    email: 'john@example.com',
  };

  req.session.user = user; // 세션에 사용자 정보 저장

  res.status(200).json({ message: '로그인 성공' });
}

JWT(Json Web Tokens) 기반 인증: Next.js에서는 jsonwebtoken 패키지와 함께 JWT 기반 인증을 구현할 수 있습니다. 사용자가 로그인에 성공하면, JWT를 발급하여 사용자에게 전달하고, 요청마다 JWT를 확인하여 인증 상태를 유지하는 방식입니다.

// pages/api/login.js

import jwt from 'jsonwebtoken';

export default function login(req, res) {
  // 인증 로직 실행 후 로그인 성공시
  const user = {
    id: 1,
    username: 'john',
    email: 'john@example.com',
  };

  const token = jwt.sign(user, 'secret_key'); // JWT 발급

  res.status(200).json({ token });
}

OAuth 기반 인증: Next.js에서는 next-auth와 같은 패키지를 사용하여 OAuth 기반 인증을 구현할 수 있습니다. 이를 통해 직접 로그인 처리를 구현하지 않고도 Google, Facebook, GitHub 등의 제공자를 통해 인증을 처리할 수 있습니다.

// pages/api/auth/[...nextauth].js

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

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

이것은 Next.js에서 인증 처리를 위한 몇 가지 일반적인 방법입니다. 개발환경 및 요구 사항에 따라 다른 방법을 선택할 수 있습니다.