React Native

React Native + Supabase 구글 로그인 완벽 가이드: 설정부터 빌드 이슈 해결까지

2026.01.09 5분

React Native Expo Supabase OAuth Troubleshooting

React NativeExpo · Mobile · Native

모바일 앱에 구글 로그인을 붙이는 일은 웹과 복잡도가 다릅니다. 웹이라면 URL 한 번 이동하면 끝이지만, 모바일은 외부 브라우저에서 인증을 마친 뒤 다시 내 앱으로 정확히 돌아오는 딥링크 과정이 필요합니다. 이 되돌아오는 길을 제대로 깔지 못해 막히는 경우가 많습니다.

React Native(Expo) 환경에서 Supabase로 구글 로그인을 구현하고, 실제 기기 빌드 과정에서 마주칠 수 있는 에러까지 해결한 과정을 적어둡니다.

1. 기술 스택 구성

이번 구현에 쓴 도구들과 선택 이유입니다.

영역	선택 기술	이유
Framework	Expo (React Native)	빠른 생산성 및 강력한 라이브러리 생태계
Auth / Backend	Supabase	Firebase 대비 높은 자유도와 PostgreSQL 기반의 강력한 인증 기능
Authentication	Google OAuth	가장 대중적이고 사용자 접근성이 높은 인증 방식
Browser	expo-web-browser	앱 내에서 안전한 인증 세션을 열기 위한 표준 라이브러리
Linking	expo-linking	인증 완료 후 앱으로 복귀하기 위한 딥링크 제어

핵심 흐름은 단순합니다. expo-web-browser로 인증 창을 열고 expo-linking으로 다시 앱으로 받아냅니다. 나머지 설정은 모두 이 왕복을 매끄럽게 만들기 위한 준비 작업입니다.

2. 핵심 설정: 딥링크

모바일 앱에는 localhost가 없습니다. 인증을 마치고 앱으로 돌아오려면 앱만의 고유 주소(Scheme)가 필요합니다.

2.1 app.json 설정

앱이 특정 URL 스킴에 반응하도록 설정을 추가합니다.

json

{
  "expo": {
    "scheme": "day-rise",
    "ios": {
      "bundleIdentifier": "com.yourname.dayrise"
    },
    "android": {
      "package": "com.yourname.dayrise"
    }
  }
}

2.2 Supabase 대시보드 설정

Redirect URLs에 day-rise://google-auth를 등록해야 합니다. 이 설정이 빠지면 인증을 마쳐도 앱으로 돌아오지 못하고, 사용자는 브라우저에 멈춰선 채 끝납니다. 가장 흔히 놓치는 지점이니 꼭 확인하세요.

3. 구글 로그인 로직 구현

단순한 링크 이동이 아니라 PKCE(Proof Key for Code Exchange) 흐름을 써서 보안성을 높인 구현입니다. 모바일처럼 클라이언트 시크릿을 안전하게 숨길 수 없는 환경에서 권장되는 방식입니다.

import { supabase } from "@/lib/supabase";
import * as Linking from "expo-linking";
import * as WebBrowser from "expo-web-browser";
 
async function signInWithGoogle() {
  // 1. 환경에 맞는 리다이렉트 URI 생성 (Deep Link)
  const redirectUrl = Linking.createURL("google-auth");
 
  // 2. Supabase OAuth URL 요청
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: redirectUrl,
      skipBrowserRedirect: true,
    },
  });
 
  if (error) return console.log("Error:", error.message);
 
  // 3. 앱 내 브라우저에서 로그인 세션 실행
  if (data?.url) {
    const result = await WebBrowser.openAuthSessionAsync(data.url, redirectUrl);
 
    if (result.type === "success" && result.url) {
      // 4. 돌아온 URL에서 인증 코드(Code)를 추출하여 세션으로 교환
      const { queryParams } = Linking.parse(result.url);
      const code = queryParams?.code;
 
      if (code) {
        await supabase.auth.exchangeCodeForSession(code);
      }
    }
  }
}

흐름을 한 줄로 요약하면, 리다이렉트 URI를 만들고 OAuth URL을 받아 브라우저를 열고, 돌아온 URL에서 코드를 꺼내 세션으로 교환합니다. 네 단계가 끊김 없이 이어져야 로그인이 완성됩니다.

4. 트러블슈팅: "No script url provided" 에러

빌드 후 USB를 뽑거나 네트워크를 바꿨더니 앱이 실행되지 않는 문제입니다.

code

Error: "No script url provided. make sure the packager is running..."

원인 분석

이 에러는 앱이 디버그 모드로 빌드됐기 때문입니다. 디버그 모드의 앱은 로직 코드를 앱 내부에 품고 있는 게 아니라 내 컴퓨터의 Metro 서버에서 실시간으로 스트리밍 받습니다. 그러니 컴퓨터와의 연결이 끊기는 순간 앱은 읽을 코드를 잃고 멈춰버립니다.

