iPhone에서 Google 로그인 (Local Metro server + Dev Build) - Part 5/7: Expo Router Setup

Source: Dev.to

빠른 요약!

1‑4단계에서 우리는 다음을 수행했습니다:

• 필요한 패키지 설치 – Step 1
• Clerk 프로젝트 생성 – Step 2
• Clerk API 키 추가 – Step 3
• Google Cloud Console 생성 및 구성 – Step 4

라우트 설정

이번 단계에서는 Expo Router “Protected” 라우트(Expo Router SDK 53 이후 사용 가능)를 이용해 보호된 페이지를 가드합니다.
루트 레이아웃은 이제 ClerkProvider 로 앱을 감쌉니다.

ClerkProvider가 포함된 루트 레이아웃

// _layout.tsx
export default function RootLayout() {
  const publishableKey =
    process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY ??
    EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;

  if (!publishableKey) {
    throw new Error(
      "Missing EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY. Set it in your .env (see Clerk Expo quickstart) or in env.ts."
    );
  }

  return (
    
      
    
  );
}

보호된 화면이 포함된 네비게이션

// _layout.tsx
function RootLayoutNav() {
  const { isLoaded, isSignedIn } = useAuth();
  const isLoggedIn = isLoaded && isSignedIn;

  return (
    
      {/* Only available when NOT logged in */}
      
        
      

      {/* Only available when logged in */}
      
        
      

      {/* Public screens */}
      
    
  );
}

필요한 import

// _layout.tsx
import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import { tokenCache } from "@clerk/clerk-expo/token-cache";
import { Stack } from "expo-router";
import { EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY } from "../env";

디렉터리 구조

(자세한 내용은 Introduction 참고.)

참고

Expo Router 보호 라우트에 대한 자세한 내용은: Expo Router – Protected routes