Supabase Google Login 구현하기

수파베이스로 구글 로그인을 구현해 보려고 한다.

 

 

 

 

Docs

Login with Google | Supabase Docs

 

위에 Docs에 잘 나와있으니 천천히 따라해 보도록 하겠다!

 

 

 

 

 

 

 

 

Docs를 따라 Google Cloud Platform으로 이동해서 새 프로젝트를 생성해준다.

또는 구글에 Google Cloud Platform 을 검색해준다.

 

 

 

 

 

 

 

 

API 및 서비스 → 사용자 인증 정보 탭으로 들어간다.

 

 

 

 

 

 

 

 

 

사용자 인증 정보 만들기 → OAuth 클라이언트 ID

를 클릭한다.

 

 

 

 

 

 

 

 

현재 웹페이지를 만들고 있으니 웹 애플리케이션으로 선택했다.

 

 

 

 

 

 

 

 

 

 

승인된 JavaScript 원본은 배포를 안했으니 localhost:3000을 입력해 주었다.

승인된 리디렉션 URI는 수파베이스에서 가져와야한다.

 

 

 

 

 

 

 

수파베이스로 들어가서

Providers → Enable Sign in with Google 토글체크

 

 

 

 

 

 

 

 

아래에 보면 Callback URL (for OAuth)에서 발급받은 URL을 복사해서,

다시 구글로 가서 승인된 리디렉션 URI에 넣어준다.

 

 

 

 

 

 

 

 

그럼 클라이언트가 생성되었다고 나온다.

 

 

 

 

 

 

 

 

 

그럼 다시 수파베이스로 돌아와서 구글에서 발급받은

클라이언트 ID

클라이언트 보안 비밀번호

두개를 입력해주고 save를 누른다.

 

 

그럼 세팅은 끝!

 

 

 

login 코드

lib>auth>auth.ts

import { Provider } from "@supabase/supabase-js";
import { supabase } from "../supabase/client";

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("로그인에 실패했습니다.");
  }
};

 

 

리다이렉트는 구글 로그인 완료 후에 사용자가 돌아올 URL을 지정하는 옵션이다.

 

 

 

동작 순서

1. 사용자가 '구글 로그인' 버튼 클릭
2. 구글 로그인 페이지로 이동
3. 로그인 완료
4. redirectTo에 지정된 URL로 돌아옴 

 

 

 

설정하고 구글 로그인 버튼을 함수와 바인딩 시켜준다.

  //google login button
  const onClickGoogle = () => {
    const googleLogin = oAuthLogin("google");
    console.log(googleLogin);
  };