아웃소싱 프로젝트 PINGER) TroubleShooting 2 : OAuth 로그인과 meta_data📍

밍갱·2025년 3월 4일
ReactTILTROUBLESHOOTINGprojectteamProject

PROJECTS

목록 보기
17/20

1. 문제 발생🤯

01. 나 구글로 로그인할래

이번 팀프로젝트에서 로그인/회원가입 기능을 담당하면서, 꼭 구현해보고 싶었던 부분이 바로 소셜 로그인이었다. 구글이나 카카오를 통해 로그인이 되면 사용자 수가 폭발적으로 증가한다는 기사가 어렴풋이 기억이 났고, 최종 프로젝트때 무조건 구현해야 할 것 같다는 느낌에 미리 예습하는 기분으로 도전해보았다.
다행히 정리가 잘 된 글들이 많아서 차근차근 따라해보았고, 기본 설정까지 막힘없이 해낼 수 있었다. Login 페이지에서 사용할 소셜 로그인 함수를 만들고, 소셜 버튼에 props로 내려주어 테스트를 해보았다. 우선 어떤 data가 찍힐지 알아보고자 console에 찍어보았다.

응? 왜 console이 깨끗하죠? 분명 console.log로 data를 찍어주었는데, 콘솔창이 깨끗하다. 오류도 아니고, 아무것도 안찍힌 적은 처음이라 당황스러웠다.

빛났다 사라지는 data... 도대체 왜 이러는걸까...

02. meta_data가 뭐에요?

지난번의 교훈 덕분에 로그를 들여다보면서 문제점을 찾는 방법을 잘 활용하고 있다. 이번에도 안될 때, 무조건 supabase의 로그로 찾아가 문제점이 뭔지 확인했다. public.users에 값이 제대로 들어가지 않았던 것이었다.
trigger 함수도 변경해보고, column 설정도 변경해보면서 여차저차 로그인까지는 구현이 되었다. 하지만, nickname, address, role의 값이 다 null로 들어가지는 문제가 또 발생했다.

supabase의 auth schema에서 확인을 해보니, raw_user_meta_data에 nickname, address, role이 아예 들어가지 않았다. 그래서 단순하게 '다시 추가해주지 뭐!' 라고 생각했는데, 이때는 몰랐다... 이게 기나긴 여정의 시작이 될지🥲

2. 개념 정리🧐

00. supabase 공식문서

supabase 구글 로그인 공식문서

01. supabase OAuth : 구글 로그인 구현하기

  1. 프로젝트 생성

  2. 사용자 인증 정보 탭에서 클라이언트 ID 만들기

  1. 웹 애플리케이션 선택
    승인된 자바스크립트 원본 : 현재 쓰고 있는 port ( http://localhost:5173)
    승인된 리디렉션 URI : supabase google provider의 Callback URL

  2. supabase provider 설정
    Client IDs : 구글 클라이언트 ID
    Client Secret : 구글 클라이언트 보안 비밀번호

  • 코드
//google 소셜 로그인
export const googleLogin = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      persistSession: true,
      queryParams: {
        access_type: 'offline',
        prompt: 'consent',
      },
      redirectTo: PATH.SOCIAL_LOGIN_REDIRECT_URL,
    },
  });

  if (error) {
    toast.error(AUTH_ERROR_MESSAGES.LOGIN.FAIL);
    console.error('구글 로그인 error : ', error);
    return;
  }

  if (data) {
    console.log(data)
  }
};

02. supabase OAuth : 카카오 로그인 구현하기

  1. 카카오 개발자센터 앱 등록

  2. 카카오 로그인 활성화, OpenId Connect 활성화 모두 ON
    Redirect URI : supabase kakao provider의 Callback URL

  3. 동의항목 설정하기 전, 개인정보 동의항목 심사신청 (사업자 정보 등록 안해도 가능)

  4. 비즈앱 전환 - 앱 대표 이미지 등록 - 개인 개발자 비즈 앱 전환 항목 선택(이메일 인증 필요) - 동의항목 설정

  5. Client Secret와 REST API 키 복사

  1. supabase provider 설정
  • 코드
//구글 로그인과 로직이 같다. provider만 변경해주면 된다.
//kakao 소셜 로그인
export const googleLogin = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
    options: {
      persistSession: true,
      queryParams: {
        access_type: 'offline',
        prompt: 'consent',
      },
      redirectTo: PATH.SOCIAL_LOGIN_REDIRECT_URL,
    },
  });

  if (error) {
    toast.error(AUTH_ERROR_MESSAGES.LOGIN.FAIL);
    console.error('카카오 로그인 error : ', error);
    return;
  }

  if (data) {
    console.log(data)
  }
};

소셜 로그인 참고 사이트 1
소셜 로그인 참고 사이트 2

3. 해결 방안😇

01. public.users의 column 수정

우선 data.user에 nickname, address, role이라는 키값이 존재하지 않기 때문에 테이블에는 null로 들어간다는 사실을 알았다. 그래서 찜찜하지만 Allow Nullable을 on해주었다.

그랬더니 갑자기 작동 되는 소셜로그인! 하지만 왜 이름이 undefined?

localStorage를 확인해보니 이메일과 id만 zustand로 넘어왔네...

02. 소셜 로그인 로직에서 데이터 upsert/update

그래도 다행히 소셜 로그인까지는 된다! 그럼 로그인이 완료되는 시점에서 public.users에 nickname, address, role의 값을 upsert/update해주는 로직을 넣어 null값이 들어가지 않도록 구현해보고자 했다.

응 어림도 없지~ 로직을 분리도 해봤다가, useEffect도 써봤다가 별짓을 다했지만 public.users의 NULL은 꿈쩍도 하지 않았다. 그래서 튜터님께 도움을 요청했는데, 결국 다른 방법으로 해결해야할 것 같다는 슬픈 피드백을 듣게 되었다.

03. 2단계 회원가입

튜터님께서 추천해주신 방법은 2단계 회원가입이었다. 우선 소셜로그인으로 로그인까지 구현이 되면 리디렉션을 2단계 회원가입 페이지로 연결해주고, 그 페이지에서 nickname, address, role 값을 받아 처리하도록 하는 것이었다.
그래도 방법을 찾았으니 해결을 하면 된다. 다른 팀원분들이 중간에 합류해서 함께 해결해보고자 했지만....

4. 결과😎

01. 미해결!

개발 블로그 사상 첫 미해결 트러블 슈팅! 다른 팀원분들까지 문제 해결에 나섰지만, 대공사가 필요하다고 판단되었다. 내일이 마감이라 결국 해결하지 못한 채로 우선 마무리지었고, 추후에 마지막 해결방안으로 구현해볼 예정이다.

profile
밍갱
미술 전공에서 프론트엔드 개발까지
이전 포스트

MBTI 테스트 사이트) KPT 회고✍️

다음 포스트

아웃소싱 프로젝트 PINGER) KPT 회고✍️

0개의 댓글