[Next.js 13] OAuth SNS Login 구현 ( github, google, naver )

이번에 Nextj.js 13으로 사이드프로젝트 진행중에 , sns login을 구현하였습니다. sns 종류는 github,google,naver 총 이렇게 세가지입니다. (카카오는 별도로 포스팅 할 예정)

 

일단 결론 부터 말씀드리자면 , 구현하는건 next-auth가 있어서 쉬운편 입니다.

깃허브,구글은 굉장히 간단하기도 하지만 vercel 로 배포를 하고나서도 따로 검수요청을 안하고 url 주소만 각 세팅에서 url주소를 localhost 에서 배포된 url 주소로 바꿔주기만 하면 바로 이용 할 수 있습니다.

 

반면에 네이버는 , localhost에선 자유롭게 auth 로그인을 테스트 할 수 있지만 , vercel로 배포를 하면 네이버의 검수를 받아야 실제 서비스를 이용 할 수 있습니다. 그렇다고 검수요청이 빡센(?)편도 아니라서 몇가지 절차만 밟아주면 검수 승인이 2~3일 안에 나는 편 인것같습니다.

 

1. 우선 next-auth 를 install 해줍니다.

npm install next-auth

2. pages > api > auth > [...nextauth].ts 파일을 생성 해주고 , 아래의 코드를 기재해줍니다.

코드의 예시나 자세한 내용은 https://next-auth.js.org/getting-started/example 여길 참고 하면 됩니다.

import NextAuth, { AuthOptions } from "next-auth";
import GithubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"
import NaverProvider from "next-auth/providers/naver";



export const authOptions: AuthOptions({
  adapter: PrismaAdapter(prisma),
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string
    }),
    NaverProvider({
      clientId: process.env.NAVER_CLIENT_ID as string,
      clientSecret: process.env.NAVER_CLIENT_SECRET as string
    }),
  ]
});

export default NextAuth(authOptions);

Next-auth 라이브러리를 사용하면 기본적으로 모든 방식이 JWT입니다.

유저 세션데이터를 DB에 저장해두지 않고 JWT만 유저에게 보내고 ,유저가 로그인이 필요한 페이지 방문시 유저가 제출한 JWT만 검사해서 입장시켜주는 방식입니다. 

 

아무튼 JWT를 사용하면 로그인 구현은 쉬워지는데 JWT방식의 단점을 보완 하고자 , session 방식으로 회원기능을 만들고 싶으면 DB adapter 기능을 쓰면 됩니다. 저는 Prisma Client를 이용하고있어서 prisma를 이용하고있습니다.

 

DB adapter 기능을 켜놓으면 

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

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

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

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

 

adapter 자세히보기 : https://next-auth.js.org/adapters

 

  

1. GIthub 로그인 세팅 및 구현

Github가 제일 간단 합니다.

1. settings -> Develper settings / OAuth Apps / New OAuth App 클릭

2. 아래와 같이 입력해줍니다.

 -Applicaiton Name: 앱 이름

 -Hompage URL : URL 개발이 마치고 배포를 하신 다음엔 배포가 된 URL로 수정 해줘야합니다. 개발 중이라면 http://localhost

 -Authorization callback URL : 위와 내용이 같습니다, URL 개발이 마치고 배포를 하신 다음엔 배포가 된 URL로 수정 해줘야합니다. 개발 중이라면 http://localhost

3. Register application 클릭

 

 

 

Client ID와 Generate a new client secret 클릭하여 Client secret Key도 제공 받습니다. (모자이크 된 부분 입니다!)

이제 제공받은 Client ID 와 Client Secret을 복사하여 , .env 파일에 기재 해줘야합니다.

 

.env

GITHUB_ID="1a2b3c4d5"
GITHUB_SECRET="1a2b3c4d5e6"

Github 로그인 세팅은 끝입니다. 이제 코드에서 signIn 함수만 next-auth에서 갖고와서 쓰기만 하면 됩니다..

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

<Button
  label="깃허브로 회원가입"
  onClick={() => signIn('github')}
/>

(참고: 로그아웃은 import { signOut } from "next-auth/react"; 에서 인자값없이 signOut()쓰면 됩니다.)

2. Google 로그인 세팅 및 구현

구글도 깃허브와 별반 다를거 없이 간단합니다.

