next-auth를 이용해 Google 로그인 구현하기(기초)

😙Next.js에서 소셜로그인 구현하기

 

next-auth는 OAuth로그인을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

next-auth를 이용하면 Oauth를 간편하게 구현할 수 있습니다.

 

근데 처음하는 입장에서 Oauth 자체가 간편하지 않습니다.

그러한 모순을 견뎌내는 것이 Oauth의 길이니까..

---

😚설치 방법

npm i next-auth

---

😐Google Oauth 설정하기

https://cloud.google.com/solutions/apis-and-applications?hl=ko 

 

우선 구글 oauth 로그인을 위해서는 클라이언트 아이디가 필요합니다.

관련 설정 방법은 잘 포스팅 된 글들이 많이 존재합니다.

http://blog.teamelysium.kr/nextjs-auth

NextAuth.js로 간편 로그인 기능 구현하기

대충 감으로 하셔도 웬만하면 괜찮겠습니다만

알아두어야하는 부분들이 있기 때문에 관련하여 참고하기 좋은 레퍼런스 링크를 첨부합니다.

요래저래 검색해보시면서 하면 금방 설정하실 수 있을 것입니다.

 

승인된 리디렉션 부분에

  http://localhost:3000/api/auth/callback/google

이 경로를 넣어주는 것은 약속된 것이니 이 부분은 유의해주시면 좋을 것 같습니다.

개발 환경에서는 다음과 같이 사용해줍니다.

포트번호는 일반적으로 3000번을 사용하게되기에

그리고 저도 3000번을 사용하고 있기에.. 3000으로 했습니다만

당연하게도 자신이 사용하는 포트번호로 설정해주면 되겠습니다.

 

실제 배포환경에서는 localhost 뿐만 아니라 배포url도 허가해두어야할것 같네요

---

🤐Additional information

에서 Client ID와 비밀번호를 복사해올 수 있습니다.

민감한 정보이니 환경변수로 지정하고 노출되지 않게 사용해주겠습니다.

---

😝환경변수를 통해 안전하게 관리하기

.env

프로젝트의 루트폴더에 .env파일을 생성해주고 환경변수로 관리해주겠습니다.

GOOGLE_CLIENT_ID =복사해온클라이언트아이디
GOOGLE_CLIENT_SECRET =복사해온클라이언트비밀번호

와 같은 형태로 작성해주면 환경변수 작성은 끝입니다.

이렇게 작성한 환경변수는 이렇게 접근하여 사용할 수 있습니다.

process.env.GOOGLE_CLIENT_ID
process.env.GOOGLE_CLIENT_SECRET

process.env.설정해준 키값의 형태로 사용하면 밸류값이 반환되는 형태입니다.

process는 node.js가 제공해주는 기능의 한 형태라고 볼 수도 있는데

Node.js에서 기본적으로 내장된 전역 객체와 같이 사용되어

import 구문 없이도 프로그램의 어느 위치에서나 사용할 수 있는 객체라고 생각할 수 있습니다.

터미널에서 위와 같이

node

명령어를 통해 node.js에 진입한 뒤 process를 출력해보면

엄청나게 긴 process 객체가 출력됩니다.

이 중 잘 찾아보면 키값이 env인 프로퍼티도 찾아볼 수 있어요!

---

😏src/pages/api/auth/[...nextauth].ts

 

위 경로에 [...nextauth]라는 이름으로 파일을 생성해주어야합니다.

만약 타입스크립트를 사용하지 않는 분이라면 .ts 대신 .js로 생성해주시면 되겠습니다.

 

Warning

app라우터를 사용하고 계신 경우에도

src/app/pages/api/auth/[...nextauth].ts

이런식으로 경로를 잡으시면 안됩니다.

src/pages의 형태로 잡아야합니다.

import NextAuth from 'next-auth';
import { authOptions } from '@/lib/auth';

export default NextAuth(authOptions);

이 안에서는 NextAuth를 호출한 값을 export해줍니다.

---

😙NextAuth 함수의 인자에 넣을 값을 만들자.

이부분은 따로 만들어주어도 좋고 아니어도 좋습니다.

다만 저는 따로 만들어 주도록 하겠습니다.

import { NextAuthOptions } from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

const getGoogleCredentials = () => {
  const clientId = process.env.GOOGLE_CLIENT_ID;
  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
  if (!clientId || clientId.length === 0) {
    throw new Error('Missing GOOGLE_CLIENT_ID');
  }

  if (!clientSecret || clientSecret.length === 0) {
    throw new Error('Missing GOOGLE_CLIENT_SECRET');
  }

  return { clientId, clientSecret };
};

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: getGoogleCredentials().clientId,
      clientSecret: getGoogleCredentials().clientSecret,
    }),
  ],
};

next-auth가 제공해주는 NextAuthoptions 타입이 존재합니다.

이를 활용해주면 자동완성이 잘되기때문에 기분이 좋으니 사용해주도록 합니다.

 

또한 next-auth/providers 경로에는 소셜로그인을 위한 다양한 provider함수가 존재합니다.

이 중 사용할 provider들을 배열 안의 요소 형태로 넘겨주면 사용할 수 있는것입니다.

 

getGoogleCredentials는 만약 환경변수에서 클라이언트아이디와 비밀번호를 찾지못했을때

에러를 던지는 역할을 하는 유틸함수입니다. 꼭 필요하지는 않으니 귀찮다면

그냥 환경변수를 넣어주어도 좋습니다. 그런 경우에는

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
  ],
};

같은 형태가 되겠네요!

이외에도 authOptions으로 다양한 값을 줄 수 있습니다.

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

Options | NextAuth.js

더욱 다양한 값은 위 링크에서 자세하게 살펴볼 수 있습니다.

우선은 providers 부터 필수 요구되는 인자들만 확인해보겠습니다.

 

Providers

default value는 [] 배열이고 항상 요구되는 인자입니다.

로그인에 사용할 수 있는 Providers를 순서 무관하게 사용할 수 있어요

사용방법은 위에서 같이 살펴본 것 그대로입니다.

 

Secret

개발환경에선 require 되지 않지만 프로덕션에선 요구됩니다.

다만 만약에 환경변수로 NEXTAUTH_SECRET을 지정해준 경우에는

이 옵션을 정의하지 않아도 괜찮아요

보안과 관련된 옵션이니 배포까지 고려하고 있다면 잘 알아두어야 할 듯합니다.

---

🤩signIn 함수와 signOut 함수

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

next.js 환경에서 사용하는 경우 위와 같은 형태로 import할 수 있습니다.

signIn함수의 사용방법은 아주 간단합니다.

<Button onClick={() => signIn('google')} />

이렇게 signIn 함수의 인자에 문자열을 전달해주면 끝입니다.

signIn이라는 이름에서 유추할 수 있듯이 로그인을 도와주는 함수입니다.

signOut함수는 반대로 로그아웃을 도와주는 함수라고 생각할 수 있겠죠?

이제 page에서 onClick이벤트가 발생하면 signIn('google')을 트리거하는 버튼을 만들고

실행을 시켜보면 이렇게 최소한으로 동작하는 구글 소셜로그인을 구현해볼 수 있습니다.

 

기타 자세한 옵션에 대해서는 다음 포스트에서 다루도록 하겠습니다.

읽어주셔서 감사합니다.