Chapter 7 · 로그인과 인증

31강Google 로그인 연동하기

Google Cloud Console → Supabase → 코드 순서로 소셜 로그인을 완성한다.

STEP 1

Google Cloud Console

OAuth 앱 생성 + 콜백 URI 등록

STEP 2

Supabase 설정

Google Provider 활성화 + 키 입력

STEP 3

Claude Code

로그인 버튼 + 콜백 라우트 구현

1	새 프로젝트 만들기 console.cloud.google.com 접속 → 상단 프로젝트 선택창 → 새 프로젝트 → 이름 입력 후 만들기
2	OAuth 동의 화면 설정 API 및 서비스 → OAuth 동의 화면 → User Type: 외부 선택 → 앱 이름, 이메일 입력 후 저장
3	OAuth 클라이언트 ID 생성 사용자 인증 정보 → 사용자 인증 정보 만들기 → OAuth 클라이언트 ID → 애플리케이션 유형: 웹 애플리케이션
4	리디렉션 URI 등록 승인된 리디렉션 URI에 아래 두 가지를 추가합니다. Redirect URIs https://your-project.supabase.co/auth/v1/callback http://localhost:3000/auth/callback Supabase 대시보드 → Authentication → Providers → Google 에서 Callback URL 확인
5	클라이언트 ID / 보안 비밀번호 복사 만들기 클릭 후 나타나는 클라이언트 ID와 클라이언트 보안 비밀번호를 복사해 두세요.

Google Provider 활성화

Supabase 대시보드 → Authentication → Providers → Google → Enable 토글 ON

키 입력 후 저장

Client ID, Client Secret에 STEP 1에서 복사한 값을 붙여넣고 Save 클릭

아래 프롬프트를 Claude Code에 그대로 입력하세요.

Prompt

로그인 페이지(/login)를 만들고 Google 로그인 버튼을 넣어줘.
그리고 Google 소셜 로그인 기능을 구현해줘.
Supabase Auth의 signInWithOAuth를 사용하고,
로그인 후 콜백을 처리하는 /auth/callback 라우트도 만들어줘.

Claude Code가 로그인 페이지, 콜백 처리 라우트를 자동으로 만들어줍니다.

1	프리뷰에서 /login 접속 → Google 로그인 버튼 클릭
2	Google 계정 선택 화면에서 로그인 버튼 클릭 → 로그인 성공
3	Supabase → Authentication → Users에서 내 계정이 목록에 보이는지 확인

Chapter 7 · 로그인과 인증