mini project - 영화 페이지 만들기(4-3단계) - 백엔드 연결 (supabase) 소셜 로그인 (카카오톡, 구글)

creamymood 2025. 5. 21. 15:38

앞 4-2단계에서 이어집니다.

mini project - 영화 페이지 만들기(4-2단계) - 백엔드 연결 (supabase) 로그인 / 회원가입 구현 /

앞 4-1단계에서 이어집니다. 이 단계부터는, 아직 경험이 없기 때문에. 많은 시행착오가 있을 예정.. 차근 차근 해보면 되겠지 ?! mini project - 영화 페이지 만들기(4-1단계) - 백엔드 연결 전 input창

creamymood.tistory.com

부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다.

1. 기본 이메일 / 비밀번호 기반의 로그인 / 회원가입 과정 (Supabase 백엔드 이용 하는 방식)

2. 소셜 로그인 / 회원가입(카카오, 구글, 네이버 등 소셜 연동)

이렇게 두가지 방법으로써 로그인과 회원가입을 구현해봅니다.

해당 게시글에서는 2. 소셜 로그인으로 구현하는 방식을 다룹니다.

2. 소셜 로그인 구현

사전 준비 참고한 사이트 (부캠 제공)

Supabase 로그인 / 회원가입 가이드 | Notion

1. 기본 설정

legend-palm-1f1.notion.site

사전 준비

시작에 앞서, 몇가지 사전 준비들이 필요합니다.

1. 기본 설정

: 앞 이메일 기반으로 구현한 단계랑 같습니다. 이미 하셨다면 건너뛰어도 됩니다!

1-1프로젝트 생성: Supabase 대시보드에서 새 프로젝트 생성

1-2필요한 라이브러리 설치

npm install @supabase/supabase-js

앞서 이메일 단계에서 설정 하셨다면, skip !

1-3 환경설정

- Project Settings → Data API → API Settings로 이동합니다.

- Project URL, API Key 를 .env 파일에 환경 변수로 설정합니다.

- Supabase와 로컬 서버를 연결하기 위한 기본 설정입니다.

근데 문득 드는 생각이

뭔가 이메일 기반으로 저장되는 정보들이나, 각종 소셜에서 제공될 유저 정보가 다 달라서..

Supabase에서 프로젝트를 다 새로만들어서 관리해야할까? 이런 생각이 들었다.

결론은 아니었음.

기존에 만든 Supabase 프로젝트 그대로 사용하면 됌.

카카오톡이나 구글 로그인 같은 OAuth 로그인 기능도 기존 프로젝트에 추가해서 사용할 수 있음/.

기존 프로젝트 그대로 사용하면 된다.
API Key, Supabase URL 등은 기존 값 그대로 유지.
OAuth(카카오, 구글 등) 설정만 추가로 하면 된다.

어떻게 해야 하냐면?

Supabase 콘솔 접속 → 기존 프로젝트 선택
Authentication → Providers 탭 클릭
Google / Kakao 선택해서 설정
- 각 플랫폼에서 클라이언트 ID, 시크릿 키 발급받아 입력
- redirect URL은 예: https://your-project.supabase.co/auth/v1/callback 형태로 설정
클라이언트에서는 Supabase의 signInWithOAuth() 메서드 사용:

이게 각 플랫폼(구글이나 뭐 카카오)이런데서 오는 정보들이 헷갈리거나 하진 않을까?

-> Supabase가 각 플랫폼에서 오는 정보를 표준화해서 처리해주기 때문에, 헷갈릴 일은 거의 없다.

Supabase가 어떻게 처리하냐면?

Google, Kakao 등에서 로그인하면 Supabase는 이 정보를 바탕으로 하나의 user 객체로 만들어줘.

const {
  data: { user },
} = await supabase.auth.getUser()

이 user 안에는 아래처럼 공통된 필드들이 있다.

{
  "id": "사용자 고유 id",
  "email": "이메일 주소 (있으면)",
  "user_metadata": {
    "full_name": "홍길동",
    "avatar_url": "프로필 사진",
    ...
  },
  ...
}

즉, 어떤 플랫폼으로 로그인했는지와 상관없이, user.email, user.user_metadata.full_name 등으로 일관된 방식으로 접근 가능.

주의할 점

Kakao는 이메일을 안 줄 수도 있음 (유저가 동의 안 하면).
→ 이럴 땐 user.email이 null일 수도 있어. 대비해야 함.
user_metadata 구조는 약간씩 다를 수 있으니, console.log(user) 해보고 체크해보는 게 좋음.

💡 팁

