[React-Native, Supabase] 사용자 로그인부터 회원 탈퇴까지.. 사용자 인증 기능 구현하기

트립쉐어 앱 개발에서 가장 많은 시간을 쏟은 로그인, 인증 기능 구현..🫠

프로그래머스에서 팀 프로젝트로 개발할 땐 마감 기한 내에 앱 개발을 완성해야 해서 우리의 주요 서비스에 집중했고 사용자 로그인 쪽은 최대한 간단히 구현했었다.

 

이제 앱 출시를 위한 개발을 하다보니 제대로 된 인증 기능을 구현해야 했다. 사용자 로그인/회원가입 기능을 구현하는 게 처음이었고 생각보다 많은 로직이 필요했다. 회원가입부터 로그인, 그리고 비밀번호를 까먹은 사용자를 위한 비밀번호 재설정 기능, 소셜 로그인 기능, 앱 내에서 비밀번호를 변경하는 기능, 회원 탈퇴 기능까지 구현할 게 많았다.

 

사실 사용자 인증과 관련된 기능들은 앱의 직접적인 관련이 없고, 앱의 핵심 요소도 아니지만 꼭 필요한 기본적인 요소이다.

보이지 않는 곳에서 열심히 일하고 있는 기능이랄까..

 

 

우선, 로그인이 필요한 모든 서비스에서 공통으로 필요한 기능들을 소개해보면

 

• 회원가입
• 로그인
• 간편 소셜 로그인 (선택)
• 아이디/비밀번호 찾기
• 비밀번호 재설정
• 회원 탈퇴

 

이런 기능들이 꼭 필요했다. 

 

우리 팀은 처음에 Firebase를 사용했는데 Firebase는 관계형 기반의 데이터베이스가 아닌 no-sql기반이다 보니 데이터 관리가 좀 불편했고, 관계형 데이터베이스에 익숙했기 때문에 결국 Supabase를 사용하기로 했다.

(그래서 Firebase-Authentication으로 구현했던 인증 쪽도 모두 Supabase로 바꿨다..🫠)

인증 쪽은 Firebase가 좀 더 간편했던 것 같다..

 

 

Supabase Auth

---

supabase는 auth.users에서 사용자를 관리한다.

그래서 별도의 user 테이블을 만들기 위해선 users라는 테이블 명을 사용할 순 없고 다른 명칭을 사용해서 테이블을 만들어야 한다.

auth users에는 Display Name, Email, Phone, Provider, Created, Last Sign In, User UID 컬럼이 있다.

Provider는 어떤 방식으로 로그인했는지 알 수 있다. (Email, Kakao ...)

회원 등록 시 자동 생성되는 User UID는 직접 만든 user_profiles 테이블의 id로 사용했다.

 

 

이메일로 로그인하기 (비밀번호 기반)

---

https://supabase.com/docs/guides/auth/passwords

Password-based Auth | Supabase Docs

 

비밀번호로 로그인하는 일반적인 회원가입/로그인부터 차근차근 구현했다.

React Native는 자바스크립트 언어 기반이기 때문에 공식 문서의 JavaScript 코드를 보며 적절한 함수를 사용하면 된다.

 

• 회원가입 

const { data: user, error } = await supabase.auth.signUp({
  email,
  password,
  options: {
    data: {
      name,
    },
  },
});

 

supabase auth에는 signUp 함수로 회원가입을 할 수 있다.

회원가입을 하면 auth.users에 사용자가 추가되고, 이를 기반으로 user_profiles 테이블에 사용자 정보들을 추가하는 로직이 필요했다.

이는 supabase의 trigger/function 기능을 사용했다.

 

수행할 함수(function)를 만들고 예를들어 Auth.users에 생성된 유저의 id, email 등의 정보를 가지고 있는 데이터를 user_profiles에 추가해라는 함수를 만들고 이를 트리거로 Auth.users에 데이터가 추가될 경우 방금 만든 함수를 수행한다. 는 정의가 필요하다.

 

supabase의 비밀번호 기반 이메일 로그인의 경우 이메일 인증을 해야 로그인 가능하게 할 건지 선택할 수 있다.

트립쉐어는 이 기능을 활용해 이메일 인증이 되었을 때 상태를 변경하여 로그인할 수 있도록 구현했다.

 

 

 

