Supabase cli로 웹 사이트 로그인 구현하기 - email (feat. claude code cli)

(* 아래 내용은 https://www.youtube.com/@jocoding 채널을 보면서 기록해두면 좋을만한 내용을 정리했습니다. 아래는 단편적인 내용이라 가급적 해당 강의를 보시는게 이해하는데 도움이 되실겁니다. 강추!! 입니다.)

https://supabase.com/docs/reference/cli/introduction

Supabase Docs

위 링크 주고 회원가입, 로그인 구현해달라고 하면 됨. 끝!!!

...

은 아니고 project 직접 만들고 project url, publishable key를 환경변수에 등록해야 한다. 

또한 다양한 프로바이더를 손쉽게 추가할 수 있다.

기본 이메일 로그인을 지원한다면 다음 옵션을 필수로 설정하는 것이 좋다.

개발 중 인증을 위해 localhost 주소를 등록해준다. redirect urls에도.

 무료이므로 현재 제한된 내용들을 확인.

이메일 전송량이 시간 당 2건 너무 적다. smtp 를 설정하면 무료 횟수를 늘릴 수 있다.

resend 서비스를 이용해 전송량을 늘리는 방법이 있다.

https://resend.com/docs/send-with-smtp

Send emails with SMTP - Resend

회원 가입 후 도메인을 신청하면 되는데 한 개만 무료지원한다. 

custom SMTP를 활성화 후 

resend에 등록된 모든 정보를 입력한다.

(* 이 내용은 강의 내용에는 없지만 추가합니다.)

resend보다 aws 를 이용하고 있다면 더 좋은 방법이 AWS SES (Simple Email Service)를 이용하는 방법이다. 무료는 아니지만 매우 저렴하다.

도메인을 가지고 있다면 no-reply@에 도메인을 기록해 인증을 하면 된다. 나머지는 기본값으로 설정한다. 등록된 이메일로 설정도 가능하지만 난 내 도메인에 대한 메일은 없는 상태라 도메인 인증으로 처리한다.

SES -> 구성( Configuration ) -> 자격 증명( Verified Identities )에서 DKIM 세션에 세 개의 name과 value가 있다. 이를 복사 후 cloudflare로 간다.

cloudflare에서 원한는 도메인을 선택하고 왼쪽 메뉴의 DNS > Records를 클릭. Add record 버튼을 누르고 복사했던 세 개의 정보를 모두 입력한다. Proxy status  는 DNS Only(회색 구름, 기본값)으로 한다.

설정이 끝났다면 다시 AWS SES로 가서 도메인 상세 페이지 상단의 Identity status가 아래와 같인 Verified로 바뀌었는지 확인한다. 대략 2~5분 이내 완료되는 듯 하다.

이제  supabase에 연결을 하면 된다. smtp host 정보는 설정된 region에 따라 다를 수 있다.

SMTP 자격 증명을 만든다.

자격 증명을 만들면 smtp username과 password가 만들어진다. 이를 supabase smtp 설정에 등록하면 기본값이 시간 당 2건에서 30건으로 변경된 것을 확인할 수 있다.

처음에는 Sandbox 모드라 제한이 있지만 서비스가 활성화되면 이후 제한 해제 요청을 할 수 있다.

이메일은 이까지!!