유저가 로그인할 때 어떤 provider(google, kakao) 썼는지는 user.app_metadata.provider에 있음.
필요하면 이걸로 조건 분기도 가능.

console.log(user.app_metadata.provider) // 'google', 'kakao' 등

2. OAuth(카카오, 구글 등) 로그인

카카오 먼저 ! 사전 준비

아래 사이트는 supabase 공식 홈페이지. 카카오 구현 참고 하기 :)

Add Kakao OAuth to your Supabase project

supabase.com

2-1 생성한 Supabase Project에 접속합니다.

Authentication → Sign In/Up→ Auth Providers를 활성화 합니다.

이때 화면 키고, 아래 내용들 참고해서 적기

2-2 카카오 개발자 계정 접속 (없으면 생성)

https://developers.kakao.com 에서 카카오 계정 로그인
내 애플리케이션 > 애플리케이션 추가
- 앱 이름: 예) MyReactApp
- 사업자명은 테스트용이면 아무거나 적어도 됌

2-3 플랫폼 등록

애플리케이션 대시보드에서 [플랫폼] > [Web] 클릭
사이트 도메인 등록
- 개발 시에는 보통 http://localhost:3000 입력
- 배포할 경우 https://yourdomain.com 도 추가해야 함

3. 각종 키 확인

앱 키> 들어가서 각종 키를 바탕으로 supabase Auth Providers채워주기

supabase의 Client Secret Code : 이건 kakao의 앱 키 > Admin 키 !
supabase의 Callback URL (for OAuth)을 복사해서 : 카카오 로그인 > Redirect URI 여기에 붙여넣기

Kakao Developers

동의 항목을 설정하는 경우 카카오계정(이메일)이 비활성화 되어있는 경우

개인정보 동의항목 심사신청으로 이동
비즈 앱 정보 내 개인 개발자 비즈 앱 전환을 클릭
앱 아이콘 등록 → 사업자 정보 등록
개인 개발자 비즈 앱 전환

4가지 과정을 순차적으로 진행한 후 동의항목을 확인하시면, 카카오계정(이메일)이 활성화 됩니다.

여기까지가 사전 작업 입니다.

3 카카오 구현

사전 준비는 끝났으니,

이제 이 부분부터 고민이 많아졌다.

앞 기본 로그인을 어떻게 구현 했더라?

이메일과 비밀번호를 친 뒤 로그인 버튼을 누르면 → api 호출이 되고 → 정보를 받아와서 로그인이 구현 되는 방법 이었는데

그렇다면 카카오나 다른 소셜 로그인은?

다른 사이트에서 본다면,

보통 로그인 창 밑에

이런식으로 되어 있으니까..

우선 로그인 페이지에 버튼을 만들고(kakao), 누르면 이동될

카카오톡 로그인하기 페이지 안에서, 새롭게 로그인하는 페이지를 구성 해야하나 ?!? 라고 생각하던 찰나,

보통 타 사이트에서, 저런 kakao로 시작하기 버튼을 누르면 바로 인증 어쩌구가 쫘락~ 뜨던게 기억이났다..

그러면 방법은, 버튼을 누르면, 패치를 보내고 받아오는 함수를 작성해야할까나?

버튼을 누르면,, supabase 코드인 로그인 loginWithKakao 이 함수를, 버튼에 온클릭으로 달아주면 될까나?

라고 혼자 고민 해봤다.

지피티의 대답 ↓

네 Jane, 아주 잘 이해하고 계세요! 😊
결론부터 말하자면 맞아요, loginWithKakao 함수를 버튼의 onClick에 연결해주면 됩니다!

요약

별도로 로그인 페이지를 또 구성할 필요는 없어요.
버튼을 누르면 바로 OAuth 인증 페이지(카카오톡 로그인 창) 가 뜨는 방식이 일반적입니다.
Supabase에서 제공하는 signInWithOAuth 함수는 자동으로 카카오 인증 URL로 리다이렉트 해주기 때문에, 직접 패치 요청을 보낼 필요도 없습니다.

💡 예시 코드

const handleKakaoLogin = () => {
  loginWithKakao(
    "http://localhost:3000/callback" // 인증 후 돌아올 리다이렉트 URL
  );
};

return (
  <button onClick={handleKakaoLogin}>
    카카오로 로그인하기
  </button>
);

💬 추가 팁

리다이렉트 URL (redirectTo)는 카카오 개발자 콘솔에서 설정한 Redirect URI랑 정확히 같아야 해요.
- 예: http://localhost:3000/callback, https://yourdomain.com/callback 등
인증이 완료되면, Supabase가 그 리다이렉트 URL로 유저를 보내고, 거기서 유저 정보(세션)를 받아 처리하면 됩니다