이메일을 인증하지 않은 사용자의 경우 로그인할 때 이메일 인증을 완료해달라는 모달도 구현했다.

 

https://supabase.com/docs/guides/auth/auth-email-templates

Email Templates | Supabase Docs

 

supabase엔 이메일 템플릿 기능이 있어서 어떤식으로 이메일을 보낼 지 커스텀할 수 있다.

비밀번호 재설정과 회원가입 템플릿이 따로 구분되어 있다.

 

• 회원가입 이메일 인증 템플릿

 

• 비밀번호 재설정 이메일 인증 템플릿

 

 

이메일 인증하기, 비밀번호 재설정 버튼을 누를 경우 RedirectTo를 설정해놔서 앱 내의 지정한 페이지로 이동하게 된다.

앱의 링크는 React-Native의 딥링크 기능을 사용해서 웹에서 지정 URL로 페이지를 이동하듯이 앱도 지정한 페이지로 이동할 수 있다.

회원가입 후 이메일 인증의 경우엔 로그인 페이지로 이동하도록 하였고, 비밀번호 재설정의 경우엔 이메일 인증이 완료되었으니 비밀번호를 재설정할 수 있는 페이지로 이동되게 구현했다.

 

참고로 이메일 인증의 경우, supabase 무료 버전은 이메일 전송 횟수에 제한을 두고 있다.

한시간에 30회라고 하는 데 한 시간에 2번밖에 전송이 안됨... 이메일 인증 횟수가 많다고 잠시 후에 하라는 알림이 뜬다...

 

 

이 문제 때문에.. supabase에 문의를 했으나 PRO 버전으로 올리는 게 좋다는 답변이 왔고.. 앱을 출시하게 되면 회원가입에 치명적인 문제가 되므로 PRO 버전으로 업데이트할 지 팀원들과 진지하게 고민중이다.

 

** 추가

이메일 인증 메일에 대해선 다른 플랫폼을 사용하기로 결정했다. supabase에서 추천하는 서비스 중 하나를 골라 사용했다.

resend라는 이메일 전송 API를 제공하는 서비스인데 도메인만 있으면 무료로 사용이 가능했다.

그래서 resend 사용을 위해 트립쉐어 도메인을 구입했다.

https://resend.com/docs/dashboard/emails/introduction

Introduction - Resend

 

 

 

카카오로 로그인하기

---

카카오로 로그인하기의 경우엔 카카오 개발자 페이지에서 설정이 필요하다.

https://developers.kakao.com/

Kakao Developers

 

카카오 로그인의 경우 supabase docs에서 참고했다.

 

https://supabase.com/docs/guides/auth/social-login/auth-kakao

Login with Kakao | Supabase Docs

 

react-native에서 설정하는 방법은 따로 나와있지 않지만 JavaScript 언어를 사용하므로 문서에 나온 JavaScript 문법을 쓰면 된다.

await supabase.auth.signInWithOAuth({
  provider,
  options: {
    redirectTo: `http://example.com/auth/callback`,
  },
})

 

이런식으로 provider를 'Kakao'로 지정해서 카카오 로그인을 할 수 있다.

카카오 개발자 페이지와 Supabase에서 설정한 API 등등 여러 세팅해야 할 게 많으니 다음 글에서 더 자세히 설명하는 게 좋을 것 같다.

아무튼 연결은 잘 했는데 iOS 문제인건지 (테스트를 xcode에서 함) 웹뷰도 잘 안되고 딥링크 설정도 안돼서 헤메다가...

다른 팀원분이 안드로이드에서 딥링크 연결해서 푸시알림 구현한 거 참고해서 안드로이드에서 성공적으로 카카오 로그인을 구현할 수 있었다.

카카오로 로그인

 

카카오 인증의 경우 별도 회원가입 없이 최초 한 번 동의항목에 동의 후 자동 회원가입/로그인이 된다.

이런 점은 편리했으나 한 가지 문제가 있었다..

바로 약관 동의에 대한 처리였다.

 

약관에 대한 내용은 예시입니다. (실제와 다름!!)

 

회원가입을 할 땐 약관에 필수로 동의해야만 가입을 할 수 있도록 구현했는데

카카오의 경우 우리 앱의 약관을 읽을 새도 없이 로그인 되기 때문에 어떻게 동의하고 가입을 시킬지에 대한 고민이 있었다.

 

