Firebase GitHub 소셜 로그인 활성화

Louis·2023년 12월 30일

Firebase React github login

안녕하세요!

제가 현재 프로젝트에서 회원가입과 로그인기능 구현 역할을 받아서 회원가입과 로그인기능에 대해 엄청 찾아보고 했기 때문에

오늘은 Firebase에서 로그인 기능 중에 github를 통해 로그인을 할 수 있는 기능을 포스팅 해보도록 하겠습니다!

(요런 창에서 하단에 소셜계정으로 로그인 부분으로 쉽게 다른 계정으로 로그인 할 수 있도록 구현)

이제 본격적으로 github 소셜 로그인에 대해 알아보도록 하겠습니다!

1. Firebase에서 github 제공업체를 추가해주세요!

2. github 아이콘을 클릭해주세요!

클릭을 하게 되면

이러한 화면이 나와게 되는데 우측 상단에 사용 설정 토글을 활성화 해주세요!

내용은 아직 안채우셔도 됩니다!

3. github 애플리케이션 생선을 해주세요!

위에 나오는 클라이언트 ID와 클라이언트 보안 비밀번호를 입력하기 위해서는

github 애플리케이션을 생성해야됩니다!

github 애플리케이션 생성 링크 바로가기

링크를 클릭하여 애플리케이션을 생성해줍니다

4. 아이디와 비밀번호 가져오기

여기서 가져온 아이디와 비밀번호를

여기에 입력해주시고 저장해주시면 github를 사용할 준비는 완료된 것입니다!

5. vscode에서 github 로그인 버튼을 만들어줍니다!

import {
  GithubAuthProvider,
  signInWithPopup,

} from "firebase/auth";
import styled from "styled-components";
import { auth } from "../firebase";
import { useNavigate } from "react-router-dom";
import githubLogo from "../assets/logos/githubLogo.png";

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

  const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      // 저는 팝업 방식으로 진행하겠습니다
      await signInWithPopup(auth, provider);

      navigate("/");
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Button onClick={onClick}>

    </Button>
  );
  
  const SLoginPageGithubLogin = styled.button`
  background-image: url(${githubLogo});
  width: 75px;
  height: 75px;
  border: none;
  background-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
`;
}