React에서 Firebase을 통해 Google oauth구현하기

OAuth란 서비스에 로그인 할 때 다른 서비스의 로그인을 이용해 본 서비스에 로그인 하는 방식이다. 예를 들어, 사용자가 본 프로젝트에 로그인 하기 위해서는 Google login 버튼을 클릭해 구글계정으로 로그인 하지만 본 프로젝트에도 로그인 되는 기능이다. (소셜 로그인)
이번 프로젝트에서는 Google OAuth을 통해 로그인 및 회원가입 기능을 구현한다.

OAuth에서는 Authorization 서버와 Resource서버가 나눠져 있다. Authorization 서버는 실제 구글 계정인지 확인하여 JWT 토큰을 반환하는 역할을 하며 Resource 서버는 실제 백엔드에서 개발하는 서버이며 DB에서 이미 등록된 사용자 인지 구별하여 Clinet측에 알려주는 로직을 통해 로그인/회원가입 기능을 구현할 예정이다.

Clinet 측에서는 Authorization 서버는 따로 구현하지 않고 firebase을 이용해 구글 로그인 창을 띄워 로그인 후 JWT 토큰을 백엔드 서버에 보내는 기능을 구현하였다.

firebase App을 생성하는 과정과 소셜 로그인을 이용하기 위한 등록 방법은 생략한다.

firebase App 객체 생성

firebase에서 App을 생성하면 Webapp 프로젝트로 설정하면 SDK을 사용해 firebase를 초기화 하여 webapp에서 사용할 수 있다. 따라서, firebase 패키지를 설치하고 프로젝트에서 configuration 값을 받아온다.

yarn add firebase

import firebase from 'firebase/app';
import 'firebase/auth';

// firebase 프로젝트에서 받아올 수 있다.
const firebaseConfig = {
	"apiKey": "...",
    "authDomain": "..."
    ...
}

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

Google OAuth Login/Logout

생성한 auth을 통해 구글 로그인/로그아웃 등의 기능을 지원한다.

const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)

을 통해 구글 로그인 폼을 띄울 수 있다. provider값에 따라 어떤 서비스의 로그인을 띄울 것인지 결정할 수 있다.

// 로그아웃
auth.signOut()

Authorization 서버에서 JWT 토큰 받기

사용자는 구글 로그인 성공 시 토큰 값을 백엔드 서버에 보내야 한다. 이때 firebase에서 제공하는 onAuthStateChanged 메서드를 이용해 auth값이 변경되었을 경우 실행하는 함수를 작성하면 된다.

    if (auth != null) {
      auth.onAuthStateChanged(async (firebaseUser) => {
        if (firebaseUser) {
          const token = await firebaseUser.getIdToken();
          // token을 Backend Server로 보내기
        }
      });
    }

JWT 토큰 값을 받아오는 기능 까지 구현이 되었다. 이제 토큰 값을 backend서버에 보내 등록된 사용자의 경우/새로운 사용자의 경우 어떤 응답을 받고 어떻게 처리 할지 고민하여 개발해 나가면 될 것 같다.