React 와 Firebase 인증서버 연동하기

웹을 제작하면서 가장 기본적으로 로그인 기능을 구현하기 위해서 사용하는 것은 구글에서 제공하는 firebase 입니다. 일정 사용량 까지 무료기도 하고 sdk도 여러가지 언어로 제공되고 있어서 쉽게 연동할 수 있는데요, 사이드프로젝트를 본격적으로 시작하기 전에 리서치 겸해서 Firebase을 연동하여 로그인하는 것을 리액트로 만들어 보도록 하겠습니다.

프로젝트 생성+firebase 프로젝트 연결

$ npm create-react-app newitter
$ cd <project name>

프로젝트 이름 생성시 느낌보면 아시겠지만 노마드 코드 무료강의를 참고하며 클론코딩을 진행하고 있습니다.

firebase 설치 후 프로젝트 정보 가져올 것

$ npm install --save firebase

firebase 프로젝트 정보는 .env 파일에 담아서 사용하는데 사용하는 이유는 .gitignore에 .env를 넣어서 관리대상에 포함하지 않기 위함입니다. 물론 그렇다고 완전하게 안전하지 않기에 별도로 보안은 조치하도록 하고. .env 파일은 react를 실행하하고 나서 동적으로 적용되는 것은 아니므로 혹시 바꿀일이 생기면 다시 런시켜야 합니다. 그리고 react-router-dom이 설치 안되어있다면 설치합니다.

$ npm install react-router-dom

react-router-dom 역시 버전 차이에 따라 사용방식이 달라진 것이 있어서 firebase 버전 v8, v9의 변경과 함께 애를 참 먹일 수 있는 것인데, 새로시작한다면 신규버전으로 하는 것을 추천합니다. 버전은 앞으로 계속 달라질 것이고 버전이 신규로 나왔다는 것은 그만큼 무엇가 더 좋아졌다는 것을 조금은 담보하고 있다고 생각됩니다.

인증기능 적용

firebase v9 기반으로 작성한 기본적인 이메일/패스워드 기반 신규 유저 생성 코드입니다.

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

아래 코드는 password로 로긴하는 코드입니다.

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

만약 위 코드를 이용해 유저를 생성하고 로긴을 한다음 UserCredential을 찍어보면 토큰 정보도 볼 수 있는데, 유효한 토큰 기본시가은 3600으로 찍히며 1시간으로 보입니다.

로그아웃 코드

import React from "react";
import { useNavigate } from "react-router-dom"
import { firebaseAuth, signOut } from "../fbase";

export default () => {
  const navigate = useNavigate();
  const onLogOutClick = () => {
    signOut(firebaseAuth);
    navigate("/");
  };
  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

패스워드 찾기 코드(이메일로 보내기)

import { getAuth, sendPasswordResetEmail } from "firebase/auth";

const auth = getAuth();
sendPasswordResetEmail(auth, email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

차후에, 로그인 후 받아오는 id token을 header 넣어 자체 구현하는 서버에 통신을 할때 validation 가능하도록 이용하고자 하며 이때 id token을 가져와서 넣어주도록 해야함으로 아래와 같이 id token을 가져오는것을 해볼 수 있습니다. (버튼을 눌러서 현재 로그인한 유저의 토큰을 가져와서 출력)

const Home = () => {
  const onGetIDTokenClick = () => {
    if (firebaseAuth.currentUser) {
      getIdToken(firebaseAuth.currentUser, true).then(function(idToken) {
        console.log(idToken);
      })
      .catch(function(err) {
        console.log(err);
      });
    }
  };
  return (
    <>
      <span>Home</span><br></br>
      <button onClick={onGetIDTokenClick}>GetIDToken</button>
    </>
  );
}

export default Home;

너무나 많은 분들이 쉽고 빠르게 사용하고 있기 때문에 자세한 설명보다는 코드 위주로 보여드렸으며, 상세하게 구현할 프로젝트에 적용할 때는 어떻게 넣을지도 고민한 내용들 이야기로 풀어가도록 하겠습니다. firebase 기본 authentication 관련 기능을 개발하면서 느낀 인사이트를 끝으로 다음 시간에 찾아뵙도록 하겠습니다.

Insight

• Firebase sdk 가 v9와 v8이 존재하여 구조가 달라서 여러 블로그를 참조하다가 보면 어려움을 겪을 수 있으니 공식문서를 확인하자
• 단순 State와 Props를 이용해 Component 간에 전달하고 hook을 이용해 component 내 변화 감지시 이를 반영하는 것도 연습해보자.
• 클래스 구조와, 함수+훅 구조로 리액트 코드를 구성하는 방법에 대해서 의견이 분분한대, 분분하다다는 것은 2년전 이야기고 지금은 함수+훅 구조가 대세이다. 훅의 장점이 크고, 클래스 구조는 코드 자체가 노땅스러우며 this가 가지는 장점이 너무 미약해 보인다.
• 로긴 기능이다 보니 세션과 쿠기에 대한 리서치가 추가적으로 되어야 할 것으로 보이며, 각 기능별 클래스또는 선언형 구성에 대해서 느낌이 온다. 장단점은 있는데 실제 몇가지 구현하면서 좀더 인사이트를 얻어야한다.
• 공식문서 위치(v9)
  • API Reference | Firebase JavaScript API reference

API Reference  |  Firebase JavaScript API reference