NextAuth와 파이어베이스로 로그인 구현하기

next-auth 라이브러리를 이용해 간단한 로그인을 구현했다.
라이브러리 docs를 살펴보니 google, github, kakao, naver, linkedIn 등의 다양한 OAuth provider를 확인할 수 있었다.
우선 로그인은 google provider만 사용해서 구현했다.
(🤙🏻 다른 provider도 추후에 꼭 적용해보자)

라이브러리 설치

npm i next-auth firebase

📁 [...nextauth].ts

'/pages/api/auth/[...nextauth].ts' 경로로 파일을 생성했다.
GOOGLE_CLIENT_ID와 GOOGLE_CLIENT_SECRET 값은 환경변수로 관리했다.
이 두 값은 파이어베이스 콘솔에서 불러올 수 있다.

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

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

export default NextAuth(authOptions);

⚙️ 파이어베이스 설정

GOOGLE_CLIENT_ID와 GOOGLE_CLIENT_SECRET 값을 얻기 위해서는 파이어베이스 관련 설정을 해야 한다.
(파이어베이스 설정을 위한 firebase.ts 파일도 생성해야 한다)

프로젝트 생성 및 세팅

웹앱 버튼 클릭

firebase.ts 파일 설정

이때 설정값들을 firebase.ts 파일로 복붙해야 한다.

// 💻 firebase.ts

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "~~~",
  authDomain: "~~~",
  projectId: "~~~",
  storageBucket: "~~~",
  messagingSenderId: "~~~",
  appId: "~~~",
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore();
const storage = getStorage();

export { app, db, storage };

authentication 설정

authentication 메뉴에서 google provider 버튼을 클릭한다.

페이지 이동 후 토글을 enable 해야 한다.
이렇게 설정을 완료하면 Web SDK Configuration 메뉴에서 Web client ID와 Web client secret 값을 확인할 수 있다.

커스텀 로그인 페이지

이제 모든 준비가 완료됐으니 커스텀 로그인 페이지를 구성할 수 있다.

[...nextauth].ts

[...nextauth].ts 파일에 pages 관련 추가 설정을 해야 한다.

pages/auth/signin.tsx

해당 url로 이동하면 커스텀 로그인 페이지가 생성된 것을 확인할 수 있다.

signInPage 컴포넌트 제작

docs를 참고해 signInPage 컴포넌트를 만들었다.

redirect_uri mismatch 에러

redirect_uri mismatch 에러는 구글 클라우드 콘솔에서 해결할 수 있다.
프로젝트명 선택 > Credentials > OAuth 2.0 Client IDs > Web client 순으로 클릭한다.

Authorized JavaScript origins 섹션에 로컬호스트 주소를 추가했다.
Authorized redirect URIs 섹션에서는 에러 메시지에 명시된 redirect_uri 값을 추가했다.

💁🏻 결과

로그인이 성공적으로 이루어졌고 세션값도 정상적으로 불러와진 것을 확인할 수 있다.
(참고로 세션은 각 페이지에서 useSession() 훅을 이용해 불러올 수 있다.)