[TIL] Firebase 구글, 깃헙 소셜로그인 셋팅 및 구현

오늘은 Firebase를 이용해서 Google, GitHub로 로그인으 되도록 해본닷..!!

Firebase - Google

firebase공식 홈페이지 -> 콘솔로 이동 -> Authentication -> Sign-in method -> 새 제공업체 추가클릭 -> 로그인 제공업체 구글로 설정

Google Auth 활성화

Firebase - GitHub

firebase공식 홈페이지 -> 콘솔로 이동 -> Authentication -> Sign-in method -> 새 제공업체 추가 클릭 -> 로그인 제공업체 깃헙로 설정

GitHub Auth 활성화

GitHub 홈페이지 -> 프로필 -> Settings -> Developer settings -> OAuth Apps -> Register a new application 클릭

firebase에서 설정을 완료하면 승인 콜백 URL을 Homepage URL / Authorization callback URL에 입력

Client ID랑 Client secrets

Firebase에 GigHub에서 받은 Client ID랑 Client secrets값 붙여넣기

여기까지가.. Firebase 소셜로그인 셋팅방법이다..

Firebase SDK로 로그인 과정 처리

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

  const googleBtn = async () => {
    const googleProvider = new GoogleAuthProvider();
    const googleData = await signInWithPopup(auth, googleProvider);
    console.log(googleData);
    navigate("/");
  };

  const githubBtn = async () => {
    const githubProvider = new GithubAuthProvider();
    const GithubData = await signInWithPopup(auth, githubProvider);
    console.log(GithubData);
    navigate("/");
  };

공식문서에는 then-catch로 작성되어있어서 그걸 async-await로 변경했다.

결론

공식문서를 보고 따라 할 때 이해가 안되다보니.. 여러 블로그도 찾아보고 읽었던거 다시 계속 읽어보고 하다가.. 결국은 팀원분께서 GitHub셋팅방법을 알려주셨다.. 파이어베이스 신기한 녀석.. 이렇게 간단하게 로그인을 구현할 수 있다닛..!! 다만.. custom token발급하는건..(카카오, 네이버) 아직 firebase와 어떻게 연동해야 할지 잘... 모르겠다ㅠㅠ
그래도 이번에 firebase로 쉽게 소셜로그인이 되는것을 확인할 수 있는 좋은 기회가 되었닷..!!
Firebase공식문서