[React] firebase이용하여 google 소셜 로그인 구현하기

기업협업에서 그니그니님과 새롭게 프로젝트를 시작하게 되었다(!)
react, getstream API, firebase를 활용한 채팅 웹을 만드는 프로젝트이다.

백엔드 개발자가 따로 없기에 firebase를 활용하여 인증인가 통신을 진행하고, firebase 내에 있는 database를 이용하기로 했다.

✔️ 파이어베이스 공식 홈페이지 : https://firebase.google.com/?hl=ko

참고로 firebase는 앱의 개발 기간을 단축시키고 ,앱 개발 난이도를 낮춰주는 도구이다.
앱에서 많이 사용하는 기능 (인증, 클라우드 파이어스토어, 저장소, 호스팅 ,클라우드 메시징, 원격구성) 등을 API형태로 제공한다.

앱 뿐만아니라 웹도 가능함(!)

아무튼 이번주 sprint 내 목표가 firebase를 이용해서 google, kakao, naver 소셜 로그인 성공하기인데, 구글은 firebase내에서 제공하고 있어서 금방 할 수 있었다.

공식문서 한국말로도 잘 나와있어서 잘 따라하면 된다-!

👉 firebase - google 소셜 로그인 순서

1. firebase 설치

npm install firebase

2. firebase 공식 홈페이지 내에서 프로젝트 생성, firebase 초기화 해주기

프로젝트 생성 후 마지막으로 가면 아래와 같은 firebase를 초기화해주는 코드가 나온다.

아래의 코드를 복사해서 작업하고 있던 파일 내에 붙혀넣어주면 된다.

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

나는 따로 파이어베이스 관련 코드들을 한번에 정리하고자 firebase.js 파일을 만들었다.

firebase.js

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
initializeApp(firebaseConfig);

참고로 apiKey와 같은 정보들은 노출이 되어서는 안되기 때문에 따로 env 파일을 생성하여 관리해주었다.
👉 .env 포스팅

initializeApp(firebaseConfig)를 통해 firebase 초기화해준다.

3. 구글 소셜 로그인 연동

firebase공식 홈페이지 -> 콘솔로 이동 -> Authentication -> 로그인 제공업체 구글로 설정해주기

4. firebase/auth 내에 있는 signInWithPopup 메소드 활용하여 로그인 구현하기

signInWithPopup method는 로그인 방법별 Provider(Google, Facebook등)을 파라미터로 받고 promise 객체를 리턴한다. 사용자는 팝업을 통해 로그인을 수행하며 사용자가 로그인이 완료가 되면 promise에 결과를 받을 수 있다! (token, user 정보 등을 받을 수 있음)


firebase.js

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';


export const signInWithGoogle = () => {
  const googleProvider = new GoogleAuthProvider();

  return signInWithPopup(auth, googleProvider);
};

login.js 관련없는 코드 생략

  const handleLogin = e => {
    e.preventDefault();
    signInWithGoogle()
      .then(res => {
        const credential = GoogleAuthProvider.credentialFromResult(res);
        const token = credential.accessToken;
        const userName = res.user.displayName;

   // local storage에 token, username 저장해주기 
        setToken(token);
        setUserName(userName);

      })
      .catch(error => {
        console.error(error);
      });
  };


return 
 <button className="login-form__btn google" onClick={handleLogin}>
 </button>

🍯 마무리

처음에 공식문서를 보고 따라 할 때 이해가 안가서 여러 블로그도 찾아보고 읽었던 거 다시 계속 읽어보고 천천히 하다보니 해결할 수 있었다..! 파이어베이스 신기한 녀석,, 세상엔 참 편리한 것들이 많다. 이제 문제는 custom token 발급해보는 건데 (카카오, 네이버 이용해서) 아직 firebase와 어떻게 연동해야할지 잘 모르겠다😢 어려워 그치만 난 해결할 수 있다!!! 다시 차근차근 공식문서 읽어보고 이것저것 찾아보고 시도해봐야겠다. 화이또 👊🏻👊👊👊