[Supabase] Next_Start_Template 사용을 위한 Supabase 프로젝트 세팅 방법

관련 문서

https://github.com/LDK1009/Next_Start_Template

GitHub - LDK1009/Next_Start_Template: Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다.

 

 

방법

supabase 프로젝트 생성

 

카카오톡 로그인 활성화

 

카카오톡 디벨로퍼 세팅

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

카카오 디벨로퍼 로그인

Kakao Developers

 

'내 애플리케이션' 클릭

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

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

생성한 애플리케이션 클릭

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

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

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

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

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

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

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

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

앱 키 > JavaScript 키 > 복사

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

활성화 상태 설정 클릭

보안 코드 활성화

보안 키 복사

 

supabase 세팅

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

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

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

// 로컬호스트 하위 라우터 전부 허용
http://localhost:3000/**

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

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

 

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

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

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

 

.env 파일 수정

.env.local (개발 환경변수)

.env.production (배포 환경변수)

 

테스트

프로젝트 실행

npm run dev

 

URL 변경

http://localhost:3000/auth/sign-in

 

로그인 테스트

 

 

끝.