소개
지난주에 만들었던 Lovable + Make + Supabase 조합의 유튜브 요약 웹페이지(https://www.gpters.org/nocode/post/lovable-make-supabase-2waaQaewxtnmydr)
에, 이번에는 구글 로그인 및 이메일 회원가입 기능을 추가로 구현했습니다.
이 작업을 하게 된 이유는, 사용자가 자신의 정보를 저장하고 이력을 관리하려면 인증 기능이 필수적이기 때문이에요. 더불어 구글 로그인처럼 간편한 인증 수단은 사용자 경험을 높이는 데 큰 도움이 됩니다 😊
진행 방법
🔧 사용한 도구
Supabase: 인증 및 DB 저장 기능
Google Cloud Console: OAuth 클라이언트 설정
Make: 자동화 시나리오 유지
Lovable: 웹페이지 UI 구성
📌 구현한 기능
이메일로 회원가입 후 로그인 처리
구글 계정으로 간편 로그인 처리
한국에서 YouTube의 가입 페이지
한국의 Google 계정 로그인 페이지의 스크린 샷
한국의 웹 사이트 이름을 가진 검은 색 화면
한국 웹 사이트의 스크린 샷
한국어 텍스트가있는 빨간색과 흰색 가입 페이지
⚠️ 삽질 포인트 & 해결
문제: Google Cloud Console과 Supabase 각각에 리디렉션 URL을 설정하는 과정에서 혼란이 있었습니다.
해결: 스터디장님의 코칭으로 적절한 리디렉션 URI 설정 위치와 방식을 이해하고 적용할 수 있었어요. 구글 OAuth와 Supabase Auth 간 연동에 필요한
callback URL등록이 핵심이었습니다!
결과와 배운 점
구글 로그인과 이메일 회원가입 모두 정상 작동하는 것을 확인했습니다 🎉
Supabase에서 제공하는 auth 테이블 구조와 상태 관리에 대한 이해가 반드시 필요하다는 점을 다시 느꼈습니다.
기능 구현 자체는 어렵지 않았지만, 인증 설정의 디테일에서 많은 학습이 있었습니다.
독자에게 한마디
"인증 기능을 붙이는 건 단순한 로그인 이상이에요. 테이블과 흐름을 이해하면 더 강해집니다! 💪"
도움 받은 글 (옵션)
스터디장님의 실시간 피드백 🙏
Supabase Docs - Auth
Google Cloud - OAuth 설정 가이드
