[FEATURE] Clerk 기반 구글 로그인 버튼 적용#33
Conversation
| let sessionActivated = false; | ||
|
|
||
| try { | ||
| const { createdSessionId, setActive } = await startSSOFlow({ |
There was a problem hiding this comment.
startSSOFlow에 native redirectUrl이 없는 것 같습니다.
Clerk 공식 문서는 native에서 AuthSession.makeRedirectUri({ scheme, path }) 형태를 넘기라고 안내하고 있는데 Google 인증은 끝나도 createdSessionId가 안 돌아와 로그인 플로우가 성립하지 않을 수 있기 때문에 확인 부탁드립니다!
There was a problem hiding this comment.
확인 감사합니다. 말씀 주신 대로 native OAuth 복귀 URL을 명시하도록 수정했습니다.
app/(auth)/login.tsx에서 expo-auth-session의 AuthSession.makeRedirectUri({ scheme: 'linclean', path: 'sso-callback' })로 redirect URL을 생성하고, startSSOFlow 호출 시 redirectUrl로 전달하도록 반영했습니다.
앱 scheme은 app.json의 scheme: 'linclean' 값을 사용했고, callback route는 기존 app/sso-callback.tsx를 사용합니다. 따라서 Google 인증 완료 후 linclean://sso-callback으로 앱에 복귀하고, Clerk SDK가 해당 callback을 통해 createdSessionId를 받을 수 있는 흐름입니다.
참고로 해당 redirect URL이 실제로 동작하려면 Clerk Dashboard의 Redirect URLs에 linclean://sso-callback이 등록되어 있어야 합니다.
…login # Conflicts: # app/(auth)/login.tsx # components/ui/kakao-icon.tsx # package-lock.json
2 participants
Closes #28
개요
Clerk 기반 Google 로그인 기능을 Expo 앱에 연결했습니다.
기존 로그인 화면은 버튼 클릭 시 임시로 홈 화면으로 이동하는 상태였지만, 이번 작업에서는
@clerk/expo의 SSO 흐름을 사용해 실제 Google 로그인을 수행하도록 변경했습니다.현재는 안드로이드 환경에서 우선 Google 로그인만 연동했으며, Apple 로그인은 아직 구현 범위에 포함하지 않았습니다. 따라서 기존 로그인 화면에 있던 Apple 로그인 버튼은 사용자가 동작하지 않는 기능을 선택하지 않도록 비활성화/제거했습니다. 추후 iOS 로그인 정책 및 Clerk Apple 로그인 설정이 준비되면 별도 작업으로 Apple 로그인을 연결할 예정입니다.
로그인 성공 후에는 Clerk 세션을 활성화하고, 백엔드
/api/v1/auth/meAPI를 호출해 앱 서버의 회원 정보와 동기화하도록 구성했습니다. 백엔드 동기화에 실패한 경우 Clerk 세션이 남아 앱이 로그인된 것처럼 동작하지 않도록 즉시 로그아웃 처리합니다.또한 앱 진입점과 auth/tabs 레이아웃에 로그인 상태 기반 라우팅 가드를 추가해, 로그인 여부에 따라 로그인 화면 또는 홈 화면으로 이동하도록 정리했습니다. 저장된 세션이 있는 경우에도 백엔드 회원 동기화가 성공한 뒤에만 홈 화면을 표시하도록 처리했습니다.
주요 구현 내용
/api/v1/auth/me회원 동기화 API 호출.npmrc추가파일별 역할
app/_layout.tsx: ClerkProvider, tokenCache, SSO callback route 설정app/index.tsx: 앱 최초 진입 시 로그인 상태에 따라 홈/로그인 화면으로 분기app/(auth)/_layout.tsx: 로그인된 사용자의 auth 화면 접근 방지app/(auth)/login.tsx: Google SSO 로그인 및 백엔드 회원 동기화 처리app/(tabs)/_layout.tsx: 로그인/회원 동기화 완료 여부에 따른 tabs 접근 제어app/(tabs)/(home)/settings.tsx: Clerk 로그아웃 처리 연결app/sso-callback.tsx: Clerk SSO redirect callback routeservices/auth-api.ts: Clerk 토큰으로 백엔드/api/v1/auth/me호출app.json: Clerk Expo plugin 및 native bundle/package 설정package.json,package-lock.json: Clerk/Expo auth 관련 의존성 추가.npmrc: EASnpm ci에서 peer dependency 충돌 방지해결한 이슈 목록
@clerk/reactpeer dependency 충돌 해결체크 사항
npx tsc --noEmit통과npx eslint "app/(tabs)/_layout.tsx" services/auth-api.ts통과npm run lint확인 필요참고
전체
npm run lint는 기존 파일에서 발생하던expo-linear-gradientimport resolver 오류와 일부 warning으로 실패합니다. 이번 작업에서 수정한 인증 관련 파일의 타입 체크와 개별 lint는 통과했습니다.백엔드에서 모바일 Clerk 토큰 검증을 보완하는 companion PR이 필요합니다.
Screenshots or Video
ios에선 아래 이미지처럼 두개 모두 뜨게 할 예정입니다.
안드로이드는 아래 이미지처럼 구글 로그인만 뜨게 할 예정입니다.
