리액트 / 파이어베이스 로그인

백엔드없이 간단하게 소셜로그인 기능을 붙이기 위해 파이어베이스를 사용해봤다. 파이어베이스 버전이 지속적으로 올라가고 있기때문에 블로그나 책에 있는 예제코드만으로는 구현할 수 없었다.

회원가입 코드는 아래와 같다

// firebaseConfig.js

import firebase from "firebase/compat/app";
import 'firebase/auth';
import {  getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "api key -------",
  authDomain: "project.firebaseapp.com",
  projectId: "project",
  storageBucket: "project.appspot.com",
  messagingSenderId: "projectdfasdfasdf",
  appId: "project:wfa:project:asdfasf"
};

export const provider = new GoogleAuthProvider();
firebase.initializeApp(firebaseConfig);

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

// LoginForm.jsx

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

/**
const signIn = () => signInWithPopup(auth, provider)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const user = result.user;
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    const credential = GoogleAuthProvider.credentialFromError(error);
  });
*/

const signIn = async (e) => auth.currentUser === null && signIn();

signWithPopup에 매개변수로 auth(유저 인증 정보), provider(구글인증 프로바이더)를 넣고 실행하면 팝업창이 열리면서 구글 회원가입을 하게된다. 결과적으론 성공했지만, signIn을 firebaseConfig.js에서 구현하고 불러오는 과정에서 고생을 좀 했었다. signIn에 signInWithPopup을 할당하는 과정에서 즉시 실행이 되기에 웹페이지가 열릴때 firebaseConfig.js 파일에서 실행되고, 실행 결과만 promise로 signIn에 할당되었다. 그래서 나중에 signIn 함수를 실행해도 가입이 되지 않았던 것이다.
지금 signIn() 함수도 적당히 래핑을 하면 깔끔하게 정리 할 수 있을것 같긴 하다.