[ReactJS] firebase를 이용한 로그인 시스템 구축하기

리액트에서 firebase SDK 설치하기

터미널에서 아래의 코드를 입력하여 firebase SDK를 설치한다.

npm install firebase

 

 

src 폴더 안에 firebase.js 파일을 생성하고 Firebase 설정 코드를 추가한다.

설정코드는 firebase에서 프로젝트를 생성하고 설정을 완료하면 제공된다.(문서 하단 참조)

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

// Firebase 설정 객체
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);

// Firebase 서비스 초기화
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

 

---

 

firebase 프로젝트 생성하기

먼저 firebase에 접속해서 새 프로젝트를 생성한다.

 

 

 

프로젝트명을 입력하고 [계속] 버튼을 클릭한다.

 

 

 

구글 애널리틱스를 이용할거라면 체크하고 [계속] 버튼을 클릭한다.

 

 

 

[프로젝트 만들기] 버튼을 클릭해서 프로젝트 생성을 완료한다.

 

 

---

 

 

로그인 시스템을 구축하기 위한 firebase 설정하기

Authentication을 클릭한다.

 

 

 

로그인 방법을 선택한다.

로그인 방식을 이메일 비밀번호로 받을 거라면 이메일/비밀번호를 선택하고, 구글 계정을 이용할 거라면 구글을 선택한다.

 

 

아래와 같이 창이 뜨면 사용설정에 체크하고 프로젝트 공개용 이름을 입력한다(기본 제공되는 이름을 사용해도 된다). 프로젝트 지원 이메일을 클릭하면 본인의 이메일이 뜨는데 클릭하고 [저장] 버튼을 누른다.

 

 

SDK 설정 및 구성에서 SDK를 리액트 프로젝트에서 생성한 firebase.js에 붙여넣는다.

 

 

 

 

index.js에 import 하기

import app from './firebase'

 

---

 

// Login.js 예제

import React, { useState } from "react";

import { auth } from "../firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { useNavigate } from "react-router-dom";

const Login = ({ onLogin }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate(); // useNavigate를 사용하여 페이지 이동

  const handleLogin = async () => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;

      // 로그인 성공 시 부모 컴포넌트에 알림
      onLogin(user);

      // 로그인 성공 시 메인 페이지로 이동
      navigate("/main");
    } catch (error) {
      console.error("로그인 에러:", error.message);
      alert("로그인 실패: " + error.message);
    }
  };

  return (
    <div>
      <h2>로그인</h2>
      <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 onClick={handleLogin}>로그인</button>
    </div>
  );
};

export default Login;

 

 

---

 

 

팝업창으로 띄워서 구글 계정으로 로그인하기

자세한 내용은 구글 문서를 참조한다.

 

App.js에 추가하기

import { getAuth, signInWithRedirect, onAuthStateChanged, signOut } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);



// 로그인 기능
  function firebaseLogin() {
    signInWithPopup(auth, provider)
    .then((result) => {
      
    }).catch((error) => {
      console.log(error);
    });
  }
  
// 로그아웃 기능
  function firebaseLogout() {
    signOut(auth).then(() => {
      setUserInfo(null);
      navigate("/")
    }).catch((error) => {
      console.log(error)
    });
  }

// Nav바 예시
  <Nav>
    {
      userInfo === null ?
      <Nav.Link onClick={firebaseLogin}>Login</Nav.Link> :
      (
      <div className='userInfoArea'>
        <span>{userInfo.displayName}</span>
        <img src={userInfo.photoURL} className='userImage'></img>
        <Nav.Link onClick={firebaseLogout}>Logout</Nav.Link>
      </div>
    )}
  </Nav>