이 글은 2026년 03월 28일 작성된 글입니다.
오늘은 Supabase Auth를 기반으로 회원 정보를 자체 user 테이블에
저장하고,
로그아웃 및 마이페이지에서 사용자 정보를 조회/수정하는 기능을 구현했다.
단순 인증(Auth)만 사용하는 것이 아니라,
서비스에서 활용할 사용자 데이터를 별도의 테이블로 관리하는 구조를 구성한
것이 핵심이다.
1. Supabase Auth + user 테이블 연동
회원가입 시 Supabase Auth에만 저장하는 것이 아니라,
추가 정보를 관리하기 위해 public.user 테이블에도 데이터를 저장하도록
구현했다.
- Auth 회원가입 성공 후 DB insert
- user 테이블에 닉네임, 이메일 등 저장
const { data, error } = await supabase.auth.signUp({
email,
password,
});
if (data.user) {
await supabase.from("user").insert({
id: data.user.id,
email: data.user.email,
nickname,
});
}2. 사이드바 사용자 정보 표시
로그인된 사용자 정보를 가져와
사이드바 하단에 닉네임과 프로필 이미지를 표시했다.
const {
data: { user },
} = await supabase.auth.getUser();- 닉네임 표시
- 프로필 이미지 표시
3. 로그아웃 및 페이지 이동 기능
사이드바에서 로그아웃 및 마이페이지 이동 기능을 구현했다.
await supabase.auth.signOut();- 로그아웃 버튼
- 마이페이지 이동 버튼
4. 마이페이지 UI 및 사용자 정보 조회
마이페이지에서 로그인된 사용자의 정보를 조회하여 표시했다.
const { data } = await supabase
.from("user")
.select("*")
.eq("id", user.id)
.single();- 이메일
- 닉네임
- 프로필 이미지
5. 사용자 정보 수정 기능
마이페이지에서 사용자 정보를 수정할 수 있도록 구현했다.
1. 닉네임 변경
await supabase
.from("user")
.update({ nickname })
.eq("id", user.id);2. 비밀번호 재설정 (이메일 전송 방식)
비밀번호는 직접 변경하는 것이 아니라,
Supabase에서 제공하는 비밀번호 재설정 이메일 기능을 사용했다.
await supabase.auth.resetPasswordForEmail(email, {
redirectTo: "http://localhost:3000/reset-password",
});- 사용자가 이메일을 통해 비밀번호 재설정 진행
- redirect 페이지에서 새로운 비밀번호 설정
3. 이메일 변경
await supabase.auth.updateUser({
email: newEmail,
});🍀 금일 구현한 것
- 회원가입 시 Auth → user 테이블 저장
- 사이드바 사용자 정보 UI 구현
- 로그아웃 기능 구현
- 마이페이지 UI 및 사용자 정보 조회
- 닉네임 변경 기능
- 비밀번호 재설정 (이메일 방식)
- 이메일 변경 기능
🔥 주말 구현 예정
현재는 각 컴포넌트(사이드바, 마이페이지)에서\
개별적으로 supabase.getUser()를 호출하고 있다.
이를 개선하여 인증 상태를 한 곳에서 관리하도록 리팩토링할 예정이다.
- MainAuthGate에서 유저 정보 일괄 처리
- 전역 상태 관리 (Context 또는 상태관리 라이브러리 활용)
- 불필요한 중복 호출 제거
✅ 정리
- Supabase Auth는 인증을 담당하고, 서비스 데이터는 별도 테이블로
관리해야 한다. - 사용자 정보 수정은 Auth / DB 역할을 나누어 처리해야 한다.
- 비밀번호는 직접 변경이 아니라 이메일 기반 재설정 방식이 안전하다.
- 인증 상태를 중앙에서 관리하면 코드 구조가 훨씬 깔끔해진다.
