Front-End/JavaScript

Firebase → Supabse 인증수단 교체

hyeeoooook 2026. 2. 8. 20:56

대형사고..

기존에 Supabase에서 DB를 사용하고, 사용자 인증을 Firebase로 분류하여 진행하고 있었다.

 

나중에 게시글을 수정, 삭제할때 모든 사용자가 가능하게 되었고 이를 해결하기 위해서 Firebase의 UID를 Supabase의 UID로 대체하려고 했으나 서로 인증의 방식이 매우 다르고 UID값 또한 달라 연동이 쉽지 않음을 감지

 

때문에 Firebase의 인증수단을 포기하고 Supabase로 이동하였다..

 


 

문제해결간의 생각의 흐름

 

먼저 이를 해결하기 위해서 여러가지 방법들을 고민해보았다. 사용하진 못했지만 분명 실행 가능성이 조금은 존재한 영역같아 글로 기록하기로 하였다.

 

1. Supabase + DB Firebase Auth사이에 DB를 둬서 작은 백엔드 서버처럼 미들웨어의 방식으로 진행을 하는것이다.

 - Firebase에서 로그인한 UID 값 정보를 DB에 저장, JS 코드를 이용하여 미들웨어 Table에 Firebase UID를 저장한뒤에 Supabase의 고유 ID값을 저장해 비교해서 사용자의 정보를 가져오는것이다.

근데 이 방법의 단점은 서버를 두번이나 경유해야하는것이고, 보안적으로도 커플링 관계가 느슨해진다는 단점이 있다.

 

2. JWT 토큰을 발행하여 웹을 미들웨어처럼 사용하는것이다. localsession에 정보를 저장하여 가져오는것, 하지만 이는 보안적인 매우 큰 이슈가 있고, 사용자가 쿠키 허용을 하지 않는다면 무용지물인 해결방법이다..

 

결론, Firebase의 로그인 방식을 포기하고 Supabase를 채택.

 

기존에 Supabase 말고 Firebase를 선택한 이유는 명확하다.

Firebasepopup 방식과 redirect 방식 모두를 지원해준다. 즉, 나는 사용자의 측면에서 popup 방식을 제공해주고 싶었다.

반면, Supabaseredirect 방식을 지원한다.

 


과정

정말 많은 코드를 바꿧지만 결정적으로 Supabase의 방식을 먼저 배워야했다.

먼저 Login과 관련된 코드부터 바꾸기 시작했다.

좌측 : firebase 우측 : supabase
좌측 : firebase 우측 : supabase
좌측 : firebase 우측 : supabase
좌측 : firebase 우측 : supabase

이 이외에도 자잘 자잘한 코드들은 모두 바꾸었다.

 

먼저  Supabase의 상세 정보는 아래 코드와 같다.

const supabase = createClient(supabaseUrl, supabaseKey);
///이 한줄로 Supabase SDK가 만들어지고, 내부에 크게 3덩어리가 만들어짐
supabase.from(...) -> DB
supabase.storage(...) -> Storage
supabase.auth(...) -> Auth
supabase에선 여러가지 이벤트가 있다.
"SIGNED_IN"
"SIGNED_OUT"
"TOKEN_REFRESHED"
"USER_UPDATED"
"INITIAL_SESSION"

 

이처럼 이벤트와 정보를 바탕으로 진행했다.

 

사실 바꾸는건 크게 힘들지 않았다. 이유는 이미 어느정도 제공을 해주고 같다가 붙이기만 하면 되기 때문인데...

문제는 다음 상황들에서 발생했다.

 

제일 마지막 사진을 보면 firebase에서 게시물을 작성한 사용자의 이름을 author_uid로 가져와 텍스트를 넣어주고 있었다.

 

Supabase 정석 방식을 고려해보았을때,

Posts profiles
포스트 정보 유저정보

이렇게 테이블을 관리하여 Posts의 user_id를 profiles의 id로 연결한뒤에 profiles의 display_name이라는 컬럼을 가르켜 가져오면 된다..

 

일단 난 SQL에 너무나도 약하기 때문에 정말 많은 시간을 쏟아부었다 ㅠ

Supabase의 RSL 정책 또한 아는것이 없어 정말 힘들었다.

 


결론

Baas 방식을 사용할땐 한 서비스에 집중하여 개발을 진행해야겠다..

 

블로그에서 따로 관리하는 정보는 firebase Storage를 사용해보려고 했으나, 유료인 관계로 보류하기로 했다..