파이어베이스로 깃헙 로그인 구현

📌 깃헙 로그인 진행 과정

---

1. github settings -> Developer settings로 이동합니다.

 

2. New Github App을 클릭하여 새로운 Github App을 만듭니다.

 

3. 파이어베이스에 Authentication에 깃허브를 추가해줍니다.

 

4. App설정을 진행합니다.

 

5. App설정을 완료 후 사용자 정보 가져와서 파이어베이스에 설정해주기 

6. 설정을 완료하려면 승인 콜백 URL을 GitHub 앱 구성에 추가

콜백 URL 설정

 

7.  모든 구성 설정을 완료후 깃헙 로그인 코드 적용

import { useNavigate } from 'react-router-dom';
import githubLogo from '/public/assets/githubLogo.svg';
import { getAuth, signInWithPopup, GithubAuthProvider } from '@firebase/auth';

export function GithubButton() {
  const navigate = useNavigate();

  const handleGithubSignIn = async () => {
    const provider = new GithubAuthProvider();
    const auth = getAuth();

    try {
      const result = await signInWithPopup(auth, provider);
      const user = result.user;
      navigate('/');
      console.log(user);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <button onClick={handleGithubSignIn}>
      <img src={githubLogo} alt="깃허브" />
    </button>
  );
}

 

8.  깃헙 로그인 완료 ⭐️

 

 

 

 

참고)

https://firebase.google.com/docs/auth/web/github-auth?hl=ko 

자바스크립트에서 GitHub를 사용하여 인증  |  Firebase