React Native + Supabase로 카카오 로그인 구현하기

1. 카카오 디벨로퍼 애플리케이션 생성

1) 카카오 디벨로퍼 접속

Kakao Developers

 

2) 로그인

우측 상단 로그인 버튼 클릭하여 로그인

 

3) 앱 생성

좌측 상단 앱 클릭

중앙 우상단 '앱 생성' 버튼 클릭

앱 아이콘 등록(중요)

앱 정보 입력

저장 버튼 클릭

 

2. 카카오 디벨로퍼 앱 설정

1) 비즈앱 등록

대시보드 > 비즈니스 > 비즈 앱 등록 버튼 클릭

개인 개발자 비즈 앱 전환 버튼 클릭

비즈 앱 전환 목적 : 이메일 필수동의 설정 후 저장 버튼 클릭

 

2) 플랫폼 등록

대시보드 > 일반 > 스크롤 쭉 > 플랫폼 > Android & IOS 버튼 각각 클릭 후 등록

Q. 패키지명이랑 번들ID에는 뭐 넣어요?

A.자신의 프로젝트에 app.config.js 파일이 있을것임
파일을 잘 살펴보면 ios 객체와 android객체가 보일텐데 각각의 객체에 입력된 번들 ID와 패키지명을 찾아 입력하면댐


ios > bundleIdentifier 에 설정된 번들 ID 등록
android > package 에 입력된 패키지명 등록

 

3) 사용설정

카카오로그인 > 일반 에서 사용설정 ON

 

4) 동의항목 설정

카카오로그인 > 동의항목 에서

닉네임, 프로필사진, 카카오계정(이메일) 전부 필수동의로 설정

이 때 동의목적은 '서비스 회원가입 정보 제공'로 입력

 

3. Supabase와 카카오 디벨로퍼 연동

1) 카카오 로그인 활성화

SignIn/Provider에서 카카오 찾아서 활성화

 

2) 콜백 URL 복사

Callback URL (for OAuth)아래에 URL 복사

 

3) 리다이렉트 URL 등록

카카오 디벨로퍼 > 카카오로그인 > 일반 > 리다이렉트 URI 에서

아까 복사한 콜백 URL 등록

 

4) 클라이언트 시크릿 복사

밑에 있는 클라이언트 시크릿 키 복사해서 supabase > Client Secret Code 에 복붙

 

5) API키 등록

카카오디벨로퍼 > 앱 > 일반 > 앱키 에서

REST API 키 복사 후 Supabase > REST API Key에 복붙 및 저장