NextJS 독학 5차시

수강중인 강의 : 코딩애플 NextJS

✅ 세션, 토큰 로그인

세션 방식

1. 유저가 로그인을 한다.
2. 서버 DB에 아이디, 로그인 날짜, 유효기간, 세션 ID를 기록한다.
3. 이후 post, get 요청 시 쿠키에 session id가 기록되어 보내진다.
4. session id를 DB의 정보와 비교 후, 요청을 처리한다.

장점 : 매 요청마다 엄격하게 로그인 상태를 체크할 수 있다.

단점 : DB에 부하가 걸린다. 해소 -> Redis를 이용한 입출력 부하 줄이기

토큰 방식(JWT)

1. 유저가 로그인을 한다.
2. 쿠키에 아이디, 로그인 시간, 유효기간 등이 암호화되어 저장된다.
3. 이후 요청 시 쿠키를 보고 처리한다.

장점 : DB 부담이 적다.

단점 : 입장권이 도용당하면 큰일난다. 해소 -> 나쁜 입장권 목록을 DB에 저장한다.

✅ OAuth

로그인 시 다른 곳의 개인정보 권한을 대여한다. ex) 구글에게 유저정보에 대한 접근 권한을 위임받는다.

예시

1. 유저가 구글 로그인을 진행한다.
2. 유저에게 내 사이트에서 정보 권한을 이용해도 되는지 동의를 구한다.
3. 구글에서 권한 증명에 사용되는 코드를 발급한다.
4. 받은 코드로 유저 정보 등 자원을 구글에 요청하여 받아온다.
   이 때 받는 정보에는 유저이메일, 이름, AccessToken 등이 포함된다.
   이후 이를 가지고 JWT, 혹은 세션 방식으로 이후 과정을 이어나간다.

Next에서의 OAuth

Next에서는 NextAuth.js라는 라이브러리가 존재한다.
이를 이용하면 소셜 로그인, JWT 토큰, Session, DB Adapter 방식 등 모두 이용 가능하다.
단, 아이디, 비밀번호를 이용한 로그인 시에는 세션 방식은 사용 불가능하고, 토큰 방식으로만 이용할 수 있다. 보안 이슈를 막기 위함이라고 한다..

깃허브 소셜 로그인 만들기

1. 깃허브 로그인 진행 후, settings -> Developer Settings -> OAuth Apps에 진입한다.

이후 New OAuth App을 누르고, name, URL을 적어준다.
이 때 개발 환경이라면 Homepage URL과 Authorization callback URL에 모두 http://localhost:3000을, 배포된 환경이 있다면 해당 URL을 적어준다.

이후 생성 시 발급되는 Client ID와, Generate a new client secret를 눌러 암호를 잘 저장해두자.

이후 Next-Auth 세팅을 위해

npm install nextauth 입력,
이후 root/pages/api/auth/[...nextauth].js
위와 같은 위치에 폴더 및 파일을 생성한다.

// [...nextauth].js
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: 'Github에서 발급받은 ID',
      clientSecret: 'Github에서 발급받은 Secret',
    }),
  ],
  secret : 'jwt생성시 쓸 암호'
};
export default NextAuth(authOptions);

이 때 jwt 생성 시 쓰는 암호에는 복잡한 문자열을 알아서 입력해주면 된다. 나는 1q2w3e4r!로 적었다.

이후 간단한 로그인 버튼을 만들어주자.

// LoginBtn.tsx
"use client";

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

export default function LoginBtn() {
  
  return (
    <button
      onClick={() => {
        signIn();
      }}
    >
      로그인
    </button>
  );
}

로그인 시에는 signIn을, 로그아웃 시에는 signOut을 import하여 사용해주면 된다.
이후 정보가 잘 받아와졌는지 확인하기 위해

let session = await getServerSession(authOptions);
console.log(session);

session은 다음과 같다.

{
  user: {
    name: 'Donghyun Hwang',
    email: '-----@soongsil.ac.kr',
    image: 'https://avatars.githubusercontent.com/u/95581482?v=4'
  }
}

나의 깃허브 정보들이 잘 넘어와진걸 볼 수 있다.

💎 느낀 점

백엔드 팀과 리액트 + 구글 로그인 + JWT토큰 방식으로 OAuth를 구현하다 많이 헤맸던 기억이 난다. 그 과정에서 알게 됐던 것들 덕분에 강의를 들으며 복습하는 기분이었고, 직접 Next + 세션 혹은 토큰 방식으로 로그인을 구현하는 것에 기대를 가지고 있다.