Next.js × Supabase Auth로 비밀번호 재설정 기능을 구현하며 확인한 사항

Next.js와 Supabase Auth를 사용하고 있는 틈새 공부 앱에 비밀번호 재설정 기능을 구현했습니다.

로그인 기능을 만든 후, 뒤로 미루기 쉬운 것이 바로 "비밀번호를 잊었을 때의 동선"입니다.

하지만 학습 이력이나 즐겨찾기, 복습 기능을 사용하는 앱에서는 로그인을 할 수 없게 되는 것은 상당히 큰 스트레스가 됩니다.

이번에는 Next.js × Supabase Auth로 비밀번호 재설정 기능을 구현할 때 확인한 사항들을 정리합니다.

이번에 구현한 흐름은 다음과 같습니다.

1. 로그인 화면에서 "비밀번호를 잊으셨나요?"로 이동
2. 이메일 주소 입력
3. Supabase Auth에서 재설정 메일 발송
...

구현 자체는 심플하지만, 실제로 만들어 보니 리다이렉트 URL(Redirect URL)이나 에러 메시지, 메일이 도착하지 않을 경우의 표시 등 확인해야 할 점이 몇 가지 있었습니다.

먼저, 사용자가 이메일 주소를 입력하는 페이지를 준비합니다.

예시로 다음과 같은 페이지를 만듭니다.

/reset-password

이 페이지에서는 이메일 주소를 입력하고, Supabase Auth의 resetPasswordForEmail을 호출합니다.

const { error } = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: `${window.location.origin}/update-password`,
});

redirectTo에는 사용자가 메일 내 링크를 클릭한 후에 돌아올 URL을 지정합니다.

이번에는 새로운 비밀번호를 설정하는 페이지로서 다음 URL을 사용했습니다.

/update-password

메일 발송 후에는 성공·실패 메시지를 표시합니다.

예를 들어, 성공 시에는 다음과 같이 합니다.

비밀번호 재설정용 메일을 발송했습니다.
메일 내의 링크를 통해 새로운 비밀번호를 설정해 주세요.

여기서 주의한 점은 "등록된 이메일 주소인지 여부"를 너무 자세하게 표시하지 않는 것입니다.

보안상 이메일 주소의 존재 확인으로 이어질 수 있는 문구는 피하는 것이 좋다고 생각했습니다.

따라서 에러 표시도 가능한 한 일반적인 표현으로 했습니다.

메일 발송에 실패했습니다. 잠시 후 다시 시도해 주세요.

구현 시 막히기 쉬운 부분이 리다이렉트 URL(Redirect URL)입니다.

로컬 개발 환경과 운영 환경의 URL이 다르기 때문에, Supabase 측에서도 허용할 URL을 설정해 두어야 합니다.

확인한 URL은 다음과 같은 것들입니다.

Netlify로 공개하고 있는 경우에는 Netlify의 URL도 설정 대상이 됩니다.

재설정 메일의 링크를 클릭해도 앱으로 돌아오지 않는 경우에는 우선 Supabase 측의 리다이렉트 URL 설정을 확인하는 것이 좋습니다.

다음으로 새로운 비밀번호를 입력하는 페이지를 만듭니다.

/update-password

여기서는 사용자가 새로운 비밀번호를 입력하고, Supabase Auth의 updateUser를 호출합니다.

const { error } = await supabase.auth.updateUser({
password: newPassword,
});

성공하면 로그인 화면으로 되돌립니다.

router.push("/login");

구현 시에는 다음과 같은 입력 체크도 넣었습니다.

- 비밀번호가 비어 있지 않은지
- 확인용 비밀번호와 일치하는지
- 최소 글자 수를 충족하는지

비밀번호 재설정에는 몇 가지 에러 케이스가 있습니다.

확인한 케이스는 다음과 같습니다.

- 이메일 주소가 비어 있음
- 이메일 형식이 부적절함
- 메일 발송에 실패
...

에러 발생 시에는 가능한 한 사용자가 다음에 무엇을 해야 할지 알 수 있는 문구로 작성했습니다.

예를 들어, 링크 만료의 경우에는 다음과 같이 합니다.

링크의 유효 기간이 만료되었을 가능성이 있습니다.
다시 한번 비밀번호 재설정 메일을 발송해 주세요.

단순히 "에러가 발생했습니다"라고만 하면 사용자가 다음 단계로 진행할 수 없습니다.

인증 관련 업무에서는 에러 문구도 상당히 중요하다는 것을 느꼈습니다.

구현 후 확인한 항목들입니다.

• 로그인 화면에서 리셋 신청 페이지로 이동할 수 있다
• 이메일 주소를 입력하여 전송할 수 있다
• 리셋 메일이 도착한다
  ...

특히 중요한 것은 마지막 로그인 확인입니다.

비밀번호 업데이트가 성공한 것처럼 보여도, 실제로 새로운 비밀번호로 로그인할 수 있는지 확인하지 않으면 안심할 수 없습니다.

비밀번호 리셋은 겉보기에는 평범한 기능입니다.

하지만 사용자 관점에서는 상당히 중요합니다.

비밀번호를 잊어버려도 다시 돌아올 수 있다.

학습 이력이나 즐겨찾기, 복습 기능을 다시 사용할 수 있다.

이것은 앱을 안심하고 사용하게 만들기 위한 토대라고 생각했습니다.

새로운 자격증 코스를 추가하는 것과 같은 눈에 띄는 기능도 중요하지만, 이런 인증 관련 개선도 그만큼 중요합니다.

Next.js × Supabase Auth로 비밀번호 리셋을 구현할 때는 다음 사항들을 확인하는 것이 좋습니다.

- resetPasswordForEmail 로 이메일 전송하기
- redirectTo 에 재설정 페이지 지정하기
- Supabase 측에서 리다이렉트 URL (Redirect URL) 허용하기
...

비밀번호 리셋은 화려한 기능은 아닙니다.

하지만 사용자가 앱으로 다시 돌아올 수 있도록 만드는 중요한 기능입니다.

개인 개발에서도 이런 작은 안심 요소들을 조금씩 갖추어 나가고 싶습니다.