Firebase | 채팅 웹 애플리케이션 (5) 소셜로그인 (Google Login)

Google로그인

1. Firebase 콘솔에서 Sign-in method 추가

 

연필모양 버튼 클릭

사용 설정 완.

 

스크롤을 내려 승인된 도메인에 localhost가 있는지 확인 (없으면 도메인 추가로 등록)

 

2. auth.js 작성

이번엔 구글 로그인에 필요한 메서드를 작성하면 된다.

// src/helpers/auth.js

export function signInWithGoogle() {
  const provider = new auth.GoogleAuthProvider();
  return auth().signInWithPopup(provider);
}

3. Login.js 수정

우선 위에서 작성한 메서드를 불러옴

import { signIn, signInWithGoogle } from "../helpers/auth";

 

구글로 로그인 버튼을 추가

<button
  type="button"
  className="sign-social-btn google-login"
  onClick={handleGoogleSignIn}
/>

 

핸들러 메서드 작성

  const handleGoogleSignIn = async () => {
    try {
      await signInWithGoogle();
    } catch (error) {
      console.log(error);
    }
  };

구글로 로그인 버튼을 클릭하면 구글 계정 선택 팝업이 생성된다.

Users목록에 방금 로그인한 계정이 추가되어있음