Firebase Authentication 활용 - 구글 로그인, 데이터 삽입하기 (Firestore, React)

박은경·2025년 2월 4일

Firebase authentication firestore 소셜로그인

이번 포스팅에서는 Firebase Authentication을 활용하여 구글 소셜 로그인을 구현하고, 이를 통해 수집한 회원 정보를 Firestore에 삽입하는 과정에 대해 다뤄볼 예정입니다.

1. Firebase Authentication 설정

1) Authentication 서비스 시작

파이어베이스 콘솔에서 인증 서비스를 연결할 프로젝트의 대시보드를 클릭한 후, Authentication 항목을 선택합니다.

이후 다음 화면에서 시작하기를 누르고

2) 구글 소셜 로그인 설정

로그인 방법에서 구글을 선택합니다.

선택하면 아래와 같은 화면이 나오는데, 여기서 사용 설정을 활성화 합니다.

그러고 아래에 프로젝트 지원 이메일을 설정해줘야하는데, 왜 사용해야하는지 알아보니

사용자에게 비밀번호 재설정 이메일을 보낼 때,
계정 보안 관련 자동 이메일 발송을 할 때,
사용자들이 문의할 수 있는 공식 이메일 주소를 제공하기 위해서

라고 하네요!

그냥 본인의 이메일을 입력하신 후 저장하시면 됩니다.

자 마지막으로는,

3) 승인된 도메인 확인

Oauth 리디렉션 승인된 도메일 설정을 확인해야합니다.

로컬 테스트도 필요하고, 실제 배포 환경에서도 당연히 로그인이 되어야 할테니, 각 도메인에 대한 설정이 잘 되어있는지 확인합니다.

2. firebaseConfig.js 코드 작성

인증 관련 코드를 추가합니다.
저는 현재 기준으로 세팅된 전체 내용을 가져왔습니다.

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth"; -> 여기
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "---",
  authDomain:  "---",
  projectId:  "---",
  storageBucket:  "---",
  messagingSenderId:  "---",
  appId:  "---",
};

// ✅ Firebase 초기화
const app = initializeApp(firebaseConfig);
const auth = getAuth(app); -> 여기
const provider = new GoogleAuthProvider(); -> 여기
const db = getFirestore(app);

export { auth, provider, db };
export default app;

이렇게 세팅이 끝났으면, 파이어베이스와 내 프로젝트간 인증 관련 연결은 완료입니다.

다음으로는 실제로 테스트 환경에서 구글 로그인 단계가 실행되도록 설정이 필요합니다.

3. 구글 로그인 코드 작성

구글 로그인이 실행되면, 사용자가 로그인을 완료하고
해당 회원 정보를 firestore에 저장하는 방식으로 구현했습니다.

이전 포스팅에서 만든 users 컬렉션에 이 데이터를 저장할거고, login 단계를 마치면 유저 정보중 일부를 불러와 화면에 띄우는 것까지 구현할 예정입니다.

firebase에서 기본적으로 제공해주는 기능들이 이미 많아서, 어렵지 않게 구현이 가능합니다.

import { signInWithPopup, signOut } from "firebase/auth";
import { doc, setDoc, getDoc } from "firebase/firestore";
import { auth, provider, db } from "./firebaseConfig";

// ✅ Google 로그인 실행 (팝업 방식)
const signInWithGoogle = async () => {
  try {
    console.log("🔄 Google 로그인 시도 중...");
    const result = await signInWithPopup(auth, provider);
    console.log("✅ 로그인 성공! 사용자:", result.user);

    // ✅ Firestore에 사용자 정보 저장
    await saveUserToFirestore(result.user);

    return result.user;
  } catch (error) {
    console.error("🚨 로그인 오류 발생:", error.message);
  }
};

// ✅ Firestore에 사용자 정보 저장
const saveUserToFirestore = async (user) => {
  try {
    console.log("🟢 Firestore에 사용자 저장 시도... UID:", user.uid);
    const userRef = doc(db, "users", user.uid);
    await setDoc(
      userRef,
      {
        uid: user.uid,
        name: user.displayName,
        email: user.email,
        photoURL: user.photoURL,
        createdAt: new Date(),
      },
      { merge: true }
    );

    console.log("✅ Firestore 저장 성공!");
  } catch (error) {
    console.error("🚨 Firestore 저장 오류 발생:", error.message);
  }
};

// ✅ 로그아웃 기능
const logout = async () => {
  try {
    await signOut(auth);
    console.log("✅ 로그아웃 성공!");
  } catch (error) {
    console.error("🚨 로그아웃 오류:", error.message);
  }
};

export { signInWithGoogle, logout };

4. 로그인 페이지 생성

위 코드들을 테스트하기 위해, 로그인 페이지를 생성한 후, 위 인증 절차를 불러와보겠습니다.

로그인 버튼을 눌러, signInWithGoogle()을 실행시키고, signInWithGoogle의 리턴값인 유저 정보를 userData에 저장하는 함수를 실행한 다음

이후 로그인이 완료되면, userData에 저장한 내용을 화면에 띄워주는 방식으로 간단하게 구현해보았습니다.

import React, { useState } from "react";
import { signInWithGoogle, logout } from "../services/googleAuth";

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

  const handleLogin = async () => {
    const userData = await signInWithGoogle();
    if (userData) {
      setUser(userData);
    }
  };

  const handleLogout = async () => {
    await logout();
    setUser(null);
  };

  return (
    <div className="login-container">
      <main className="login-content">
        <h1>Test![](https://velog.velcdn.com/images/coster97/post/1f0bfd53-a711-4aa8-8bb6-7fc9291ae253/image.png)
![](https://velog.velcdn.com/images/coster97/post/071cbf02-9534-4f59-b78a-b7d2220b3567/image.png)
</h1>
        <p>Google 소셜 로그인 테스트</p>
        {user ? (
          <div>
            <p>로그인됨: {user.email}</p>
            <button onClick={handleLogout}>로그아웃</button>
          </div>
        ) : (
          <button onClick={handleLogin}>구글로 시작하기</button>
        )}
      </main>
    </div>
  );
};

export default LoginPage;