supabase 회원가입하기 (with flutter)

이우길·2024년 5월 8일

flutter pyc

flutter

목록 보기

6/9

supabase 회원가입하기 (with flutter)

Goal

Supabase와 이메일을 이용하여 회원가입 처리하기

개요

Flutter를 이용하여 토이프로젝트를 진행할 때 회원가입에 대한 처리를 하기 위해 supabase를 이용하였으며 해당 내용을 글로 정리하기 위함.

회원가입 흐름 (with 이메일)

supabase에서는 여러가지의 회원가입 방법을 제공해주지만 필자는 이메일을 이용하여 회원가입에 대한 처리를 하였다.

supabase를 이용하여 회원가입을 하는 Process는 아래와 같다.

유저의 정보 입력 ==> 이메일 중복 가입 Validation ==> 회원가입 완료, 사용자의 이메일 검증

1. 유저의 정보 입력

유저에가 input으로 받을 정보는 아래와 같다. 회원가입에 필요한 정보들은 이메일, 비밀번호 이 2가지를 필수로 받는다.

추가적으로 사용자의 이름을 입력받아 supabase의 auth.users테이블에 raw_user_meta_data에 넣을 것이다. (raw_user_meta_data에는 추 후 oauth를 이용할 때 유저의 정보들이 이 column으로 들어온다.)

먼저 구현 된 UI는 아래와 같다.

총 3개의 input을 입력 받도록 하고 form 위젯을 이용하여 validation을 진행한다.

2. 이메일 중복 가입 Validation

이메일을 이용하여 회원가입을 할 때 사용자의 이메일 검증이 정상적으로 완료되지 않으면 동일한 이메일로 계속해서 회원가입이 진행된다. (비밀번호를 다르게 입력하여도 초반에 입력한 비밀번호는 초기화 되지 않는다.)

즉 같은 이메일로 supabase에서 제공하는 auth.signUp를 호출해도 별도의 exception이 존재하지 않는다는 것이다.

// 이 부분을 계속해서 통과한다. signUp이 별도의 exception을 발생시키지 않음.
final response = await onSubmit() async {
  final response = await supabase.auth.signUp(
    email: email,
    password: password,
    data: {'full_name': name},
  );
  // ...
}

github-issue를 보면 이슈가 닫혔다 열렸다를 계속 반복하고 있지만 해당 이슈의 댓글 중 선택한 해결방법은 아래와 같다. (해결방법-댓글)

final isNotExist = response.user?.identities != null;
final isEmptyList = response.user!.identities!.isNotEmpty;
if (isNotExist && isEmptyList) {
  // already email exists
}

auth.signUp을 호출하여 response를 얻을 수 있으며 response의 타입은 supabase에서 제공하는 AuthResponse타입이다.

response에는 user라는 property가 있고 user안에 identities라는 property가 있다.

결론은 identities를 이용하여 validation 처리를 할 수 있다.

identities의 배열이 비어있다. -> 이미 회원가입이 되어있는 User다.
identities의 배열이 비어있지 않다. -> 회원가입이 가능하다.

3. 회원가입 완료, 사용자의 이메일 검증

위와 같이 회원가입을 하게 되면 데이터베이스(pg)의 auth.users테이블에 한 개의 row가 생성되게 된다.

이 때 생성된 raw_user_meta_data의 column을 확인해보면 jsonb형식으로 데이터가 들어가 있는데 json 데이터 중 key가 email_verified인 프로퍼티가 있을 것이다. (이 column에 회원가입 시 입력받은 이름이 포함되어있다.)

또한 그 값이 false로 되어 있을텐데 아직 사용자 이메일의 유효성 검증이 통과하지 않았다는 것이다.

해당 값을 true로 변경하기 위해서는 유저가 회원가입 시 입력한 이메일의 메일함에서 컨펌 이메일의 링크를 클릭하면 된다.

추가로 이메일이 검증되어 있지 않은 상태로 로그인을 시도하면 Email not confirmed 에러 메세지를 확인할 수 있다.

컨펌이메일은 아래와 같으며 auth.signUp이 호출되면 발송된다.