1 ."google developer console"구글에서 검색을 해서 아래의 이미지 처럼 새 프로젝트 버튼을 클릭합니다.

2. 프로젝트 이름명을 정하고 생성하기 버튼을 누릅니다.

 

3. 검색창에 "enable" 을 검색하셔서 아래와 같이 Enabled APIs & services 를 클릭 합니다.

 

4.OAuth 동의화면을 눌러 외부를 클릭합니다. 아래와같이 앱을 프로덕션에 배포하게 되면 인증을 해야 될수도있다고 하는데 저는 따로 검증요청 할 필요없이 잘 작동이 되었습니다. (제가 구글에서 갖고온 정보는 이메일주소,아바타 이정도의 기본적인 정보입니다.)

만들기 클릭!

 

5.사용자 지원메일과 하단에 개발자 지원 이메일 정보를 입력 하고 두번 연속으로 '저장 후 계속' 버튼을 눌러줍니다.

 

6.왼쪽 네비게이션에서 '사용자 인증 정보'를 클릭하고 '+사용자인증 정보 만들기'에서 'OAuth 클라이언트 ID 만들기' 클릭해줍니다.

애플리케이션 유형과 이름 , 그리고 리디렉션 URI를 아래와 같이 기재해줍니다. Github와 같이 배포가되면 URI 변경을 해줘야합니다.

만들기 버튼 클릭!

 

7. 만들기버튼을 누르면 아래와 같은 화면이 나오는데 똑같이 ClientID와 Client secret 을 .env 파일에 입력해줍니다.

.env

GOOGLE_CLIENT_ID="1111test11111222test"
GOOGLE_CLIENT_SECRET="111test222test"

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

<Button
  label="구글로 회원가입"
  onClick={() => signIn('google')}
/>

 

 

3. Naver 로그인 세팅 및 구현

마지막으로 네이버 로그인 구현입니다.

네이버도 별반 다를건없지만 , production에 배포를 할때 auth 서비스를 이용하기 위에선 검수요청을 해야합니다.

https://developers.naver.com/apps/#/register?api=nvlogin 에서 필요한 정보를 입력하시고 , ClientID 와 ClientSecret을 발급받고 구글과 깃허브에서 했던거처럼 .env 파일에 똑같이 기재 해줍니다.

.env

NAVER_CLIENT_ID=naver123"
NAVER_CLIENT_SECRET="naver clinet secret"

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

<Button
  label="네이버로 회원가입"
  onClick={() => signIn('naver')}
/>

참고: 네이버 소셜 로그인을통해 가입 및 로그인을 했을때 DB에 session 정보가 저장이 되는데 , 여기서 네이버 이메일 정보가 다른 이메일 주소로 나옵니다.

예를들어 네이버 가입을 하는 계정은 kwangmin@naver.com이라고 했을때 , db에 저장 되는값은 kwangmin1010@gmail.com

으로 저장이 되어있었습니다.
네이버 로그인에서는 네이버 이메일자체를 제공하는것이 아니라 사용자가 네이버 프로필에 등록한 이메일 주소가 제공이 됩니다.

 

네이버 검수요청

네이버 검수 가이드 참고

네이버 로그인 사전 검수 가이드 - LOGIN

 

네이버는 Production에 배포하고 sns로그인 서비스를 이용하려면 검수 요청을 해야합니다.

아래의 네이버 로그인 검수요청 버튼을 누르고 네이버 로그인을 적용하려는 서비스의 각각 항목이 보여지는 화면을 캡쳐해서

업로드를 해야합니다.

 

저같은 경우는 회원가입 , 로그인 페이지를 묶어서 업로드하고, 로그인이 성공을 했을때 게시글을 작성을 하면 게시글을 작성한 ID와 naver의 아바타 이미지를 갖고오기 떄문에 이렇게 두가지만 묶어서 검수요청을 했더니 하루만에 승인이 났습니다.

승인 여부는 네이버 이메일로 수신이 됩니다.

네이버서비스를 이용해서 보여지는 모든 화면을 캡쳐해서 업로드 하면 될것같습니다.

 

 

 

 

Reference:

https://next-auth.js.org/

NextAuth.js

https://www.youtube.com/watch?v=w2h54xz6Ndw&t=245s