Login with Google - on an iPhone (Local Metro server + Dev Build) - Series Introduction

In this series, I'll be building the smallest “Login + Welcome [name]” app (2 pages) possible with Expo Router + Clerk.

This will run

• with the local Metro server
• development build (not Expo Go)
• on an physical iPhone (on the same network as the Metro server).

Once this path is working, I will add other pages and make a Production version (on TestFlight). Having smaller scopes makes debug and troubleshooting easier!

Since this involves adding/editing configs on Google Cloud Console and Clerk, screenshots are included too for reference.

The routing shape

• Login with Google: (auth)/login → app/(auth)/login.tsx
• Welcome [name]: (protected)/protected → app/(protected)/protected.tsx

What “protected route” means here

Expo Router has a Stack.Protected guard. You’ll wrap your screens like:

• Un-authed guard for login (guard={!isLoggedIn})
• Authed guard for protected page (guard={isLoggedIn})

The guard is driven by Clerk’s useAuth():

• isLoaded: Clerk finished loading
• isSignedIn: user has a session
• isLoggedIn : isLoaded && isSignedIn;

Directory structure

• env.ts (to add the Clerk publishable key)
• app.json (deep-link scheme)
• app/_layout.tsx (ClerkProvider + protected stack)
• app/(auth)/login.tsx (Login with Google)
• app/index.tsx (redirect-only)
• app/(protected)/protected.tsx ("Welcome [name]" page)