Next-Auth 소셜 로그인 [구글]

NextJS 에서 next-auth를 이용하면 google , facebook , naver 같은 소셜 로그인 기능을 쉽게 만들 수 있습니다.

next 13버전, next-auth 4버전을 사용했습니다.

next-auth 사용시 pages/api/auth 폴더안에 [...nextauth].js 파일을 만들어야 합니다.

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

const nextAuthOptions = (req, res) => {
  return {
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      }),
    ],
  };
};

const authHandler = (req, res) => {
  return NextAuth(req, res, nextAuthOptions(req, res));
};

export default authHandler;

.env 파일을 이용해서 google 클라이언트 키와 시크릿키를 저장합니다.

구글 클라우드 플랫폼 이용하기
https://console.cloud.google.com/getting-started?hl=ko

google API키와 시크릿키 얻는 방법은 생략하겠습니다.

로그인 화면에서 next-auth signIn 함수를 이용합니다

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

const Login = () => {
  
  ... 생략
  
	return (
		<Button onClick={() => signIn('google')}>
      		구글 로그인
        </Button>
	);
}

로그인 버튼을 누르면 ?