Today I Learn

[Next.js / Supabase] 이메일 로그인/회원가입 기능 구현

단추언니 2024. 10. 21. 18:00
반응형

Supabase Auth

Supabase Auth를 사용하면 인증 및 권한 관리를 간편하게 구현이 가능하다. 

지원하는 인증 방식에는 이메일 인증, Magic Link를 통한 비밀번호 없는 로그인, 전화번호를 통한 로그인, SNS로그인, 기업용 SSO등 다양한 방법으로 사용자 인증을 지원한다.

 

1. Confirmation URL 방식

- Web Client 에서 Supabase로 회원가입 요청

- Supabase에서 회원가입 처리 및 인증 링크가 담긴 이메일 전송


Authentication -> Email Templates 에서 정의된 템플릿을 사용하여 이메일을 보낼 수 있다. 

1. 유저는 이메일로 전송된 인증 링크를 클릭하여 로그인 할 수 있다.
 - 인증링크 = https://***.supabase.co/auth/v1/verify?token={tokenHash}&redirect_to={redirect_to}
 - supabase 서버에서 본인 인증을 마치고 redirect_to에 입력된 링크로 돌아오게 된다. 이때 code라는 searchParam을 넘겨주게 된다.
 - http://{site.com}/?code={code}
2. Web Client에서는 전송받은 code값을 활용하여 로그인 세션을 획득하게 된다.

## 2. 6-Digit OTP 방식

- Web Client 에서 Supabase로 회원가입 요청한다.
- Supabase에서 회원가입 처리 및 인증 코드가 담긴 이메일 전송한다.
  -  인증코드 = 6자리 인증코드
  - {.Token}템플릿 활용


1. 유저는 회원가입 창 하단에 있는 인증코드 입력란에 인증 번호를 입력한다.
2. Web Client에서는 해당 otp token값을 이용해 로그인 세션 획득한다.

 

반응형