소개
lovable과 supabase를 이용해서 구글 로그인 연동하기
진행 방법
lovable과 supabase, 그리고 구글 클라우드 콘솔을 이용하여서 구글 로그인 연동을 구현해 보았습니다.
진행 순서 및 결과
우선 기존 디자인이 마음에 들지 않아서, 디자인부터 살짝 변경을 했습니다. 애플 리퀴드 글라스 스타일로 요청을 했어요! 리퀴드 글라스는 전혀 아니었지만, 좀 더 깔끔하게 변경을 해줬습니다.
(Before)
(After)
그 다음, 러버블에 아래와 같이 요청했습니다.
프롬프트: 로그인 기능을 구현해줘. 슈퍼베이스에 user_id 칼럼을 추가하고, webhook에도 이 정보를 같이 전송해줘.
로그인은 sup abase auth를 활용해서 구글 로그인으로 만들어줘
한번의 승인이 있었고, 그 후에 내부 에러가 있다고 하네요? 그래서 슈퍼베이스에서 확인을 해보았는데
러버블에서는 에러가 있다고 했지만, 슈퍼베이스에 profile 테이블이 하나 더 만들어 진 것을 확인할 수 있었어요
그래서 슈퍼베이스에서 sign in / provider에서 구글을 찾아서 enable을 해주니까 클라이언트 ID랑 클라이언트 secret을 요구하는 것을 확인했습니다.
구글 클라우드 콘솔로 이동을 하였는데, 구글 로그인뿐만 아니라 2중 인증을 해야하는듯했습니다.
인증을 하고 새로운 프로젝트를 만들었는데도 아래와 같은 화면이 떠서 좀 많이 헷갈렸어요!
뭔가 더 가입을 해야하는건가?? 하다가 그냥 검색창에 api & services를 검색해 봤는데, 아래와 같은 메뉴를 발견했습니다.
그리고는 oauth consent 화면 메뉴를 눌렀습니다.
뭐 이런 여러가지 정보들을 넣어야 했어요!
그 후에 클라이언트 메뉴가 활성화 되었습니다.
그리고 여기서 좀 헷갈렸어요.
저는 따로 만든 sub domain은 없는데, 그럼 그냥 전체 러버블 url을 두번째 필드에 넣는게 맞는지 헷갈렸습니다. ~ 그리고 첫번째 url은 슈퍼베이스의 콜백 url을 넣었어요
!!
암튼 이렇게 넣었구요!
그리고 다시 슈퍼베이스로 이동하기 전에 하기 팝업에서 뜨는 클라이언트 아이디랑 시크릿을 복사해서 보관합니다!
그 후에 슈퍼베이스로 이동해서
클라이언트 시크릿, id를 입력해 줬습니다.
다시 구글 클라우드 콘솔로 돌아와서 이번에는 브랜딩 메뉴를 입력하려는데, 아래 필드들이 아무리 필드 안을 클릭을 해봐도 활성화 되지 않았어요..
대체 왜 안되는 것인지 알 수 없어서 그냥 다 비워두고 save 했습니다 ㅠ
승인된 도메인도 제가 manually 추가하려하니 계속 빨간글씨 에러가 나서 그냥 save 했는데,
Save 이후에는 이전에 클라이언트 메뉴에서 했던 내용이 자동으로 입력되어 있었어요.
그래서 다시 러버블로 돌아가서 확인해봤구요.
로그인 메뉴가 생겼고,
구글 로그인이 가능하도록 구현이 되었습니다.
로그인 화면:
로그인을 해보니 성공적으로 로그인이 되었어요~ 로그인 후의 화면은 아래와 같아요!
도움 받은 글 (옵션)
스터디장님의 화요일 수업을 참고하여서 진행하였습니다.
느낀점
로그인 화면은 어디에나 필요하잖아요!
가장 필수적인 요소를 배워서 뿌듯했습니다~ 다음에는 더 어려운거도 배우고 싶어요 (자동으로 릴스만들기,, 같은거요!)