오케이 ~ 그렇다면 이제 작성해보자..

1. useSupabaseAuth 함수 import 해옵니다.

2. useSupabaseAuth()에서 loginWithKakao 함수를 꺼내 사용합니다.

이 부분은 사실 앞 이메일 로직이랑 같다.

버튼 한개 만들고, onclick 걸어주고

아래는 불필요한 코드는 지웠다.

const { login, loginWithKakao } = useSupabaseAuth();

const handleLoginWithKakao = async () => {
    try {
      await loginWithKakao('https://yaliidhzxyxpaumcoyhl.supabase.co/auth/v1/callback');
      setLoggedIn(true);
    
    } catch (error) {
      console.error("Error during Kakao login:", error);
      alert("카카오 로그인에 실패했습니다. 다시 시도해주세요.");
    }
    

  };
  

  return (
    <div style={{ maxWidth: "400px", margin: "2rem auto" }}>
      <h2>로그인</h2>
     
      <button onClick={kakaoLogin}>카카오톡으로 로그인하기</button>
    </div>
  );
}

(참고로, 해당 코드의 setLoggedIn도 밑 구현 단계를 거친 최종 코드 입니다. 전역으로 로그인도 관리중)

그러면 >

이렇게 간단하게 구현이 됩니다 !

아니다... 간단하게 구현이 안된거였다.. 동의하고 계속하기 누르면, 로그인이 안되고 다시 메인페이지로 넘어가버리는 현상 발생...

?????

뭔가 잘못된 것 같아서 하루종일 문제 찾기.

그냥 처음부터 다시 연결해보기로..

위에 생각하는 로직은 맞다. 그리고 위에 최종 코드도, 결국 맞는 코드로 작성은 했다.

이제 로그인은 되는 것 같았다. 로컬 스토리지에도 떴기 때문.

그런데, 로그인이 바로 풀려 ??? 음 이걸 무슨 현상이라고 하지..

아마, 로그인 후, 정보는 받아오는데 이 상태를 전역에서 알려주고 있지 않으니까,, 그걸 UI로 로그인 중이야 ~ 이런걸 구현 하지 않으니까..

이런 문제 같았다.

그래서 우선 다음단계로 넘어가서, 로그인 된 값을 전역 상태관리를 하고

그리고 이걸로 이제 로그인 유지하는 로직을...

=> 정답! 해결 완료우

다음 단계는, 정보를 로컬에 저장하고, 그 정보를 상태로 관리하는 단계 입니다.

3. App.jsx에 useEffect를 활용하여 getUserInfo() 함수를 실행해야 합니다.

4. 소셜 로그인을 통해 얻은 사용자 정보를 LocalStorage에서 userInfo 라는 키 값에서 확인할 수 있습니다.

이제 드는 또 다른 고민.

앞에서 이메일 기반으로 구현할 때, getUserInfo()로써 정보를 LocalStorage에 저장하는 코드를 작성했었는데..

사실 이 코드는 이메일 기반인거니까,, 카카오에서 받아올 정보를 상태로써 저장할 새로운 전역 상태를 context API 를 만들어야 하는가?

결론은 그럴 필요 없다. 앞 supabase의 프로젝트 생성 고민과 동일하게, 같은 형식의 정보로써 저장하고 관리하기 때문에.

지피티의 대답 ↓

즉, "카카오라고 해서 별도의 Context를 만들 필요는 없어요."
왜냐하면 결국 Supabase는 이메일 로그인이나 소셜 로그인이든 같은 방식으로 user 객체를 반환하거든요.

결론

새로운 Context API 만들 필요 없음!
기존 UserContextProvider 구조 안에서 getUserInfo()만 잘 작동한다면,
카카오 로그인 유저도 똑같이 관리 가능!

이렇게 하면 돼요:

getUserInfo()가 소셜 로그인 후에도 잘 작동하면, 기존 UserContextProvider 로직을 그대로 사용하세요.
대신, 소셜 로그인 이후에 Supabase가 자동으로 유저 세션을 저장하기 때문에,
App.jsx에서 useEffect로 getUserInfo() 실행 → Context에 저장하면 모든 로그인 방식에서 커버됩니다.
그리고 LocalStorage에 userInfo도 저장해야 하는 조건이 있다면, getUserInfo() 내부 또는 Context에서 저장할 수 있어요

요약