해결 방법: 릴리즈 모드 빌드

컴퓨터 연결 없이도 혼자 도는 앱을 만들려면 자바스크립트 번들을 앱 내부에 포함시키는 릴리즈 빌드가 필요합니다.

bash

# iOS 기기에 릴리즈 모드로 직접 설치
npx expo run:ios --device "유인학의 iPhone" --configuration Release

5. 체크리스트

같은 실수를 반복하지 않기 위해 정리해둡니다.

딥링크 일관성부터 확인하세요. app.json의 scheme, 코드 안의 redirectTo, Supabase 대시보드의 주소가 셋 다 정확히 일치해야 합니다. 하나라도 어긋나면 되돌아오는 길이 끊깁니다. 다음으로 Google Cloud Console에서 Web Client ID를 생성해 Supabase에 등록했는지 점검하고, 외부 테스트를 할 때는 빌드 모드를 --configuration Release로 두세요.

6. 결론

React Native에서 Supabase와 구글 로그인을 연동하는 일은 코드 작성보다 네트워크 환경과 빌드 구조를 이해하는 쪽이 더 큰 비중이었습니다. 딥링크의 왕복 구조와 디버그/릴리즈 빌드의 차이를 한 번 제대로 잡아두면 다음 프로젝트에서는 훨씬 빠르게 넘어갈 수 있습니다.

불러오는 중…

이낙 InakFrontend Developer

소개 보기

/ related

React NativeExpo · Mobile · Native

React Native

안드로이드 Edge-to-Edge 지옥에서 살아남기: 탭바 짤림·키보드에 깔리는 바텀시트의 진짜 원인들

iOS에서는 완벽하던 하단 UI가 안드로이드에서만 무너졌습니다. 탭바는 시스템 바에 잘리고, 바텀시트는 키보드에 깔리고, 고치면 고칠수록 이상해지는 상황. 인셋이 0으로 나오는 반쪽짜리 edge-to-edge 설정, RN Modal이 별도 창이라 adjustResize가 무효라는 사실, 그리고 '잘림'의 실체가 픽셀 측정으로 뒤집힌 순간까지 8차에 걸친 트러블슈팅 과정을 정리합니다.

2026.07.11 9분

React NativeExpo · Mobile · Native

React Native

gorhom/bottom-sheet가 New Architecture에서 안 열릴 때: babel 중복 플러그인부터 Portal 우회까지

RN 0.83 · New Architecture · Reanimated 4 조합에서 @gorhom/bottom-sheet의 present()는 호출되는데 시트가 올라오지 않았습니다. 범인은 하나가 아니라 둘이었죠. babel worklets 플러그인 중복과 BottomSheetModal의 Portal 문제를 어떻게 좁혀갔는지, 그리고 인라인 컴포넌트로 최종 해결한 과정을 정리합니다.

2026.07.10 11분

React NativeExpo · Mobile · Native

React Native

Expo 개발 빌드가 계속 실패할 때: 'No script URL'의 진짜 범인을 찾아서

Release 빌드는 잘 도는데 Debug 빌드만 실행하면 'No script URL provided'로 죽는 미스터리를 추적했습니다. Expo Go의 함정, 네트워크 권한, 그리고 패키지 매니저가 조용히 심어둔 진짜 원인(SDK 비호환 버전)과 프리빌트 React Native Core의 링커 에러까지, 하루 종일 파낸 트러블슈팅 과정을 정리합니다.

2026.07.08 8분

/ buy me a coffee

이 글이 도움이 되었다면 ☕

커피 한 잔으로 응원해 주세요. 다음 글을 쓰는 큰 힘이 됩니다.

React Native + Supabase 구글 로그인 완벽 가이드: 설정부터 빌드 이슈 해결까지

1. 기술 스택 구성

2. 핵심 설정: 딥링크

2.1 app.json 설정

2.2 Supabase 대시보드 설정

3. 구글 로그인 로직 구현

4. 트러블슈팅: "No script url provided" 에러

원인 분석

해결 방법: 릴리즈 모드 빌드

5. 체크리스트

6. 결론

관련 글

안드로이드 Edge-to-Edge 지옥에서 살아남기: 탭바 짤림·키보드에 깔리는 바텀시트의 진짜 원인들

gorhom/bottom-sheet가 New Architecture에서 안 열릴 때: babel 중복 플러그인부터 Portal 우회까지

Expo 개발 빌드가 계속 실패할 때: 'No script URL'의 진짜 범인을 찾아서

이 글이 도움이 되었다면 ☕

1. 기술 스택 구성

2. 핵심 설정: 딥링크

2.1 app.json 설정

2.2 Supabase 대시보드 설정

3. 구글 로그인 로직 구현

4. 트러블슈팅: "No script url provided" 에러

원인 분석

해결 방법: 릴리즈 모드 빌드

5. 체크리스트

6. 결론