Supabase Github Login 구현하기

이어서 수파베이스 github 로그인 구현해보기!

 

 

Docs

Login with GitHub | Supabase Docs

 

 

---

 

깃허브의 OAuth 페이지로 이동한다.

GitHub · Build and ship software on a single, collaborative platform

 

 

 

 

 

 

 

 

New OAuth app 클릭

 

 

 

 

 

 

 

 

 

내용을 입력하고 Register application 클릭

 

 

 

 

 

 

 

 

 

아래 Client ID를 복사해준다.

Client secrets도 생성해서 복사해준다.

 

 

 

 

 

 

 

 

 

수파베이스에 가서 Providers → github 탭

Client ID에 넣어주고, Client Secret도 발급받아 넣어준다.

 

 

 

 

 

 

 

그러면 Enabled로 바뀌어 있는 모습을 볼 수 있다 😊

 

 

 

 

 

---

 

로그인 코드 추가

이전 구글 로그인 포스팅과 똑같이 사용하면 된다.

 

export const oAuthLogin = async (provider: Provider) => {
  try {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider,
      options: {
        redirectTo: 리다이렉트 페이지
      },
    });

    if (error) throw error;
    return data;
  } catch (error) {
    throw new Error("로그인에 실패했습니다.");
  }
};

 

 

 

 

버튼에 바인딩해주면 끝!

  //login button
  const onClick = () => {
    const login = oAuthLogin("github");
    console.log(login);
  };