카카오 로그인용 별도 Context 만들 필요 없음.
supabase.auth.getUser()는 소셜 로그인 후에도 동일하게 동작.
Context와 LocalStorage 둘 다 getUserInfo()로 갱신 가능.

4. 구글 사전 작업

우선 구글도, 사전 작업이 필요합니다.

1. Google Cloud 계정 생성

https://cloud.google.com/?_gl=1%2A1im1m7w%2A_up%2AMQ..&gclid=Cj0KCQjw99e4BhDiARIsAISE7P9QAgq1PLxPTcrIBzqqlVEVU32uXz7C7zcnUqmm3ddlmAIfdVG0NsgaAli6EALw_wcB&gclsrc=aw.ds

cloud.google.com

Google Cloud

1. Google Cloud 접속 후 콘솔로 이동합니다.

새 프로젝트를 생성합니다.
생성된 프로젝트의 API 및 서비스로 이동합니다.
OAuth 동의 화면으로 이동하여 외부를 선택하여 만들기 버튼을 클릭합니다.
사용자 인증 정보 → 사용자 인증 정보 만들기를 클릭한 후 OAuth 클라이언트 ID를 생성합니다.

5. 생성된 Client ID와 Client Secret 를 Supabase Provider에 입력하여 활성화 합니다.

6. 승인된 JavaScript 원본 > 개발 할 때는 http://localhost:3000

7. 승인된 리디렉션 URI > supabase에서 구글 활성화 때 뜨는 Callback URL (for OAuth) 복사해서 넣기

그 후, 만들기를 누른 뒤, 나타나는 정보를 바탕으로 supabase도 채워주기!

5. 구글 구현

역시 카카오랑 비슷하게

이런식으로 되어 있으니까.. 비슷하게 하면 되겠지 ?

버튼을 누르면,, supabase 코드인 로그인 loginWithGoogle 이 함수를, 버튼에 온클릭으로 달아주면 될까나?

한번 해보자 ~

 const handleGoogleLogin = async () => {
    try {
      await loginWithGoogle('https://yaliidhzxyxpaumcoyhl.supabase.co/auth/v1/callback');
      setLoggedIn(true);
    
    } catch (error) {
      console.error("Error during Kakao login:", error);
      alert("카카오 로그인에 실패했습니다. 다시 시도해주세요.");
    }
    

  };

최종코드! loginWithGoogle 뒤에 주소는 Callback URL (for OAuth) 이거 집어 넣으면 됩니다.

주의 할 점!

확인해볼 것:

Jane, 진짜 좋은 포인트 짚었어! 👏
카카오 로그인과 구글 로그인의 방식 차이 때문에 그런 거야. 아래에 차이를 간단히 정리해줄게!

✅ 왜 @react-oauth/google을 설치해야 해?

Google 로그인은 기본적으로 OAuth 2.0 기반이고,
React에서 쉽게 쓰기 위해 Google이 직접 만든 공식 라이브러리가 바로
@react-oauth/google이야.

이 라이브러리를 쓰면:

로그인 버튼 UI도 바로 제공되고
토큰도 쉽게 받아오고
React 앱에 맞게 잘 작동해

즉, 구글 로그인을 더 빠르고 쉽게 구현하려고 설치하는 거야.

🤔 그런데 왜 카카오는 안 했을까?

카카오 로그인은:

주로 SDK script 태그를 직접 <script>로 불러오는 방식이 많아.
예:
그리고 보통 window.Kakao.init() 같은 방식으로 사용했을 거야.

그래서 따로 npm install 없이도 작동했을 가능성이 커!

💡 요약 비교

항목 구글 로그인 카카오 로그인

설치 필요?	✅ @react-oauth/google 설치 권장	❌ 보통 <script>로 SDK 불러옴
사용 방식	React용 라이브러리 제공	직접 JS SDK로 초기화
로그인 처리	자동으로 OAuth 처리	직접 login() 메서드 호출

✨결론

👉 npm install @react-oauth/google는 구글 로그인을 더 쉽게 쓰기 위한 거니까 꼭 추천!

만약 script 태그로 직접 구현하고 싶으면 그것도 방법이 있긴 하지만,
React에선 라이브러리 쓰는 게 훨씬 안정적이고 편해 😊

필요하면 script 태그 방식도 알려줄게!
다음은 로그인된 정보 저장하거나 상태관리로 넘어가볼까?

시행착오를 거친.. 그래도 해결 해낸 뿌듯한 소셜 로그인 구현..

다음 게시글은, 내가 보기 편리하도록, 사담이나 개인적인 고민을 제외한 글 작성해봐야겠다.