🌱 지난 시간 이야기
1편 이메일 로그인
2편 카카오 로그인
앞선 두 포스트에서는 Supabase 세팅 및 프로젝트의 코드 구현 등을 가지고 실제로 기능을 구현했다면, 이번 포스트에서는 배포한 프로덕션 레벨에서 다른 유저들도 이메일로 회원가입이 가능하게 하기 위해서 필수적으로 세팅해야하는 SMTP 설정에 대해서 알려드리겠습니다. 이 설정을 위해서는 도메인이 필요합니다.
만약 배포하지 않은 디벨롭 레벨에서 프로젝트가 끝난다면 설정할 필요도, 설정할 수도 없습니다. 또한 Vercel, Netlify, AWS EC2, CDN에서 배포만 했다고 해도 연결할 수 없습니다. 보안상 도메인 소유권 인증을 해야 하므로, DNS 설정이 필수입니다. 이 점 유의하시기 바랍니다. 저는 GoDaddy에서 도메인을 구매하여 제가 배포한 앱과 연결해둔 상태이기 때문에 이를 전제로 하고 SMTP 설정을 어떻게 하는지 알려드리겠습니다.
Custom SMTP를 설정하지 않으면 Supabase에서 빌트인 이메일 서비스로 메일을 제공하긴 하지만, 같은 organization 내에 소속된 팀원들의 계정(Supabase 가입시 연결한 이메일)에만 메일을 발송해줍니다. 그래서 앱을 배포하고 다른 유저들이 서비스에 가입, 로그인하여 이용하게 만들려면 이 과정은 필수적입니다.
최종적으로는 이렇게 메일이 오는 것까지 완료되는 것이 목표입니다.
🌱 과정
https://supabase.com/dashboard/project
먼저 Supabase의 홈페이지에 접속해서 Dashboard로 들어온 다음 Project로 이동합니다. 좌측 사이드바 메뉴 하단부에 위치한 Project Settings를 클릭해주세요.
그럼 활성화된 사이드바에 중단부 CONFIGURATION 섹션이 위의 이미지와 같이 있을텐데 그 중에서 Authentication을 선택해줍니다. 그럼 Auth Settings가 맨 위에 나옵니다. 스크롤을 내려서 페이지의 중앙으로 이동해주세요.
그럼 이렇게 SMTP Settings라는 섹션이 나오게됩니다. 먼저 Enable Custom SMTP 토글을 활성화시켜줍니다.
Sender details
Sender Email
센더 이메일은 인증번호를 담은 메일을 발송할 때 발송자 이메일을 설정하는 곳입니다.
대부분의 서비스를 보면 noreply라는 이름을 설정해두므로 저도 이렇게 설정을 했습니다.
Sender name
센더 네임은 발송자의 이름으로 표시될 걸 설정하는 곳입니다.
여기서는 자신의 프로젝트, 서비스에 맞는 적절한 이름을 기입하시면 됩니다.
SMTP Provider Settings
Sender details 설정을 끝냈으니 SMTP Provider를 설정해야 합니다.
해당 설정은 Supabase에서 다른 이메일 전송 서비스를 연결하도록 해놨습니다.
제가 사용한 서비스 플랫폼은 Resend입니다. 처음엔 Mailgun이나 SendGrid로 시도를 해보았는데 Mailgun은 DNS 연결에 인증이 너무 오래걸리다가 실패했고, SendGrid는 twiio에서 제공하는 서비스인데 계정을 생성하려고 하니 보안 문제가 있다면서 로그인을 차단했습니다.. 그래서 Resend를 선택했던 비하인드 스토리가 있답니다..
본론으로 돌아가서 Resend는 SMTP Sender로 설정하기에 아주 좋은 서비스입니다. 개발자와 기업이 쉽게 이메일을 보낼 수 있도록 다양한 API와 SMTP 통합을 제공하며, 도메인 인증 과정이 간단하고 빠르며 설정 또한 직관적입니다. 제가 놀란 부분이기도 합니다. 도메인 인증이 거의 1분만에 완료되어서 진작에 Resend로 할 걸 하며 탄식을 했었죠ㅋㅋ
계정 생성
먼저 Resend의 계정을 생성해주세요. 생성하고 나서 API Keys라는게 생성될텐데 이걸 복사해서 어딘가에 보관해두시길 바랍니다.
계정을 생성하고 로그인을 해주세요. 그리고 왼쪽 사이드바의 메뉴에서 Domains를 눌러 이동합니다.
그럼 본문에 이렇게 나올텐데 +Add Domain을 눌러줍니다.
저는 이미 DNS를 연결해 둔 상태라 과정의 이미지를 제대로 가져오지 못한 점 양해부탁드립니다. 아마 도메인의 이름을 입력하고 REGION을 선택하는 페이지가 나올텐데요. REGION은 리스트 중에서 Tokyo가 우리나라에서 가장 가깝지만 변경할려면 Pro 이용권을 구매해야하므로 그대로 North Virginia를 사용하면 됩니다. 아무 문제없어요.
그렇게 도메인을 생성하고 나서 도메인 대시보드에서 내가 생성한 도메인을 클릭하면 위의 이미지 섹션이 포함된 상세 페이지로 이동하게 됩니다. DNS Records란 말 그대로 배포를 하면서 구매했던 도메인의 DNS Provider에 레코드로 등록해야하는 Resend의 레코드입니다. MX, TXT 타입으로 된 4개의 레코드 전체를 그대로 컬럼에 맞춰서 붙여넣어줍니다.
GoDaddy를 기준으로 하면 '신규 레코드 추가'라는 버튼을 눌러서 하나씩 추가해주면 됩니다.
DNS Provider에서 레코드를 모두 추가하고 Resend로 돌아와서 Verify 버튼을 눌러줍니다. 그럼 STATUS가 주황색으로 Verifying으로 변경된 다음 거의 한 1~2분만에 Verified도 바뀔 겁니다. 인증이 완료되면 SMTP 설정이 거의 완료된거나 다름 없는 셈입니다.
Supabase 탭으로 돌아옵니다. 이제 차례차례 이미지와 같이 값들을 넣어주시면 됩니다.
- Host: smtp.resend.com
- Port number: 465
- Minimum interval between emails being sent: 60 seconds
- Username: resend
- Password: Resend 계정 생성시 발급받은 API 키
그리고 저장해주세요. 그럼 모든 SMTP 설정을 마쳤습니다. 이제 배포된 앱으로 접속해서 이메일로 회원가입 테스트를 해보시고, 정상적으로 인증코드 메일이 오시는 걸 확인할 수 있을겁니다! 도움이 되었다면 좋겠습니다:)
