프로젝트 캠프: Next.js 과정 2기

supabase: auth로 회원가입 시 자동으로 user 데이터 추가하기

hanlabong 2024. 8. 26. 00:04
728x90

supabase는 보안상의 이유로 api로는 Auth 스키마를 접근할 수 없다.따라서 우리는 유저의 데이터를 사용하기 위해서는 새로운 user 테이블을 생성해야 한다.

 

1. userinfo 테이블 만들기

반드시 설정해야 하는 것

  • Enable Row Level Security 활성화
    • 이걸 활성화하면 보안적인 문제가 생길 수 있기 때문에 활성화하지 않는 것이 좋다.
    • 대신 정책 설정을 하자.
  • user_id 컬럼을 추가하고, 외래키로 설정해서 auth.users의 id와 연결한다.
  • Action if referenced row is removed - Cascade로 설정

2. function 작성하기

1. SQL editor

create function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = ''
as $$
begin
  insert into public.userInfo (user_id, name, profile_image)
  values (new.id, new.raw_user_meta_data ->> 'name', new.raw_user_meta_data ->> 'avatar_url');
  return new;
end;
$$;

2. Dashboard

 

=>

userinfo 테이블의 user_id, name, profile_image에 새로운 유저의 id와 메타데이터의 name, avatar_url을 삽입한다는 의미의 코드다.

 

처음에는 avatar_url이 아닌 picture를 사용했는데 확인해보니 google 로그인에는 avatar_url과 picture가 모두 있지만 kakao 로그인에는 avatar_url만 존재했기 때문에 picture가 아닌 avatar_url을 사용하는 것으로 변경했다.

 

3. trigger 생성 - SQL edictor

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

 

함수를 잘못 작성해서 trigger가 실패하게 된다면 회원가입 자체가 안되는 문제가 발생할 수 있기 때문에 함수를 잘 확인하자!!

다행히 함수를 잘못 작성하더라도 dashboard에서 쉽게 수정할 수 있지만 그래도 당황해서 진땀빼지 말고 잘 확인하자...

 

작성자는 트리거 등록 후 회원가입이 안돼서 식은 땀을 흘리며 트리거를 삭제해봤지만 결론은 함수의 오타로 인한 문제를 발견하고 스스로에게 너무 화가 났다고 한다...

 

만약 트리거를 제거하고 싶다면

drop trigger on_auth_user_created on auth.users;

위의 코드를 실행시키면 된다.

 

결과

function 등록 확인

trigger 등록 확인

회원가입 후 데이터 추가 확인

성공!!

참조

https://supabase.com/docs/guides/auth/managing-user-data?queryGroups=language&language=js

 

User Management | Supabase Docs

View, delete, and export user information.

supabase.com

 

728x90