Next.js에서 Firebase 파이어베이스로 구글 로그인 기능 구현

2023.10.14 - [🌳Frontend/react] - Next.js 와 파이어베이스(Firebase) 연동하기

Next.js 와 파이어베이스(Firebase) 연동하기

 

Next.js app과 파이어베이스 연동은 이전글을 참고해주세요.

---

🔥 파이어베이스 콘솔에서 Authentication 셋팅

추가 제공업체에 Goggle 을 클릭해주자.

 

프로젝트 지원 이메일은 본인 이메일로 셋팅하면 됩니다.

---

😎 소스코드

firestore은 이전글에서 셋팅한 firestore 설정파일 입니다.

 

firebasedb.ts

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
}

// Initialize Firebase
const firebasedb = initializeApp(firebaseConfig)
export default firebasedb

 

fireAuth.ts

import { getAuth } from '@firebase/auth'
import firebasedb from '@/firebase/firebasedb'

const fireAuth = getAuth(firebasedb)

export default fireAuth

 

page.tsx

import { GoogleAuthProvider, signInWithPopup } from '@firebase/auth'
import fireAuth from '@/firebase/fireAuth'
...

const handleLogin = async () => {
    const provider = new GoogleAuthProvider() // provider 구글 설정
    const data = await signInWithPopup(fireAuth, provider) // 팝업창 띄워서 로그인

    console.log(data.user)
  }
  
  
return (
<button onClick={handleLogin}>로그인</button>)	
)

 

로그인을 하면 아래처럼 로그인한 유저의 정보를 알 수 있습니다.