[Firebase] 회원가입/로그인 구현 (2)

 

 

지난 글에 이어서 프로젝트 내의 설정과 코드에 대해서 기록해보려 한다.

 

 

1. firebase 패키지 설치

---

# npm i firebase

 

 

2. firebase initialize

---

인증 기능을 사용하기 위해서 먼저 initializeApp 함수를 실행하여 Firebase를 초기화해야 하는데 index 파일 내에 작성해도 되지만, 나는 별도로 firebase.ts 파일에 작성해 import 해서 사용했다.

앱 생성 시 나왔던 SDK를 그대로 복사해서 사용해주면 되는데, firebaseConfig 내의 키값들은 외부에 노출되는 것을 막기 위해 환경변수로 설정해두었다.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  databaseURL: import.meta.env.VITE_DATABASE_URL,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

const app = initializeApp(firebaseConfig);

 

 

3. firebase auth

---

로그인, 회원가입, 사용자 정보 조회/수정 등의 기능을 사용하기 위해서 firebase auth가 필요하다.

firebase.ts 파일 내에 firebase/auth에서 getAuth를 import 해서 사용했다.

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

const firebaseConfig = {
	...
};

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

 

 

4. 회원가입

---

이메일, 비밀번호 값을 이용해 회원가입 기능을 구현하기 위해서는 createUserWithEmailAndPassword 메서드를 사용한다.

대부분의 메서드들은 비동기로 동작하므로 순차적 실행을 위해 async/await 을 사용했고, auth객체와 email, password 값을 이용해 handleSubmit 함수를 만들어 회원가입 기능을 구현했다.

이메일 인증을 통한 회원가입은 sendEmailVerification 메서드를 추가해주면 되는데, 나는 토이 프로젝트였기 때문에 따로 추가해주지 않았다.

import { createUserWithEmailAndPassword } from "firebase/auth";

const handleSubmit = async (e: React.FormEvent) => {
      await createUserWithEmailAndPassword(auth, email, password)
        .then(() => {
          alert("회원가입 완료");
          navigate("/user/login");
        })
        .catch((e) => {
          alert(e);
        });
  };

 

 

5. 로그인 / 로그아웃

---

로그인/로그아웃 기능은 signInWithEmailAndPassword / signOut 메서드를 사용한다.

로그인은 가입한 이메일과 패스워드를 이용하는 방법과 구글 계정을 이용하는 방법 두 가지가 있다.

 

이메일과 패스워드를 이용하는 방법은 회원가입과 동일하게 auth객체와 email, password 값을 이용해 handlleSubmit 함수를 만들었다.

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth, loginGoogle } from "../firebase";

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    signInWithEmailAndPassword(auth, email, password)
      .then(() => {
        navigate("/");
      })
      .catch((e) => {
        alert(e);
      });
  };

 

구글 계정을 이용하는 방법은 firebase.ts 파일에 구글 로그인 함수에 넣어줄 provider를 GoogleAuthProvider 메서드를 통해 만들어주고, 구글 로그인 팝업창을 띄워줄 signInWithPopup 메서드 안에 auth 객체와 provider 값을 넣어 loginGoogle 함수를 만들었다. 다음 로그인 페이지에서 loginGoogle 함수를 import 해주었다.

// firebase.ts

import { ..., GoogleAuthProvider, signInWithPopup } from "firebase/auth";

...

const provider = new GoogleAuthProvider();
export const loginGoogle = () => {
  return signInWithPopup(auth, provider);
};

// LoginPage.tsx

const handleGoogleLogin = async () => {
    await loginGoogle();

    navigate("/");
};

 

로그아웃 기능은 signOut 메서드를 사용한다. 로그아웃은 auth 객체만 이용해 handleLogout 함수를 만들었다.

import { signOut } from "firebase/auth";

const handleLogout = () => {
    signOut(auth);
    alert("정상적으로 로그아웃 되었습니다.");
    navigate("/");
  };

 

 

6. 후기

---

처음 Firebase Authentication을 빌드해서 회원가입/로그인을 구현했을 때는 익숙하지 않아서 어려움을 겪었는데, 최근 진행한 프로젝트에서 사용했을 때는 매우 쉽게 기능을 구현해볼 수 있었다.

Authentication 이외에도 FireStore Database를 통해 쉽게 데이터베이스를 사용할 수 있는데 이를 통해 유저별 장바구니, 리뷰, 게시판 CRUD 기능을 구현한 것을 기록하고 공유해보는 시간을 가져야겠다.