[React] 카카오 로그인 구현하기 (with Supabase)

프로젝트에서 사용자 데이터를 관리하는 데이터베이스로 Supabase를 사용중이다.

공식문서에 카카오 로그인 구현하는 방법이 잘 나와있어 이를 보면서 진행했다. 

 

문서에 나와있는 대로 Kakao developer와 Supabase 셋팅을 했다.

https://supabase.com/docs/guides/auth/social-login/auth-kakao

Login with Kakao | Supabase Docs

 

 

// useKakaoLogin 훅 

import { supabase } from '@/lib/supabase';

const useKakaoLogin = () => {
  const signinWithKakao = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'kakao',
      options: {
        redirectTo: '/',
      },
    });

    if (error) {
      alert(
        `카카오 로그인 중 문제가 발생했습니다: <${error.code}> ${error.message}`
      );
    }
  };

  return { signinWithKakao };
};

export default useKakaoLogin;

 

이제 이 훅을 해당 페이지(로그인 페이지)에서 사용하면 된다.

//....

import useKakaoLogin from '@/features/auth/hooks/useKakaoLogin';

const LoginPage = () => {
//...
  const { signinWithKakao } = useKakaoLogin();

//...

  return (
    //...
                {/* 소셜 로그인 */}
                <div className="flex w-full mt-1 md:mt-2 lg:mt-4 gap-3">
                  <Button
                    className="w-full cursor-pointer bg-[#ffeb38] hover:bg-[#ffeb38] text-xs md:text-sm lg:text-base text-wiz-black"
                    type="button"
                    onClick={signinWithKakao}
                  >
                    <img
                      src="/assets/auth/kakao_logo.png"
                      alt="kakao logo"
                      className="w-auto h-5 md:h-6 lg:h-8"
                    />
                    <p>카카오 로그인</p>
                  </Button>
          //...
        
};

export { LoginPage };

 

 

이때 Kakao developer 페이지에서 앱을 비즈니스로 전환해주어야했다. 로그인을 할 때 카카오계정을 수집하기 때문이다. 

 

 

내 애플리케이션 > 앱 설정 > 비즈니스에서 “카카오비즈니스 통합 서비스 약관 동의"를 누르면 된다.

 

만약 동의 처리가 되지 않았다면 Kakao developer 페이지에서 로그아웃 후 다시 로그인을 진행하면 된다.

 

 

 

** 추후 추가할 것

직전에 어떤 계정으로 로그인 했었는지 알려주기(소셜로그인)