-
supabase: auth로 회원가입 시 자동으로 user 데이터 추가하기프로젝트 캠프: Next.js 과정 2기 2024. 8. 26. 00:04728x90
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
728x90'프로젝트 캠프: Next.js 과정 2기' 카테고리의 다른 글
[Next.js] next Image 컴포넌트 사이즈 경고 해결 (1) 2024.09.30 유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기: 프로젝트 3주차 후기 (0) 2024.08.25 유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기: 프로젝트 1~2주차 후기 (0) 2024.08.18 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 (0) 2024.07.28 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - Memoization (0) 2024.07.28