[React] firebase를 사용하여 구글로그인 구현하기.

목표

구글 로그인 구현하기.

엄청난 오류 발생으로 머리가 아팠지만.. 엄청난 구글링으로 해결했습니다..

주요 키워드 : signInWithGoogle, GoogleAuthProvider

---

Firebase 가입 및 로그인

https://firebase.google.com/?hl=ko 

Firebase

---

내 SDK 설정 및 구성 확인하기.

사진에 체크된대로 누르고 아래로 스크롤을 내리면 나의 SDK 키를 확인할 수 있습니다.

---

추가 생성 파일 목록

• jsconfig.json(선택사항)
• fbase.js

 

   1) jsconfig.json (선택사항 : import 시 파일 경로 간단하게 해줌.)

    경로 : /jsconfig.json - src 폴더 외부. package.json 파일이 있는 경로에 작성하면 끝입니다.

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

   2) fbase.js

    경로 : src/fbase.js

    [3번 과정 - 내 SDK 설정 및 구성 확인하기] 에서 얻은 SDK를 그대로 복사 붙여넣기 합니다.

    ※ 해당 코드는 1) jsconfig.json 파일을 적용시킨것으로, 적용하지 않으신 분은 코드 작성 시 경로를 꼭 확인해주세요.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// 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: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

    3) app.js

    기존 구성 삭제 후 아래와 같이 작성합니다.

import React from 'react';

const App = () => {

  return (
    <>
      <h2>login</h2>
      <button>로그인</button>
    </>
  );
};

export default App;

---

로그인 구현하기.

위 4번에 있는 방법대로 작성하고 나면 이제 연결하는일만 남았습니다.

하지만 SDK에서 그대로 복사해오면 구글로그인 또는 깃허브 로그인을 할 때 오류가 발생하는데

다른 분들이 올려주신 예제를 찾아보면 모두 getAuth() 라는 함수를 사용하여 해결하더군요.

 

하지만 제가 Firebase 공식 사이트에서 복붙해 온 코드에는 getAuth() 라는것이 없어 뭐가 뭔지 몰라 해결하지 못했었는데

https://firebase.google.com/docs/web/setup?hl=ko&authuser=0 라는 사이트를 발견했습니다.

 

구글은 친절하게도 모든..명령어를 다 써놓았던 것입니다 ㅠㅠㅠ 감사합니다.

이제 이 과정에 맞춰서 코드를 바꾸어 보겠습니다.

 

   1) jsconfig.json은 바꿀필요 없습니다.

 

 

   2) fbase.js

위에서 작성한 기존 코딩에서 변경된 점들을 주석으로 표시해 놓았습니다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics"; //사용안함
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth"; //추가
// 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: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app); //변경

//추가
export const signInWithGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider)
}

   3) app.js

import { signInWithGoogle } from 'fbase'; //추가
import React from 'react';

const App = () => {

  return (
    <>
      <h2>login</h2>
      <button onClick={signInWithGoogle} //추가 >로그인</button>
    </>
  );
};

export default App;

이렇게 파일을 바꾸고 로그인 버튼을 누르면 구글로그인 팝업이 정상즉으로 뜨는 모습을 확인 할 수 있습니다!

 

firebase에서도 확인가능!

---

오류 해결

내 검색어 : firebase Cannot read properties of undefined (reading 'constructor')

처음 구글로그인에 대한 글들을 참조할때 아래의 코드를 사용중이셨고, 보니 2021년도 글이라 방식이 좀 바뀐것같았습니다.

//fbase.js

export const signInWithGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(provider)
}

• https://stackoverflow.com/questions/73251245/firebase-google-authentication-constructor-undefined-error

Firebase Google Authentication Constructor undefined Error

 

답변에 이렇게 달려있어서, 바로 해결 완!