next-auth로 간편하게 구글 로그인 구현하기
next-auth를 사용하면?
-
클라이언트와 서버 사이의 복잡한 인증 플로우를 간소화 시켜준다.
🌟 Google Cloud 설정
① 내 프로젝트 등록
내 프로젝트를 등록해준 후, API 및 서비스 - 사용자 인증 정보 페이지로 이동한다.
② 사용자 인증 정보 생성
사용자 인증 정보 만들기 - OAuth 2.0 클라이언트 ID를 만들어준다.
③ 클라이언트 ID, Secret
생성한 클라이언트 ID와 클라이언트 보안 비밀번호는 각각 환경 변수 파일에 GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET으로 저장해준다.
④ Redirect URI 등록
OAuth 클라이언트 ID 만들기에서 애플리케이션 유형을 선택해주고, 이름도 임의로 지정해준다. 승인된 자바스크립트 원본에는 http://localhost:3000을 적어주고, Redirect URI는 http://localhost:3000/api/auth/callback/google을 적어주고 생성해주면 된다.
⑤ OAuth 동의 화면
API 및 서비스 - OAuth 동의 화면에서 테스트 - 앱 게시 버튼을 눌러 프로덕션 상태로 바꾸어준다. 프로덕션 단계로 설정하면 Google 계정이 있는 모든 사용자가 앱을 사용할 수 있게 된다. 만약 이 설정을 해주지 않으면 다음과 같이 구글 로그인이 거부 당한다.
[오류] 구글 로그인 거부
next-auth 설치하기
① next-auth 설치 명령어
npm install next-auth② [...nextauth].js
pages/api/auth/[...nextauth].js
import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google"
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
callbacks: {
async session(session) {
return session;
},
},
secret : process.env.NEXTAUTH_SECRET,
}
export default NextAuth(authOptions)코드 작성하기
① 로그인 버튼
import { signIn } from "next-auth/react";
<button className="googleLogin" onClick={()=>{
signIn("google", {
redirect: true,
callbackUrl: '/',
})
}}/>구글 로그인 버튼을 눌렀을 때, 구글로 로그인되는 버튼 코드으로 로그인을 하고 나면 '/' 경로로 리다이렉트 된다.
② sessionProvider
sessionProvider로 감싸주는 이유
sessionProvider는 next-auth 라이브러리에서 제공하는 컴포넌트로, 앱의 모든 컴포넌트에서 세션 정보에 접근할 수 있게 해준다. 또한 직접 쿠키나 로컬 스토리지를 사용하여 세션 정보를 저장, 관리할 필요 없으며 보안적으로 안전하고 사용하기가 쉽다.
app/provider/sessionProvider.js
'use client'
import { SessionProvider } from "next-auth/react";
import React from "react";
export default function AuthSession(props) {
const { session, children } = props;
return <SessionProvider session={session}>{children}</SessionProvider>;
}
app/layout.js
import AuthSession from "./provider/sessionProvider";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<AuthSession>
{children}
</AuthSession>
</body>
</html>
);
}③ 로그아웃 버튼
import { signOut } from "next-auth/react";
<button className="googleLogout" onClick={()=>{
signOut({
redirect: true,
callbackUrl: '/',
})
}}/>👏 구글 로그인 구현 결과
