supabase Auth와 커스텀 테이블 연동

상현·2024년 1월 4일
2
post-thumbnail

필요성

supabase에서 로그인시 Authentication 에서 제공하는 정보 외 유저의 추가 정보를 기입 및 수정 하기 위해 테이블을 생성하고, 그 테이블에 정보를 담아야 했다.

이메일로 회원가입시에는 회원가입할 때 테이블에 생성된 유저 정보를 기입하면 됐지만, OAuth 기능을 이용하여 소셜로그인을 할 경우 이가 불가능하다.

매번 로그인 할 때마다 테이블에 유저 정보가 있는지 검색하고, 넣는 것은 불필요한 로직이 들어가고, 복잡하게 느껴졌다.

그래서 supabase(정확히는 PostgreSQL..?)에서 제공하는 Function 기능을 이용해 Auth에 Trigger 함수를 걸어 해결할 수 있었다.

profiles 테이블 생성

테이블 이름은 users 등 원하는 이름으로 지어주면 된다. 그리고, 추가로 유저 정보를 관리할 컬럼들을 명시하고 생성한다.

나같은 경우는 닉네임을 나타내는 username, 프로필 이미지인 avatar_url과 email을 받았다.

create table
  public.profiles (
    id uuid not null,
    username text null,
    avatar_url text null,
    email text null,
    constraint profiles_pkey primary key (id),
    constraint profiles_id_fkey foreign key (id) references auth.users (id) on delete cascade
  ) tablespace pg_default;

중요한 점은 id와 supabase auth의 id와 외래키로 묶어줘야 한다는 것이다!

Trigger Function 생성

이제 supabase Auth에 데이터가 Insert되면 우리가 생성한 테이블에 데이터가 마찬가지로 Insert되도록 해보자

-- inserts a row into public.profiles
create function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  -- new에는 Auth에 Insert된 Row가 들어있다.
  
  -- oAuth (구글, Giuthb 등)로그인 할 경우 닉네임이 full_name 혹은 username으로 들어온다.
  IF new.raw_user_meta_data ->> 'full_name' is not null then
  insert into public.profiles (id, username, email, avatar_url)
  values (new.id, new.raw_user_meta_data ->> 'full_name',
   new.email, new.raw_user_meta_data ->> 'avatar_url');
  return new;
  end IF;

 -- 따라서 여러 경우로 분기처리를 해준다.
  IF new.raw_user_meta_data ->> 'username' is not null then
  insert into public.profiles (id, username, email, avatar_url)
  values (new.id, new.raw_user_meta_data ->> 'username',
   new.email, new.raw_user_meta_data ->> 'avatar_url');
  return new;
  end IF;
end;
$$;

-- trigger the function every time a user is created
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

혹시 잘못 생성한 것 같다면 다음 명령문을 쳐주면 된다.

drop function handle_new_user() cascade;
profile
프론트엔드 개발자

2개의 댓글

comment-user-thumbnail
2024년 7월 30일

정말 감사합니다 몇일동안 혼자 끙끙거리면서 찾고있었는데 ㅠㅠ 너무 감사합니다

1개의 답글