Lovable로 만든 페이지에 구글 OAuth 로그인 붙이기

소개

지난 주까지 만들었던 유튜브 요약기에 구글 로그인하기 기능을 붙여보았습니다.

생각보다 쉽게 진행이 되어서 그 과정을 공유해봅니다.

먼저 Lovable에서 다음과 같이 Prompt를 입력했어요.

1. 로그인 기능을 구현하고 싶습니다. supabase에 user_id 컬럼을 추가하고 webhook에도 이 정보를 같이 전송해주세요.
2. 로그인은 supabase Auth를 활용해서 구글 로그인으로 만들고 싶습니다.

이렇게 입력하면 supabase와 연결하는 버튼이 나옵니다.

그럼 그 페이지를 띄워놓은 상태에서 Supabase에서 구글 계정을 연동하기 전에,
GCP(Google Cloud Platform)에서 셋팅이 필요합니다.

이 페이지에서 프로젝트를 생성하고,

이 페이지로 이동을 합니다.

클라이언트 메뉴에서 클라이언트를 만들어주는데요.

OAuth 클라이언트 설정은

웹 애플리케이션으로 설정 → 이름 정하고, 승인된 리디렉션 URI에 supabase project id의 callback 주소를 넣어줍니다.

subdomain이 있다면 승인된 리디렉션 URI와 위에 있는 승인된 Javascript 원본에도 서브도메인을 입력해주셔야 해요.

이렇게 설정해서 저장하고 나면 클라이언트ID, 클라이언트 보안 비밀번호가 생성되는데
이걸 잘 저장해두었다가 supabase 설정에서 넣어주시면 됩니다.

그리고 저렇게 등록된 것을 사용하시려면 브랜딩 메뉴에 정보를 하나 더 입력해주어야 하는데요.

앱 도메인에 도메인, 개인정보처리방침, 서비스약관 url등을 입력해주시고,

승인된 도메인에 supabase의 도메인과 domain 정보를 입력해주면 GCP에서의 셋팅은 끝나고요.

Supabase로 돌아와서 다시 추가 셋팅을 진행하면 됩니다.

Authentication 메뉴로 이동해서 Google 토글을 여시고 위에서 만들었던
클라이언트 ID, 클라이언트 secret을 입력하면

Lovable에서 만든 페이지를 비교적 쉽게(?) 구글 로그인 화면을 붙일 수 있습니다.

Lovable로 작업할 때는 Lovable에서 모든 걸 해결하려는 마음을 버리고
Claude나 MCP의 도움을 얻어서 진행을 해보면
Lovable의 크레딧도 아끼고 내가 원하는 결과도 쉽게 얻을 수 있더라고요.

Lovable에서 물어보는 게 빠를지, Claude에게 물어보는 게 빠를지를
판단하는 게 작업할 때 덜 헤매는 지름길이지 않을까 싶습니다.

지금 현재는 Make로 백 로직이 돌아가고 있는데, 다음주에는
이걸 github와 연동을 한 다음에 로컬로 가지고 와서
Claude code로 수정해보는 작업을 진행해볼까 하는데요.

초반 기초적인 디자인이나 기본 설계 부분은 Lovable에서 하고
이후 본격적인 디벨롭은 Claude code로 작업하면
비개발자인 저도 좀 더 쉽게 개발에 접근할 수 있지 않을까 싶어서 실험을 해보고 있는데
아직까지는 잘 진행이 되고 있는 거 같아요!

다음주에도 잘 되길 기원해봅니다!