Firebase 구글로그인

React와 Typescript 가 설치되어있는 환경에서의 구글로그인 구현이다.

Firebase 서비스

1. 파이어베이스 홈페이지에서 구글 아이디로 로그인 한 다음 오른쪽 상단에 콘솔로이동을 클릭해준다.
2. 프로젝트 추가를 진행해준다. (프로젝트 이름 입력 -> 체크 박스 해제 -> 생성완료)
   
3. 생성이 완료되면 해당 이미지의 화면이 보인다. </> 아이콘을 클릭해서 웹 등록을 해준다.
   
4. 이름을 입력해주면 아래 이미지처럼 sdk가 발급된다. 복사해놓자
   
5. 구글로그인을 이용하기위해 Authentication 설정에서 파란색 부분의 구글을 추가해준다.
   

구글로그인 진행과정

1. firebase를 설치해준다. firebase는 최신버전 V9를 사용하며 모듈은 import를 사용한다.

yarn add firebase OR npm install firebase

2. React 환경이기 때문에 src 폴더에 pbase.tsx(파일명은 상관없다.) 파일을 만들어준다. 아까 복사해놓은 sdk 내용을 .env 환경변수 파일에 담아준뒤 적용해준다. (feat. 나는 apiKey와 Domain은 환경변수 적용이 잘 안돼서 직접 적어주었다.)

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
    appId: process.env.REACT_APP_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
auth.languageCode = 'ko';

3. 각자의 Login을 담당하는 파일에서 모듈을 불러와주자.

import { auth } from 'pbase'; // pbase.tsx 에서 export한 auth 정보이다.
import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
// 요 두가지 모듈로 구글로그인을 구현한다.

const provider = new GoogleAuthProvider(); // provider 선언해준다.
  
const signInGoole = async () => {
        const { user } = await signInWithPopup(auth, provider);
}; // 요 함수를 구글로그인 버튼에 이벤트핸들러 등록하면 끝!!

4. 구글로그인이 성공하면 firebase 프로젝트 Authentication에 계정이 추가된다.
   

마치며.

• 아주 기본적인 로그인만 구현해놓았기 때문에 다음엔 redirect, callback등 부가기능도 구현할 생각이다.
• V9와 V8이 사용방법에 있어 차이가 많아서 사용할 버전을 확실히 정하는게 좋아보인다.