[Supabase] TypeScript에서 Supabase 사용하기

Generating TypeScript Type

npx supabase login

npx supbase init

npx supabase gen types typescript --project-id "project-id" --schema public > src/types/supabase.ts

"project-id" 부분에 Supabse Project Reference ID 작성
🗒️docs >>> click

 

Supbase를 이용한 회원가입을 할 떄 커스텀 필드 저장하기

1. Supabase SQL Editor에 다음의 스크립트를 입력하고 실행

-- SQL Editor에 새로운 트리거 함수 생성
CREATE OR REPLACE FUNCTION public.handle_new_user_custom()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.users (id, email, nickname)
  VALUES (NEW.id, NEW.email, NEW.raw_user_meta_data->>'nickname');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- 새로운 트리거 생성
CREATE TRIGGER on_auth_user_created_custom
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION public.handle_new_user_custom();

2. 프로젝트에 코드 작성

const { data, error } = await supabase.auth.signUp({
  email: 'example@email.com',
  password: 'example-password',
  options: {
    data: {
      nickname: '새로운 닉네임',
    },
  },
})

 

240703 수준별 분반 챌린지반 실습 중 TypeScript에서 Supbase 활용하기 부분을 정리한 내용입니다.