[FireBase] [clonecoding] 소셜로그인

 

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

// ...

// Firebase 인증 객체 가져오기
const auth = getAuth();

// GoogleAuthProvider 인스턴스 생성
const googleProvider = new GoogleAuthProvider();

// 구글 로그인 처리 함수
const handleGoogleLogin = async () => {
  try {
    // 팝업으로 구글 로그인 창 열기
    const result = await signInWithPopup(auth, googleProvider);

    // 로그인 성공 시 처리할 내용
    const user = result.user;
    console.log("Google 로그인 성공!", user);
  } catch (error) {
    console.error("Google 로그인 에러:", error);
  }
};

// ...

// 이벤트 핸들러 등록 (버튼 클릭 등)
<button onClick={handleGoogleLogin}>Google 로그인</button>

 

1. getAuth()를 통해 Firebase 인증 객체를 가져옵니다.  ✓
2. GoogleAuthProvider 클래스로부터 googleProvider 인스턴스를 생성합니다.  ✓
3. handleGoogleLogin 함수를 정의하여 구글 로그인을 처리합니다.
4. 구글 로그인 버튼을 클릭하면 handleGoogleLogin 함수가 실행됩니다.
5. signInWithPopup(auth, googleProvider)를 호출하여 구글 로그인 팝업 창을 열고 로그인을 수행합니다.
6. 로그인이 성공하면 result.user에서 사용자 정보를 가져와서 로그를 출력하고, 실패하면 에러를 출력합니다.

=> 파이어베이스의 auth 객체와 구글 프로바이더를 사용하여 간단하게 구글 로그인을 구현하는 예시