React에서 Firebase Authentication 사용법

 

React 애플리케이션에서 Firebase Authentication을 사용하면 이메일, 소셜 계정, 익명 로그인을 통해 손쉽게 인증 기능을 구현할 수 있습니다. 이 글에서는 Firebase Authentication의 주요 기능과 React에서 이를 설정하고 사용하는 방법을 단계별로 설명하며, 실제 예제 코드를 제공합니다.

---

1. Firebase Authentication이란?

Firebase Authentication은 Google Firebase에서 제공하는 인증 서비스로, 안전하고 확장 가능한 인증 기능을 제공합니다.
주요 특징은 다음과 같습니다:

• 다양한 인증 방식: 이메일/비밀번호, Google, Facebook, GitHub 등 소셜 로그인 지원
• 안전한 인증 처리: 백엔드에서 인증 데이터를 보호
• 쉽고 간단한 구현: React와 같은 프론트엔드 프레임워크에 쉽게 통합 가능

---

2. Firebase 프로젝트 생성 및 설정

(1) Firebase 프로젝트 생성

1. Firebase Console에 접속하여 로그인합니다.
2. 새 프로젝트를 생성합니다.
3. 프로젝트 설정으로 이동하여 Firebase SDK 설정 코드를 확인합니다.

(2) Firebase Authentication 활성화

1. Firebase Console에서 Authentication 섹션으로 이동합니다.
2. 시작하기 버튼을 클릭한 후 로그인 제공업체를 선택합니다.
3. 이메일/비밀번호 또는 소셜 로그인 제공업체를 활성화합니다.

(3) Firebase SDK 설치

React 프로젝트에서 Firebase SDK를 사용하려면 다음 명령어를 실행합니다:

npm install firebase

---

3. Firebase 설정 및 초기화

(1) Firebase 구성 파일 생성

Firebase 프로젝트에서 제공된 설정 정보를 React 앱에 추가합니다.
firebase-config.js 파일을 생성:

// firebase-config.js
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);
export default app;

(2) Firebase Authentication 모듈 추가

Firebase Authentication 서비스를 사용하려면 다음과 같이 getAuth를 초기화합니다:

import { getAuth } from 'firebase/auth';

const auth = getAuth(app);
export { auth };

---

4. React에서 Authentication 구현

(1) 이메일/비밀번호 인증 구현

사용자 가입

React 컴포넌트에서 사용자 가입을 처리하는 코드를 작성합니다:

import React, { useState } from 'react';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase-config';

const SignUp = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      alert('회원가입 성공!');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="email"
        placeholder="이메일 입력"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="비밀번호 입력"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">회원가입</button>
      {error && <p>{error}</p>}
    </form>
  );
};

export default SignUp;

사용자 로그인

기존 사용자 로그인을 처리하는 코드:

import { signInWithEmailAndPassword } from 'firebase/auth';

const handleLogin = async (e) => {
  e.preventDefault();
  try {
    await signInWithEmailAndPassword(auth, email, password);
    alert('로그인 성공!');
  } catch (err) {
    setError(err.message);
  }
};

---

(2) 소셜 로그인 구현 (Google 로그인 예제)

Google 로그인 제공업체 활성화

Firebase Console에서 Google 로그인을 활성화합니다.

Google 로그인 처리 코드

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

const handleGoogleLogin = async () => {
  const provider = new GoogleAuthProvider();
  try {
    await signInWithPopup(auth, provider);
    alert('Google 로그인 성공!');
  } catch (err) {
    console.error(err);
    alert('Google 로그인 실패!');
  }
};

---

(3) 인증 상태 관리

React에서는 onAuthStateChanged를 사용해 사용자의 로그인 상태를 추적할 수 있습니다:

import React, { useEffect, useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './firebase-config';

const AuthStatus = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {user ? (
        <p>로그인 사용자: {user.email}</p>
      ) : (
        <p>로그인되지 않음</p>
      )}
    </div>
  );
};

export default AuthStatus;

---

5. Firebase Authentication 실제 사례

사례 1: 이메일 인증 링크 추가

사용자가 이메일을 확인하도록 이메일 인증 링크를 보내는 기능:

import { sendEmailVerification } from 'firebase/auth';

const handleSendEmailVerification = async () => {
  if (auth.currentUser) {
    await sendEmailVerification(auth.currentUser);
    alert('이메일 인증 링크가 전송되었습니다.');
  }
};

사례 2: 비밀번호 재설정

사용자가 비밀번호를 잊은 경우 비밀번호 재설정 이메일을 보내는 코드:

import { sendPasswordResetEmail } from 'firebase/auth';

const handleResetPassword = async (email) => {
  try {
    await sendPasswordResetEmail(auth, email);
    alert('비밀번호 재설정 링크가 전송되었습니다.');
  } catch (err) {
    console.error(err);
    alert('비밀번호 재설정 실패!');
  }
};

---

6. 결론

Firebase Authentication은 React에서 인증 기능을 간단하고 효율적으로 구현할 수 있는 강력한 도구입니다. 이메일/비밀번호 인증부터 Google 로그인과 같은 소셜 로그인까지 지원하며, 유연한 API로 다양한 요구 사항을 충족시킬 수 있습니다.
이 글을 참고하여 Firebase Authentication을 사용해 React 프로젝트의 인증 기능을 강화해 보세요!