🐨CoalaCoding
Docs▾
JavaScriptReactHTML & CSSBackendAI & LLMDev ToolsCreative
B반1
👾숏츠
🙉B반2
게시판
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • React
  • HTML & CSS
  • Backend
  • AI & LLM
  • Dev Tools
  • Creative

커뮤니티

  • 게시판
  • 예제 모음

기타

  • 관리자

정책

  • 소개
  • 개인정보처리방침
  • 이용약관
  • 연락처
© 2026 CoalaCoding. All rights reserved.
  • 1. 1-supabase기초
  • 2. 2-oauthnext설치
  • 3. 3-oauthsupabase설정
  • 4. 4-프로필테이블생성인증연동
  • 5. 5-reactquery설정
  • 6. 6-logout
  1. 홈
  2. 문서
  3. JavaScript
  4. Supabase & Next.js
  5. 4. 4-프로필테이블생성인증연동

4. 4-프로필테이블생성인증연동

1-수파베이스_테이블편집

1-1-테이블생성

  1. 수파베이스 대시보드로 이동

  1. 테이블이름생성

  1. 데이터 타입 지정 - 이미지의 순번대로 수행

4번까지 진행하면 우측사이드 패널이 열린다. 아래와 같이 선택한다.

  1. 컬럼추가-email, display_name, image_url

  1. 확인

1-2-함수작성하기

  1. 수파베이스 대시보드

  1. 아래 이미지와 같이 설정한다

begin
  insert into public.profiles(id,email,display_name,image_url)
  values(
    new.id,
    new.raw_user_meta_data->>'email',
    new.raw_user_meta_data->>'user_name',
    new.raw_user_meta_data->>'avatar_url'
  );
  return new;
end
  1. 확인

3-트리거작성

Info: 💡 트리거란?

데이터베이스에 미리 지정된 조건이 충족되거나 특정 테이블에 삽입,수정,삭제 등의 변경 이벤트 발생시 DBMS(DataBaseMagamentSystem) 에서 자동으로 실행되게 구현한 프로그램

  1. 스키마를 auth로 변경하면 트리거 생성 버튼이 사라진다. 이런 경우는 SQL Editor 를 사용하여 작성해야 한다

  1. 수파베이스는 강력한 AI를 지원한다. 영상처럼 sql 문을 생성해보자

create trigger user_signup_trigger
after insert on auth.users
for each row
execute function create_user_on_signup();
  1. sql 문을 실행하자 표시된 버튼을 클릭하면 SQL Editor 로 코드가 이동되고

run 을 클릭하면 SQL 문이 실행된다

디버깅도 AI를 활용하면 된다.

  1. 트리거가 등록된 것이 확인된다

2-NextJS

2-1-인증테스트

  1. 브라우저의 쿠기와 캐시를 삭제하고 NextJs를 실행한다
  2. github 계정으로 로그인 한다
  3. 로그인 사용자 정보가 테이블과 Users 에 저장되었는지 확인한다.

profiles 테이블의 이메일과 imageUrl은 가입자의 소셜 계정 정보를 우리의 데이터베이스에 저장한 것이다

  1. 구글 테스트

2-2-디버깅

  1. 구글인증시 display_name 이 null 로 들어오는 것이 보인다. 이부분을 수정하자
  2. supabase 의 function 을 수정

```javascript title="**COALESCE() : PostgreSQL 의 함수로 인자 중에서 첫 번째로 ****NULL****이 아닌 값을 반환함" begin insert into public.profiles(id,email,display_name,image_url) values( new.id, new.raw_user_meta_data->>'email', ** COALESCE (new.raw_user_meta_data->>'user_name', new.raw_user_meta_data->>'name'), new.raw_user_meta_data->>'avatar_url' ); return new; end


1. 데이터베이스의 레코드를 삭제하고 재인증한다

![](https://ltuekxwqahgbybiolyhc.supabase.co/storage/v1/object/public/media/notion/04_4--37cfb882/18.png)


![](https://ltuekxwqahgbybiolyhc.supabase.co/storage/v1/object/public/media/notion/04_4--37cfb882/19.png)

1. 다시 로그인 하고 테이블을 확인하면 display_name 이 확인된다

![](https://ltuekxwqahgbybiolyhc.supabase.co/storage/v1/object/public/media/notion/04_4--37cfb882/20.png)

목차

  • 1-수파베이스_테이블편집
  • 1-1-테이블생성
  • 1-2-함수작성하기
  • 3-트리거작성
  • 2-NextJS
  • 2-1-인증테스트
  • 2-2-디버깅