[Firebase] Authentication으로 Email 로그인 구현하기 (1) - 기초

들어가며

Firebase에서 제공하는 인증 기능은 구현이 간편할뿐만 아니라 사용자 데이터 보호를 위한 보안 메커니즘이 적용되어 있습니다. 또한 확장성도 뛰어나서 개발 후 추가적인 로그인/회원가입 기능을 구현할 수 있습니다.

Authentication에서 제공하는 다양한 Provider 중에 저는 이메일과 구글로 로그인 하는 방법을 사용했습니다. Authentication의 메서드들을 이미 숙지하고 있다는 가정 하에 우선 이메일로 로그인하는 과정부터 설명하고 나중에 구글 로그인도 보여드리겠습니다.

내용이 생각보다 길어서 이번 글에서는 Firebase의 console에서 제품을 선택하고, VS Code에서 어떤 설정이 필요한지 알려드리겠습니다. 프로젝트에서 사용한 기술 스택은 아래와 같습니다.

• React
• npm
• vite
• recoil
• Styled Components
• Firebase

Firebase Authentication 제품 사용하기

좌측 사이드 바의 제품들 중에 Authentication을 클릭해서 시작하기를 누릅니다. 그럼 마지막 사진처럼 어떤 로그인 제공업체를 사용할 지 선택하는 창이 나타납니다. 저는 기본 제공업체인 이메일/비밀번호를 선택하겠습니다.

이렇게 사용 설정을 체크하면 사용 설정은 끝입니다! 아직 가입한 사용자가 없기 때문에 비어 있는 리스트가 보이게 됩니다. 이제 Firebase의 콘솔에서 할 작업은 끝났고 VS Code로 이동하겠습니다.

auth 객체 생성하기

파이어베이스의 설정 파일인 firebase.js를 따로 만들어서 인스턴스 관리를 해줍니다. 정말 로그인/회원가입 기능만 필요하다면 아래처럼 auth 객체만 생성하면 됩니다. 하지만 사용자의 다양한 정보를 저장하려면 Firestore의 DB를 불러와서 users 컬렉션을 생성해 따로 관리해주어야 합니다.

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 생략 //
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth };

auth는 Firebase의 인증 시스템을 관리하는 객체입니다. auth를 쉽게 생각하면 로컬에서 접속중인 사용자 객체인 전역 상태 관리 변수입니다(물론 실제로 전역 상태 관리 변수는 아닙니다). 이 auth 객체 안에 uid, email, displayName 등의 사용자 정보가 저장되어 있습니다. 이 auth 객체를 import 해서 로그인/회원가입, 로그아웃/회원탈퇴 등에 사용할 수 있습니다.

 

로그인 및 회원가입 Flow

웹 프로젝트에서 회원가입과 로그인을 하는 흐름도는 아래 그림과 같습니다.

로그인/회원가입 흐름

신규 사용자는 회원가입 페이지로 이동해서 회원가입을 진행하고 기존 사용자는 로그인 페이지에서 이메일과 패스워드를 입력해 로그인 합니다. 메인 페이지는 인증된 사용자만 접근 가능하도록 PrivateRoute 컴포넌트로 보호 처리했습니다.

라우터 리스트

아래는 제 프로젝트의 라우트 파일에서 로그인/회원가입과 관련된 것만 발췌한 코드입니다.

export const RouterList = () => [
  {
    // Login and Registration
    path: "/",
    element: <LoginLayout />,
    children: [
      {
        path: "intro",
        element: <IntroForm />,
      },
      {
        path: "login",
        element: <LoginForm />,
      },
      {
        path: "signup",
        element: <SignUpForm />,
      },
    ],
  },
  {
    // Main
    path: "/",
    element: <PrivateRoute><MainLayout /></PrivateRoute>,
    children: [
      {
        path: "main",
        element: <Main />,
      },
    ],
  },
];

export const RouterObject = createBrowserRouter(RouterList());

초기화면과 로그인, 회원가입은 public이고 나머지 모든 페이지는 PrivateRoute로 보호되고 있습니다.

다음 글에서 실제로 회원가입과 로그인을 구현해보도록 하겠습니다.

 

.

.

.

 

[Firebase] Authentication으로 Email 로그인 구현하기 (2) - 로그인/회원가입