Supabase 로그인 / 회원가입 가이드

Supabase란 무엇인가요?

Supabase는 오픈 소스 Firebase 대안으로, 데이터베이스, 인증, 파일 스토리지, 실시간 기능을 제공하는 백엔드 서비스입니다.

사용자는 SQL 기반의 Postgres 데이터베이스를 쉽게 관리할 수 있고, 다양한 소셜 로그인 및 이메일 인증을 지원해 편리한 사용자 인증 시스템을 구축할 수 있습니다. 또한, API 자동 생성 기능을 통해 프론트엔드에서 손쉽게 데이터를 불러오고 조작할 수 있습니다.

Supabase는 지속적으로 업데이트되며, 새로운 기능이나 개선 사항이 자주 추가됩니다. 따라서 구현 시 최신 정보와 기능을 반영하기 위해서는 반드시 공식 문서를 참고하는 것이 중요합니다. ⬇️ 하단의 토글을 열어 확인해보세요.

🔗 공식문서 Link </aside>

1. 기본 설정

프로젝트 생성: Supabase 대시보드에서 새 프로젝트 생성

필요한 라이브러리 설치

npm i @supabase/supabase-js (npm)
yarn add @supabase/supabase-js (yarn)

환경설정
- Project Settings → Data API → API Settings로 이동합니다.
- Project URL, API Key 를 .env 파일에 환경 변수로 설정합니다.
- Supabase와 로컬 서버를 연결하기 위한 기본 설정입니다.

2. OAuth2.0 로그인

생성한 Supabase Project에 접속합니다.

Authentication → Sign In/Up→ Auth Providers를 활성화 합니다.

Kakao

Google

3. 이메일 회원가입 / 로그인

추가적인 기본설정 없이 공식 문서를 참고하여 구현할 수 있습니다.

https://supabase.com/docs/guides/auth/passwords?queryGroups=flow&flow=implicit (이메일 로그인/회원가입)

<aside> ⛳

해당 단계에 맞는 설정을 완료하였다면, 프로젝트 내에서 로그인 기능이 동작할 수 있도록 관련 자료( YouTube, Google 검색, 블로그 등.. )를 스스로 찾아보세요! 개발자에게 스스로 문제의 해답을 찾아 해결하는 능력✨도 중요한 능력 중 하나 입니다. Supabase를 이용한 로그인/회원가입 구현을 꼭 성공하시길 바랍니다 🙂

✨ 공식문서 Link </aside>