[Supabase] 회원가입 인증 메일로 커스텀 리다이렉트 경로 설정하기

상황

Supabase를 활용해 이메일 회원가입 & 로그인 기능을 개발하는 중이었다.

Supabase의 이메일 회원가입 플로우는 아래와 같다.

1. supabase.auth.signUp API에 회원가입할 이메일, 비밀번호, 리다이렉트 주소를 넣어 API를 요청한다.
2. Supabase 서버가 해당 이메일에 인증 링크가 포함된 회원가입 인증 메일을 발송한다.
(이 때 인증링크는 기본적으로 http://localhost:3000으로 설정된다.)
3. 사용자가 인증 메일 내 링크를 클릭하면 Supabase 서버에 해당 사용자의 인증 여부가 저장된다.
4. supabase.auth.signInWithPassword API를 통해 이메일, 비밀번호를 입력해 로그인한다.
5. Supabase 서버가 payload에 사용자 정보를, header에 JWT 토큰을 담아 응답한다.
6. 클라이언트 측에 로그인 완료처리를 한다.

이 때,  2번 과정에서 사용자에게 전송되는 메일 내용에 있는 인증 링크는 기본적으로 서비스 주소( http://localhost:3000)으로 설정된다.

하지만 필자는 메일 내 담긴 링크를 클릭하면 사용자가 서비스 주소(localhost:3000)로 방문하는 것이 아닌 특정 URL로 리다이렉트 되도록 하고싶었다.

(ex) 메일 내 링크 클릭 시 인증 + 회원가입을 위한 추가 정보 작성 페이지로 리다이렉트)

이 글에서는 위를 설정하기 위한 방법에 대해 살펴본다.

 

 

코드

// 회원가입
async function signUpNewUser() {
    const { data, error } = await supabase.auth.signUp({
        email: "{회원 가입할 이메일}",
        password: "{로그인 시 입력할 비밀번호}",
      options: {
        emailRedirectTo: '{인증 메일로 보낼 리다이렉트}',
      },
    })
}

// 로그인
async function signInWithEmail() {
    const { data, error } = await supabase.auth.signInWithPassword({
        email: "{로그인할 이메일}",
        password: "{로그인 비밀번호}",
    });

    console.log("data : ", data);
}

 

 

해결 방법

해결 방법은 아주 간단하다.

대시보드 > Authentication > URL Configuration 에서 간단한 수정을 하면 된다.

위에 있는 URL 입력칸(사이트 URL)은 회원가입 API 요청 시 리다이렉트 URL이 별도로 등록되지 않았을 경우 사용할 리다이렉트 URL이다.

// 리다이렉트 URL 지정 X
const { data, error } = await supabase.auth.signUp({
    email: "{회원 가입할 이메일}",
    password: "{로그인 시 입력할 비밀번호}",
    // 인증 시 기본값인 localhost:3000 으로 리다이렉트
})

// 리다이렉트 URL 지정 O
const { data, error } = await supabase.auth.signUp({
    email: "{회원 가입할 이메일}",
    password: "{로그인 시 입력할 비밀번호}",
  options: {
    emailRedirectTo: '{인증 메일로 보낼 리다이렉트}',
    // 인증 시 위 URL로 리다이렉트
  },
})

 

하지만 API 인수로 리다이렉트할 URL을 추가하여 전달한다고 인증 시 해당 URL로 리다이렉트 되지 않는다.

리다이렉트할 URL을 추가하기 위해서는 아래에 있는 'URL 리디렉션' 부분은에서 허용할 리다이렉션 URL을 추가해야 한다.

허용 리다이렉션 URL을 잘 추가했다면 문제가 해결될 것이다.

 

끝.