1. 카카오 개발자 서비스에서 직접 약관 동의 항목을 URL로 넣기
2. 가입 후, 약관 동의 페이지로 넘어가서 약관 동의를 해야만 회원가입/로그인 되게 하기

1번을 시도하려 했는데 이 당시엔 사업자 등록을 하지 않아 사업자 등록번호가 없었다.

그래서 2번을 구현하기로 했다.

 

간략히 이런 로직으로 구현해 보았다.

카카오로 로그인 -> 카카오의 정보 동의항목 동의 -> 트립쉐어 앱 내의 약관동의 페이지로 Redirect (이 상태에선 user의 status가 INACTIVE로 로그인할 수 없는 상태) -> 약관 동의하면 ACTIVE 상태로 변경되어 로그인

 

위와 같은 로직으로 구현했는데 문제가 또 생겼다..

 

 

만약 사용자가 약관에 동의하지 않는다면..?

 

그렇다면 사용자는 이 앱을 사용하지 않겠다는 의미로 알고 즉시 유저의 개인 정보가 삭제되어야 한다.

회원가입의 경우 약관에 동의하지 않으면 회원가입이 불가해 유저의 정보가 DB에 저장되지 않기 때문이다.

하지만 카카오 로그인의 경우 카카오의 동의항목에만 동의하면 바로 유저의 정보가 추가되기 때문에 그 유저를 다시 삭제하는 과정이 필요했다.

 

 

카카오로 최초 로그인 시, (Auth.users에 추가될 경우) 약관 동의 페이지로 이동하게 되는데

미동의를 눌렀을 경우 Auth.users에서 사용자를 삭제하는 함수와 트리거를 설정했는데... supabase의 Auth는 함수로 사용자를 삭제할 수가 없었다...!!!!

 

supabase 페이지에서 수동으로 삭제하는 방법밖에 없다고 하였고.. 매번 확인하며 수동으로 삭제하기엔 너무 번거로운 과정이었다.

일단은... 사용자가 약관은 꼭 봐야하는 중요한 내용이라고 생각해서 일단 미동의 버튼을 따로 만들지 않고 무조건 동의버튼을 눌러야만 트립쉐어의 앱을 사용할 수 있도록 했다.

 

두 번째 문제는 사용자가 뒤로가기 했을 때 홈으로 이동한다는 문제였다... 이미 카카오 로그인으로 인증 토큰을 가진 사용자이기 때문에 약관 동의 페이지에서 뒤로가기 할 경우 홈으로 이동되는 문제가 있었다. 이는 React-Native의 BackHandler라는 기능으로 해결했다. 처음엔 react-navigation 라이브러리에서 옵션을 설정하는 방식으로 구현했는데 다른 페이지에서도 뒤로가기가 안되는 이슈가 있어서 BackHandler를 통해서 약관 동의 페이지에 이벤트를 적용했다.

 

useEffect(() => {
  const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
    return true;
  });
  return () => backHandler.remove();
}, [])

 

 

일단 이러한 동의 방식은 당장 급하게 설정해 둔거라,, 추후에 1번 방법으로 사업자 등록증을 발급 받고 카카오 개발자에서 인증이 되면 카카오 동의항목 페이지에 우리의 약관을 URL로 넣는 방법을 결국 진행하기로 했다.

 

(본격 출시 전에 수정될 예정이다.)

 

 

아이디/비밀번호 찾기

회원가입이 필요한 앱의 경우 꼭 필요한 기능으로 비밀번호 찾기, 회원탈퇴 기능이 있다.

우리 앱의 경우 아이디가 이메일이기 때문에 별도의 아이디 찾기 기능은 제공하지 않고 비밀번호 찾기라기 보다는 재설정을 할 수 있는 기능을 제공한다.

 

비밀번호 재설정의 경우, 사용자가 로그인 하려는데 비밀번호를 까먹었을 때 재설정할 수 있는 기능과 앱 내의 개인정보 설정에서 비밀번호를 변경할 수 있는 총 두 가지 경우의 로직이 필요했다.

앱 내에서 비밀번호를 변경할 땐 이미 사용자가 로그인했기 때문에 별도의 이메일 인증을 거치지 않았지만 로그인 전에 비밀번호를 변경하려면 이메일 인증 과정이 필요했다.

 

supabase에서 비밀번호를 재설정할 수 있는 함수를 제공하고 있다.

