[React] 최신 Firebase에서 로그인 구현하기

React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다.

거의 필수적으로 사용하는 Auth, Firestore, RealTimeDatabase의 최신 구문을 알아보자.

 

간단히 바뀐점에 대해 설명하자면 Class내에 선언되어있던 함수들을 모두 전역으로 전언해서 사용할 수 있게 바뀌었다.

예를들어 Email login 함수가 FirebaseAuth 내부에 선언되어 있어 이를 FirebaseAuth.emailLogin()과 같은 형태로 사용했어야 했다면,

최신 버전에서는 emailLogin(FirebaseAuth, email, password)의 형태로 사용하게끔 변경되었다.

 

 

설치

yarn add firebase

 

 

Firebase_config.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
};

const app = initializeApp(firebaseConfig);

export const authService = getAuth(app);
export const dbService = getFirestore();
export const realtimeDbService = getDatabase();

firebase_config.js 파일을 생성하고 위의 코드를 입력한다.

 

.env

  REACT_APP_API_KEY= ..
  REACT_APP_AUTH_DOMAIN= ..
  REACT_APP_PROJECT_ID= ..
  REACT_APP_STORAGE_BUCKET=..
  REACT_APP_MESSAGING_SENDER_ID =..
  REACT_APP_APP_ID = ..
  REACT_APP_MEASUREMENT_ID = ..
  REACT_APP_DATABASE_URL = ..

Firebase 콘솔을 참고해 값들을 입력하고 프로젝트 최상단에 .env 파일을 생성하고 삽입한다.

Firebase에 관련된 Secret key들을 관리하기 위해 별도로 환경변수 파일을 생성하자.

 

 

Auth 관련

Firebase 라이브러리는 로그인시 로그인 정보들을 자동으로 저장해주고, 실행 시 자동으로 로그인 정보를 읽어온다.

추가로 로그인 상태 변경시 체크하는 Observe가 있어 로그인 관련 함수의 코드를 간략하게 할 수 있다.

//로그인 상태 변경을 감지하는 함수
//웹 실행 시 최초 1회 해당 함수를 실행시켜 이전 로그인 기록이 있다면 불러옴.
//user와 관련된 provider나 main에서 선언후 setState하는 방식이 일반적

useEffect(() => {
    authService.onAuthStateChanged((user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        setLogout();
      }
    });
  }, []);

 

로그인 관련 함수

import {
  createUserWithEmailAndPassword,
  getRedirectResult,
  GithubAuthProvider,
  GoogleAuthProvider,
  signInWithEmailAndPassword,
  signInWithRedirect,
  signOut,
} from "firebase/auth";
import { authService } from "../firebase_config";

//앞서 생성한 config파일과 Firebase/auth로 부터 함수들을 import



//Email로 가입하는 함수
//동작이 이루어지면 앞서 작성한 로그인 상태 감지 함수로 인해 user정보가 변수에 저장되고 setState가 발생
export async function registerWithEamil(email, password) {
  try {
    await createUserWithEmailAndPassword(authService, email, password).then(
      (e) => {}
    );
  } catch (e) {
    return e.message.replace("Firebase: Error ", "");
  }
}


//Email로 로그인하는 함수
export async function loginWithEamil(email, password) {
  try {
    await signInWithEmailAndPassword(authService, email, password);
  } catch (e) {
    return e.message.replace("Firebase: Error ", "");
  }
}


//Google, Github로 로그인하는 함수
export async function loginWithSocial(provider) {
  if (provider === "google") {
    try {
      const provider = new GoogleAuthProvider();
      await new signInWithRedirect(authService, provider);
      const result = await getRedirectResult(authService);
      if (result) {
        // const user = result.user;
      }
      return;
    } catch (error) {
      return error;
    }
  } else if (provider === "github") {
    try {
      const provider = new GithubAuthProvider();

      await new signInWithRedirect(authService, provider);
      const result = await getRedirectResult(authService);
      if (result) {
        // const user = result.user;
      }
      return;
    } catch (error) {
      return error;
    }
  }
}



//Logout 하는 함수
export async function logout() {
  await signOut(authService);
  return;
}

원하는 에러 처리가 있다면 에러 부분 정도만 수정 후 그대로 가져다 써도 무방하다.

Google, Github과 같은 소셜로그인은 Firebase 콘솔에서 몇 가지 설정이 필요하지만, 본 글에서는 생략하겠다.