내일배움캠프 최종 프로젝트 - 로그인과 회원가입 (5) 구글로그인

파이어베이스기반의 구글로그인이 필요했다.
먼저 firebase의 콘솔에서 google 사용설정 해줬다.

1. Firebase와 Google Auth Provider 설정

• Firebase 인증 서비스와 Google Auth Provider를 import

import { GoogleAuthProvider } from 'firebase/auth';

// Google Auth Provider 생성
const provider = new GoogleAuthProvider();

2. 세션 지속성 설정

사용자가 브라우저를 닫으면 자동으로 로그아웃 되도록 처리

import { setPersistence, browserSessionPersistence } from 'firebase/auth';

// 세션 지속성 설정
await setPersistence(auth, browserSessionPersistence);

3. Google 로그인 함수 구현

• 'signInWithPopup' 함수를 사용하여 구글 로그인 팝업을 띄우고, 사용자가 로그인을 완료하면 그 결과를 받아 처리

import { signInWithPopup } from 'firebase/auth';

// Google 로그인 함수
const googleLogin = async () => {
 try {
      await setPersistence(auth, browserSessionPersistence); // 세션 지속성 설정
      const provider = new GoogleAuthProvider();
      const result = await signInWithPopup(auth, provider);
      const user = result.user;

      // Firestore에 저장할 사용자 정보
      const userData = {
        nickname: user.displayName || '기본닉네임',
        email: user.email,
        // 구글API에서 생년월일은 미지원으로 생년월일은 초기에 빈 값으로 설정
        birthdate: '',
      };

4. 사용자 정보 Firestore에 저장

• 로그인에 성공한 후, 사용자의 정보를 Firestore에 저장하기 위해 'setDoc' 함수를 사용함

import { doc, setDoc } from 'firebase/firestore';

// Firestore에 사용자 정보 저장
const saveUserData = async (user) => {
  const userData = {
    nickname: user.displayName || '기본닉네임',
    email: user.email,
    birthdate: '', // 초기값은 빈 문자열로 설정
  };
  await setDoc(doc(db, 'users', user.uid), userData);
};

// Google 로그인 함수에서 사용자 정보 저장 호출
const googleLogin = async () => {
  try {
    // 이전 코드 생략
    const result = await signInWithPopup(auth, provider);
    const user = result.user;
    await saveUserData(user);
    alert('Google 로그인 성공!');
  } catch (error) {
    console.error('Google 로그인 실패:', error);
  }
};

5. 에러 처리

• 로그인 과정에서 발생할 수 있는 에러 처리

// Google 로그인 함수 내부에서 에러 처리
const googleLogin = async () => {
  try {
    // 이전 코드 생략
  } catch (error) {
    console.error('Google 로그인 실패:', error);
  }
};

오늘의 한줄평 : 건강을 챙기자. 너무 아파.....