await supabase.auth.resetPasswordForEmail('hello@example.com', {
  redirectTo: 'http://example.com/account/update-password',
})

 

이메일을 기반으로 비밀번호를 변경할 수 있다.

 

 

 

가입했던 이메일을 입력하고 비밀번호 재설정 버튼을 누르면 위에서 만들었던 비밀번호 재설정 템플릿 형식으로 이메일 전송이 된다.

메일에서 "비밀번호 재설정" 버튼을 클릭하면 다시 우리 앱의 비밀번호 재설정 페이지로 이동한다.

 

(비밀번호의 validation 관련해서 함수를 만들어놔서 매번 함수를 써서 체크하고 있다.)

 

비밀번호 재설정의 경우 내가 인증에 관해 감이 없어서 너무 너무 힘들었다..

당연히 로그인 전에 이루어지는 거라 사용자 토큰이 필요하다고 생각을 못했는데 이메일을 인증하면 사용자의 토큰을 받게되고 이를 통해

앱의 최상단에서 getSession()을 통해 로그인이 되어버렸다. 로그인을 한 사용자의 경우 바로 홈으로 이동하도록 구현해둬서 이를 어떻게 해결해야 할지 고민이 너무 많았다. 

 

비밀번호 재설정의 경우 로그인 페이지처럼 public한 페이지라고 생각했는데 인증을 했으니 인증된 사용자들만 이용할 수 있는 페이지에 넣어야 했다. 그리고 변경 후에는 다시 사용자가 새로운 비밀번호로 로그인하는 게 자연스럽지 않을까 생각해서 비밀번호 변경 -> 로그아웃 로직을 넣어서 다시 로그인하도록 구현했다.

 

 

회원 탈퇴

---

우리는 커뮤니티 앱이라 사용자가 탈퇴했을 경우 데이터를 어디까지 지워야할 것인가에 대한 고민이 많았다.

유저 row를 아예 삭제해버리자는 의견도 있었고,, 유저와 관련된 데이터들이 많아 그건 너무 위험한 방식이라 생각했다.

유저를 지우면 유저와 관계를 가지고 있는 게시글, 댓글 등에서 참조 무결성 조건에 어긋나게 될 것이라 판단하였다.

 

다른 앱들은 어떻게 구현했을까?

 

우선.. 회원탈퇴를 찾기가 너어무 어렵다..!! ㅋㅋㅋㅋ

네이버의 경우 탈퇴하려 했는데 결국 못찾아서 고객센터에서 검색해서 방법을 알게 되었다.

내 닉네임 선택 > 내 프로필 선택 > 맨 하단에 회원탈퇴 버튼 아주 작게..

 

아무튼 네이버의 경우 게시판형 게시물은 유지되는 방식으로 회원 탈퇴가 된다는 안내 문구가 있었다.

 

이를 참고해서 우리 앱도 게시물은 유지하되 회원의 개인 정보를 (이메일) 6개월 내에 삭제되도록 구현했다.

회원의 개인 정보를 바로 삭제하는 것이 아닌 6개월인 이유는 만약 사용자가 부적절한 게시글을 올려 신고를 당했다면 그에 따른 사용자 정보가 필요하기 때문에 6개월 보관한다는 목적이다.

이메일을 제외한 개인 정보인 위치의 경우 탈퇴하면 바로 삭제한다. 유저의 고유 아이디를 삭제하는 게 아닌 개인 정보가 포함된 컬럼들의 데이터를 삭제하는 것으로 다른 테이블에서 참조 무결성 조건을 유지할 수 있다.

 

 

 

 

 

---

사용자의 인증은 크게 이런 형식으로 이루어진다.

개인 정보를 사용하도록 약관에 동의해 준 사용자들을 위해서 개인 정보를 소중히 다뤄야 하고 보안에 특히 신경이 쓰일 수 밖에 없는 것 같다. 그래서 그런지 구현도 정말 힘들었다...🫠

 

아직 개선해야 할 것도 많고 보완해야 할 항목들도 많다. 그래도 이제 진짜 완성도 있는 앱이 된 것 같아서 뿌듯하다.

그리고 이를 통해.. 회원가입 할 때 약관을 읽는 습관이 생겼다고 한다.. (평소엔 그냥 체크하고 넘어갔었는데 다른 앱들은 약관 동의 어떻게 썼나? 구경하는 재미도 있고 ㅎㅎ 재밌다)