[React+Vite/TS] Firebase로 쉽게 Github 로그인 구현하기

1.Firebase - Authentication 에 들어온 뒤 다음과 같이 진행

 

 

2. https://github.com/settings/developers 접속하여, New OAuth App 생성해주기

Authorization callback URL 만 Firebase의 콜백 URL로 작성해주면 된다.

생성된 클라이언트 ID와 Secrets 를 Firebase에 작성해주자

주의! Secrets는 절대 공개되어서는 안됨!

 

 

3. 코드 작성해주기 (팝업 or 리다이렉트)

export default function GithubButton() {
  const navigate = useNavigate();
  const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      // 팝업으로 로그인 시도
      await signInWithPopup(auth, provider);
      // 리다이렉트로 로그인 시도
      // await signInWithRedirect(auth, provider);
      navigate("/");
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <Button onClick={onClick}>
      <Logo src="/github-logo.svg" />
      Continue with Github
    </Button>
  );
}

 

팝업 또는 리다이렉트로 깃헙 로그인을 구현할 수 있는데, 팝업이 더 좋은 방법 같아서 팝업을 사용해주었다.

signInWith~ 함수는 매개변수로 auth와 provider가 필요하니까 Firebase의 auth와, GithubAuthProvider로 provider를 불러와주자!

주의! provider를 import할 때, cordova를 import하면 안된다! auth를 import 하도록!

 

 

여기까지, 추가로 더 해볼 수 있는 것은?

• 트위터, 구글로 로그인/회원가입 기능
• 회원가입 시 인증 이메일 발송 기능
• 비밀번호 찾기 기능: 메일 인증으로 비밀번호 초기화
• sendPasswordResetEmail 활용하여 패스워드 변경 기능을 프론트엔드에서 구현해보기: 메일 인