[Supabase] Supabase 카카오톡 로그인 기능 사용방법 A to Z

카카오톡 디벨로퍼 세팅

1. 로그인 및 어플리케이션 생성

1) 카카오 디벨로퍼 로그인

 

2) '내 애플리케이션' 클릭

3) '애플리케이션 추가하기' 클릭

4) 애플리케이션 정보 입력 후 '저장' 클릭

 

2. 카카오 로그인 설정 & 비즈 앱 전환

1) 생성한 애플리케이션 클릭

2) '대시보드 > 설정 > 카카오 로그인 > 설정하기' 클릭

3) 카카오 로그인 활성화

4) '대시보드 > 설정 > 동의항목 > 설정하기' 클릭

5) '카카오 로그인 > 동의항목 > 개인정보 동의항목 심사 신청' 클릭

6) '앱 권한 신청 > 비즈 앱 전환' 클릭

7) '비즈니스 > 개인 개발자 비즈 앱 전환' 클릭

8) 비즈 앱 전환 목적 선택 후 전환 클릭 

 

3. 앱 권한 신청(선택)

 

 

4. 동의 항목 설정

1) '대시보드 > 설정 > 동의항목 > 설정하기' 클릭

2) 닉네임, 프로필 사진, 이메일 동의항목 설정(필수 동의 권장)

 

5. API 키 복사

앱 키 > JavaScript 키

1) 자신의 앱에 해당하는 API키를 복사합니다. (Supabase에 등록할 것이므로 따로 메모 || 저장해두는 것을 권장합니다.)

 

6. 보안 키 생성 및 복사

1) 카카오 로그인 > 보안 > 코드 생성 클릭

2) 활성화 상태 설정 클릭

3) 보안 코드 활성화

카카오 로그인 > 보안

6) 보안 키 복사 (메모 || 복사 권장)

 

Supabase 세팅

1. REST API Key &  Client Secret Code 설정

1) Dashboard > Authentication > Providers > Kakao 클릭 후 활성화(Enable)

2) REST API와 Client Secret Code 입력값에 각각 위 카카오 디벨로퍼 세팅 작업에서 복사해두었던 API키와 보안키를 입력

(카카오 디벨로퍼 세팅 > 5번 과정 + 6번 과정 참고)

 

2. 리다이렉트 링크 세팅

1) 'Dashboard > Authentication > URL Configuration > Site URL 설정

* Site URL : Supabase의 Auth 제품을 통한 인증 후 리다이렉트 시킬 기본 경로이다. 즉, 현재 우리를 예시로 들면 카카오 인증 후에 리다이렉트 시킬 기본 경로를 의미한다.

* Redirect URLs : Supabse는 URL Configuration에 등록되지 않은 경로로 리다이렉트하는 것을 금지한다. 따라서, 개발자가 코드단에서 기본 URL이 아닌 다른 URL로 리다이렉트 시키고 싶을 때 Redirect URLs에 해당 URL을 등록하여야한다.

 

2) 'Dashboard > Authentication > Providers > Kakao > Callback URL' 복사

3) '대시보드 > 설정 > Redirect URI' 설정하기 클릭

4) Supabase에서 복사한 Callback URL값을 카카오 디벨로퍼 Redirect URI에 삽입 후 저장

 

 

실습

// Supabase 카카오 인증 코드

// 옵션1 : 인증 후 기본 URL(Site URL)로 리다이렉트
async function signInWithKakao() {
  const response = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
  })
}

// 옵션2 : 인증 후 추가 URL(Redirect URLs)로 리다이렉트
async function signInWithKakao() {
  const response = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
    options:{
      redirectTo: "http://localhost:3000/sign-up/details"
    }
  })
}

위 코드는 Supabase에서 제공하는 카카오 로그인&회원가입 코드이다.

해당 코드를 실행하면 아래 분기에 따라 처리된다.

 

1. 최초 사용자(최조로 회원가입하는 사용자) :

  1) Authentication > Manage > User 에 사용자 정보를 저장한다.

  2) 사용자에게 세션을 부여한다. (로컬 스토리지에 사용자 정보 저장)

  3) 사용자를 리다이렉트 URL로 리다이렉트 시킨다.

 

2. 기존 사용자(이미 회원가입 된 사용자) :

  1) 사용자에게 세션을 부여한다. (로컬 스토리지에 사용자 정보 저장)

  2) 사용자를 리다이렉트 URL로 리다이렉트 시킨다.

 

실습 결과 Authentication > Manage > User 에 카카오 로그인한 사용자의 정보가 잘 저장되는 것을 확인했다.

 

추가(인증된 사용자 정보 가져오기)

서비스를 개발하다보면 인증 후 리다이렉트뿐만 아니라 인증된 사용자 정보를 가져와야하는 경우가 잦다.

(ex) 회원가입 추가 정보 입력, 마이페이지, 장바구니)

// 유저 세션 정보 가져오기

// 옵션1 : 유저 세션 모두 리턴
const getUser = async () => {
  const { data, error } = await supabase.auth.getSession();
  return {data, error};
}

// 옵션2 : 유저 고유 ID(uuid)만 리턴
const getUser = async () => {
  const { data: sessionData, error } = await supabase.auth.getSession();
  const userId = sessionData.session?.user.id;
  return {userId, error};
}

위 코드를 통해 사용자의 세션 정보와 고유 UID를 가져올 수 있으니 참고하자

 

 

참고자료

https://supabase.com/docs/guides/auth/social-login/auth-kakao?queryGroups=framework&framework=nextjs

Login with Kakao | Supabase Docs

 

https://supabase.com/docs/reference/javascript/auth-signinwithoauth

JavaScript: Sign in a user through OAuth | Supabase Docs