TIL 23.07.12 firebase 구글/ 깃허브 로그인

파이어베이스 소셜로그인

 

프로젝트 생성 > Authentication > Sign-in method > 새 제공업체 추가

나는 구글과 깃허브를 추가했다.

 

구글은 그냥 하라는 대로 설정하면 되고 깃허브는 조금 복잡한데,

깃허브에 들어가서 Setting > Developer Settings > OAuth Apps > New OAuth App

Authorization callback URL 값을 아래에있는 firebase 승인 콜백 URL 로 입력한다. 

이후 클라이언트 ID, 비밀번호를 발급받아 클라이언트 ID, 비밀번호를 입력해주면 됨.

 

예시 ) 구글 로그인 (깃허브도 똑같음)

firebase.js 에 다음과 같이 입력하고, 

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

export const signInWithGoogle = () => {
  const googleProvider = new GoogleAuthProvider();

  return signInWithPopup(auth, googleProvider);
};

 

로그인 컴포넌트에 다음과 같이 입력하면 된다.

 const [userData, setUserData] = useState(null);
 
  function signInWithGoogle(e) {
    e.preventDefault(); // 이것때문에 새로고침돼서 로그인 안되는 고생을 했다 
    const provider = new GoogleAuthProvider(); // provider 구글 설정
    signInWithPopup(auth, provider) // 로그인 방식 팝업창으로
      .then((data) => {
        setUserData(data.user); // user data 설정
        // console.log("google", data); // console에 UserCredentialImpl 출력
        setOpen(false);
      })
      .catch((err) => {
        // console.log(err);
      });
  }

 

e.preventDefault 안써서 계속 로그인 안되는 애를 먹었음

나는 써야돼서 썼는데 저번 프로젝트에서는 안썼음 필요하면 쓰고 안필요하면 안써도 될 것 같다.