Login with Google on an iPhone (Local Metro server + Dev Build) - Part 5/7: Expo Router Setup

Source: Dev.to

Quick recap!

From steps 1‑4, we have:

• Install the necessary packages – Step 1
• Create a Clerk project – Step 2
• Add the Clerk API key – Step 3
• Create and configure the Google Cloud Console – Step 4

Set up the routes

In this step we use the Expo Router “Protected” route (available after Expo Router SDK 53) to guard our protected page.
The root layout now wraps the app with ClerkProvider.

Root layout with 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 (
    
      
    
  );
}

Navigation with protected screens

// _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 */}
      
    
  );
}

Required imports

// _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";

Directory structure

(Refer to the Introduction for details.)

Reference

For more details on Expo Router protected routes: Expo Router – Protected routes