[Supabase & React] 회원가입시 자동으로 유저 테이블 업데이트 # 사용자 관리 튜토리얼 (3)

💡 auth.users

Supabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, auth.users에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다.

 

📍 커스텀 유저 테이블 (직접 만든 유저 테이블)

supabase에 기본으로 존재하는 `auth.users`테이블에 데이터가 추가될 때 직접 생성한 회원 테이블(이하 `public.userInfo`)의 정보도 같이 추가할 수 있다. 굳이 또 다른 사용자 테이블을 생성하는 이유는 사용자의 추가적인 데이터를 관리하기 위함이다. 예를 들어 `auth.users` 에서 기본적으로 관리되지 않는 사용자의 이름, 닉네임, 생년월일 등의 정보가 있을 수 있다.

 

[Supabase & React 회원가입 구현 #1]

[Supabase & React 로그인 구현 #2]

---

📍 유저 테이블 생성 

우선 `public.userInfo` 테이블을 생성한다. 이름은 뭐 자유롭게 알아서 하면 된다. 

 

SQL editor

 

SQL editor메뉴로 이동한 다음 아래 내용을 붙여놓고, `Run` 버튼을 누른다. 

create table userInfo(
  id uuid references auth.users on delete cascade not null primary key,
  email text,
  username text
);

• userInfo라는 테이블을 생성한다.
• 자동으로 `public` 영역에 생성된다. (`public.userInfo`)
• id, email, username 이라는 컬럼을 생성한다.
• id는 `auth.users`의 id를 참조한다.
• auth.users의 row가 삭제되면 연결된 row도 같이 삭제된다.

 

Table Editor

위의 방법이 복잡하다면 Table editor로도 생성이 가능하다.

 

1. Table Editor -> Create a new Table

 

2. 외래키 설정 (참조)

 

1. Columns의 id 부분에 체인처럼 생긴게 있다. 그걸 눌러주자. 

2. `auth` schema 선택

3. `users` table을 선택

4. `public.userinfo`의 id가 `auth.users`의 id를 참조하도록 선택

5. 스크롤을 내리면 Action if refer.... 가 있는데 `Cascade` 를 선택 (삭제되면 같이 삭제됨)

6. save

 

 

📍 트리거 생성 (SQL editor)

트리거란 데이터 베이스에서 어떤 액션이 실행되었을 때 추가적으로 실행될 동작을 정의하는 것이라고 대충 생각하면 된다. 

 

SQL editor로 아래 코드를 실행한다.

create policy "public profiles are viewed by everyone." on userInfo
for select using(true);

create policy "Users can insert their own profile." on userInfo
for insert with check(auth.uid()=id);

create function public.handle_new_user()
returns trigger as $$
begin
insert into public.userInfo(id, email, username) -- (2) public.userInfo에 삽입
values (new.id, new.email, new.raw_user_meta_data->>'username'); -- (1) auth.users의 id, email, username을
return new;
end;

$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

다른거 다 필요 없고 주석 처리 된 부분만 확인하면 된다. 

 

(1) 회원가입시 `auth.users`에 저장된 `id`, `email`, `username`을  

(2) `public.userInfo`에  삽입한다.

 

 

username , nickname 등 추가 정보 저장하기

위 코드의 `username` 은 어디에서 오는 것일까? 마음이 아프지만 갑자기 뿅하고 `username` 이 생기거나 하는 일은 발생하지 않는다. 다행인건 어려운 작업은 아니라는 것이다. 

 

`username` 이 어디에서 오는지를 보려면 맨~처음으로 돌아가서 회원가입하는 코드를 보면 된다. 회원가입할 때 email, password 외에도 다른 정보를 넣어줄 수 있으며 `options.data` 안에 넣어주면 된다. 그러면 `auth.users` 의 `raw_user_meta_data` 에서 확인할 수 있다.

 

회원가입 코드

  const signUp = async () => {
    const { error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: {
          nickname: generateRandomNickname()
        }
      }
    });

위의 코드에서는 `username`이 아닌 `nickname`이라 되어 있다. 대충 랜덤 닉네임을 생성해서 `options.data.nickname`에 담아주고, 회원가입할 때 전달한다. 그러면 위에서 작성한 트리거, 함수로 인해 `nickname` 도 뿅하고 `public.users` 에 업데이트 된다. 

 

SQL editor는 다음과 같이 작성하면 된다.

begin
insert into public.userInfo(id, email, nickname) -- (2) public.userInfo에 삽입
values (new.id, new.email, new.raw_user_meta_data->>'nickname'); -- (1) auth.users의 id, email, name을
return new;
end;

 

 

🚨 SQL 함수 수정

함수를 처음에 정의하고난 뒤에 수정사항이 있을 경우 SQL editor에서 다시 `Run` 할 수 없다. (다른 방법이 있을수도 있지만 난 모른다.)

 

그럴땐 Database의 Function 메뉴에서 수정할 수 있다.

오른쪽 점 세개 아이콘 누르고 `Edit function` 을 클릭하면 SQL editor가 열린다.

 

거기서 수정하면 된다. 단순 컬럼명의 변경 뿐만 아니라 컬럼을 추가, 제거 할 수 있다.