정중식의 개발공부로그

회원기능 만들기 OAuth + session 방식

03 May 2023 | nextjs

Next-auth 라이브러리를 사용하면 기본적으로 모든 방식이 JWT이다.
session방식으로 회원기능을 만들려면 어떻게해야할까?

DB adapter

가입된 유저정보를 DB에 저장하는게 필요하거나, 유저 로그인상태를 엄격하게 관리하고 싶을 때 사용

DB adapter의 동작방식은 다음과 같다.

  1. 첫 로그인시 자동으로 유저를 회원가입 시켜서 DB에 유저 회원정보를 보관해준다.

  2. 로그인시 자동으로 유저가 언제 로그인했는지 세션정보를 DB에 보관해준다.

  3. 서버에서 지금 로그인된 유저정보가 필요하면 JWT가 아니라 DB에 있던 세션정보를 조회해서 가져온다.

  4. 로그아웃시 유저 세션정보는 DB에서 삭제된다.

MongoDB adapter 설정하기

터미널 열고 설치

npm install @next-auth/mongodb-adapter

MongoDB말고 다른 DB에 유저 세션을 저장하고싶다면, 다른 DB adapter를 찾아서 사용하면된다.
참고로 redis같은 DB는 데이터 저장시 하드말고 램을 사용하기 때문에 빨라서 세션 방식 구현할 때 인기가있다고 한다.

/pages/api/auth/[…nextauth].js을 다음과 같이 변경해준다.
(주석처리로 //추가 이부분을 주의깊게 보면 될듯)

import { connectDB } from "@/util/database"; //추가
import { MongoDBAdapter } from "@next-auth/mongodb-adapter"; // 추가

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: 'Github에서발급받은ID',
      clientSecret: 'Github에서발급받은Secret',
    }),
  ],
  secret : '어쩌구'
  adapter : MongoDBAdapter(connectDB), //추가함
};

export default NextAuth(authOptions);

참고로 connectDB는 DB접속용 코드를 모아놓은 파일이다.

// connectDB
import { MongoClient } from 'mongodb';

const url = 'db주소입력';
const options = { useNewUrlParser: true };
let connectDB;

if (process.env.NODE_ENV === 'development') {
  if (!global._mongo) {
    global._mongo = new MongoClient(url, options).connect();
  }
  connectDB = global._mongo;
} else {
  connectDB = new MongoClient(url, options).connect();
}
export { connectDB };

이렇게 하면 세션으로 회원기능 만들기는 끝이다.

mongoDB 확인해보기

이미지

▲ 로그인후, MongoDB를 확인해보면 이미지와 같이 세개의 컬렉션이 생성되어있다.

sessions: 현재 로그인된 유저정보와 로그인 유효기간이 적혀있다.
users: 유저들 보관하는곳이다. 유저끼리 구분은 이메일로 한다.
accounts: 유저계정 보관하는 곳이다.

하나의 유저는 여러개의 계정을 가지고 있을 수 있기 때문에 여러 계정마다 이메일이 중복될 수도 있다.

Q. users vs accounts 차이

어떤 한 유저가 Github으로도 가입하고 Google로도 가입 해버렸다고 가정해보자.
근데 이사람의 깃헙 계정과 구글 계정이 test@naver.com으로 중복되어있는 경우,

users 컬렉션에는 test@naver.com 이메일을 가진 document 한개만 생성되는데,

accounts 컬렉션에는
test@naver.com + Github이 써있는 document,
test@naver.com + Google이 써있는 document,
이렇게 두개가 생성이 된다.

이런 식으로 유저는 한명이지만, 계정은 두개이상 생성이 가능하다.
(이메일이 같으면 같은 유저라고 자동으로 간주한다.)

DB adapter 컬렉션 저장 위치 변경

DB adapter 사용시 기본으로 설정되어있는 database에 accounts, sessions, users 3개 컬렉션들을 생성한다.

이미지

그래서 forum database에 저런 컬렉션들이 생성된다.

그게 싫고 다른 이름의 database에 넣고 싶으면,
(forum이름의 데이터베이스 안에 집어넣고싶으면)

MongoDB 접속 URL에 물음표가 있을텐데 그거 왼쪽에 원하는 database 이름을 넣으면 된다.

Ex) mongodb+srv://'디비아이디':'디비비번'@cluster0.ip8dsz4.mongodb.net/'이곳에 원하는 db 이름 입력'test

Related Posts