Firebase Authentication (with Google)

Firebase는 원래 데이터 베이스였다.

하지만 구글이 인수를 한 뒤에 데이터 베이스뿐만 아니라 다양한 백엔드 기능을 제공해주는 플랫폼으로 바뀌었다.

Firebase를 이용하면 사용자 인증, 데이터 베이스, 스토리지 등과 같은 백엔드 단에서 필요한 기능을 구축하는 데에 쓰이는 시간을 아낄 수 있고, 오직 프런트엔드에서의 비즈니스 로직만을 구현하는 데에 집중할 수 있다.

 

이러한 특징으로 Firebase는 Serverless BaaS(Backend as a Service)의 한 예이기도 하다.

Serverless BaaS에서는 Firebase가 가장 대중적이고 커뮤니티 또한 많이 활성화 되어 있다고 한다.

 

나는 팀 프로젝트에서 로그인 인증 방식을 Firebase를 활용하여 구글 로그인을 구현하였다.

많은 사람들이 사용하다보니 수많은 오류들에 직면했을 때 스택 오버 플로우에 선배님(?)들이 많이 계셔서 도움을 많이 받았다..

 

아무튼 Firebase Authentication에 대해서 알아보도록 하겠다.

 

Authentication

말 그대로 인증 서비스이다. Firebase에서 제공하는 SDK를 이용하여 쉽게 구성 할 수 있고 비밀번호, 전화번호, 다양한 소셜 로그인(Google, Facebook, Twitter, Github)을 통한 인증이 지원된다.

 

인증을 위해서 웹 앱 또는 클라이언트에서 Firebase 자바스크립트 SDK를 사용한다.

 

1단계: Firebase 프로젝트 만들기 및 앱 등록

Firebase Console에서 프로젝트를 추가한다.

 

이후에 안내에 따라 앱을 등록하고, Firebase SDK를 추가하고 초기화한다.

 

2단계: SDK 설치 및 Firebase 초기화

먼저 npm을 사용하여 Firebase를 설치한다.

npm install firebase

 

프로젝트의 상단에 [ </>프로젝트 이름 ] 아이콘을 클릭하여 설정으로 들어가면,

맨 아래에 SDK 설정 및 구성을 할 수 있는 코드를 제공한다.

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

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

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

 

위의 설정을 가지고 프로젝트에 필요한 서비스들을 export 하는 코드를 추가 작성하여 사용하면 된다. (Web SDK API 참조)

 

본인의 팀 프로젝트에서는 다음과 같이 작성하였다.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

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,
};

firebase.initializeApp(firebaseConfig); //firebase의 기능을 사용할 수 있게 한다.

//firebase의 인증 기능을 위한 객체
export const authService = firebase.auth();

//Google에서 제공하는 firebase 인증을 위한 객체
export const googleProvider = new firebase.auth.GoogleAuthProvider();

 

여기서는 Google auth 객체를 사용해 firebase에 인증한다.

팝업을 띄우거나 로그인 페이지로 리디렉션하여 사용자가 Google 계정에 로그인하도록 유도할 수 있다.

(휴대기기의 경우 팝업보단 리디렉션을 권장)

 

위의 코드로 보면 다음과 같이 로그인, 로그아웃을 구현해 볼 수 있다.(provider 제공까지!)

import Cookies from "js-cookie";
import { authService, googleProvider } from "./firebase";

import req from "../utils/api";

class Authenticate {
  async login(name) {
    const provider = this.getProvider(name);
    const data = await authService.signInWithPopup(provider);
    const IdToken = await authService.currentUser.getIdToken().then((data) => data);

    Cookies.set("accessToken", IdToken);

    await req("post", "/user/new", {}, (result) => result.data);
  }

  async logout() {
    await authService.signOut();

    Cookies.remove("accessToken");
  }

  getProvider(name) {
    switch (name) {
      case "google":
        return googleProvider;
      default:
        throw new Error("Unknown provider");
    }
  }
}

export default Authenticate;

 

login 메서드에서 firebase auth 서비스에 의에 얻어진 id 토큰을 쿠키에 저장한다.

이후 req 유틸을 사용하여 헤더에 id 토큰을 넣어 사용자 등록 요청을 보내면,

백엔드에서 토큰을 해석하여(미들웨어 생성 후 로직 작성) 사용자 정보를 얻는다. (ex. req.currentUser = decodedToken)

 

예시에서 얻은 req.currentUser를 토대로 데이터베이스를 조회하여 사용자가 이미 등록이 되었는지, 아닌지를 확인하면서 나머지 로직을 수행한다.