🔥 Firebase 소셜 로그인 연동

• const app = initializeApp(firebaseConfig);

  • initializeApp(): firebase 앱 초기화
  • firebase의 설정 정보를 담고 있는 firebaseConfig 객체를 인수로 받아, Firebase 서비스에 연결

• export const auth = getAuth(app);

  • firebase Authentication 인스턴스 생성( auth 객체 생성 )

• export const db = getFirestore(app);
  - getFirestore(app): firestore 데이터베이스 인스턴스 생성
  - firestore
  - firebase에서 제공하는 클라우드 기반 NoSQL 데이터베이스
  - 데이터의 저장 및 조회를 담당합니다.
  - db 객체를 내보내어, 다른 모듈에서 Firestore 데이터베이스와 상호작용할 수 있도록 함

  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth"; 
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
  };
  
  const app = initializeApp(firebaseConfig);  // firebase 앱 초기화
  
  export { app };
  export const auth = getAuth(app);           // auth 인스턴스 생성
  export const db = getFirestore(app);        // 데이터베이스 인스턴스 생성

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

export const firebaseAuthService = {
	// google social login
  async googleLogin() {
    try {
      const googleAuthProvider = new GoogleAuthProvider();
      const result = await signInWithPopup(auth, googleAuthProvider);
      return result.user;
    } catch (error) {
      console.error("❌firebaseAuthService: google login error");
      console.error(error);
    }

    return null;
  },

	// google social logout
  async googleLogout() {
    await signOut(auth);
  },
};

• firebase login 하기
  • signInWithPopup(): 팝업 창으로 로그인 → 인증 과정을 마치면 다시 앱으로 돌아옴 !
  • signInWithRedirect(): 페이지 리다이렉션을 통해 소셜 로그인 진행 → 팝업 차단 문제 해결
  • signInWithEmailAndPassword(): 이메일과 비밀번호를 사용한 인증
  • signInAnonymously(): 사용자 정보를 제공하지 않고 익명으로 인증, 계정 없이 임시로 접근
    • 게스트 로그인
  • signInWithCredential(): 자격 증명 객체를 사용한 직접 로그인