구글 로그인 기능 with Firebase

🎉 firebase 프로젝트 생성

1. Firebase 에 접속하여 새로운 프로젝트를 생성합니다. 👉 Firebase 바로가기

2. 프로젝트 이름을 입력합니다.

3. Analytics가 필요하지 않으면 OFF

4. 프로젝트에 해당하는 앱을 추가합니다. (ios / android / web)

5. 먼저 1)앱 이름을 정하고 2)생성되는 config 코드를 복사합니다.
   (프로젝트 배포도 함께 원하는 경우 옵션 체크)

🙍 Authentication 설정

1. Authentication 섹션에 접속하여 로그인 방법(sign-in method)을 선택합니다.

2. 로그인 방법으로 Google을 선택한 후 이메일을 추가합니다.

🔀 firebase 프로젝트 연동

1. firebase 설치합니다

npm install firebase

2. firebase.js 파일을 생성한 후 복사한 config 코드를 붙여넣기 합니다.

import firebase from "firebase/app"
import "firebase/auth"

const firebaseConfig = {
  // copy and paste
}

const app = firebase.initializeApp(firebaseConfig)

export default app.auth()

3. login 컴포넌트에 provider를 추가합니다.

// LoginPage.js
import firebase from "firebase/app"
import auth from "../../firebase"

const provider = new GoogleAuthProvider()
export const LoginButton = () => {
  return <button onClick={signInWithPopup(auth, provider)}>로그인</button>
}

4. 로그인 실행 시 아래와 같은 로그인 popup창이 생깁니다.

5. 로그인에 성공하면 firebase > Authentication > Users에 이메일이 추가됩니다.

REFERENCE
React에서 Firebase Auth를 사용한 로그인 구글 로그인 구현 https://koras02.tistory.com/58