Expo Supabase Google Auth Template

This is a robust starter template for React Native (Expo) apps featuring Supabase Authentication with Google Sign-In, persistent session management, and a clean file structure.

🚀 Features

• Authentication: Google Sign-In via Supabase Auth (PKCE flow).
• Session Management: Auto-refreshing sessions using expo-secure-store adapter.
• Navigation: File-based routing with expo-router.
• UI: Clean, responsive UI using standard StyleSheet.
• TypeScript: Fully typed codebase.

📦 Prerequisites

Before you begin, ensure you have:

• Node.js installed.
• An Expo account.
• A Supabase project.
• A Google Cloud project.

🛠️ Installation

1. Clone the repository (or use this template):

   git clone https://github.com/mannbhatt/expo-supabase-google-auth-template.git
   cd expo-supabase-google-auth-template

2. Install dependencies:

   npm install
   # or
   yarn install

⚙️ Configuration

1. Supabase Setup

1. Go to your Supabase Dashboard.
2. Navigate to Settings > API.
3. Copy your Project URL and anon public key.
4. Rename .env.example to .env and paste your keys:

   EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
   EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

2. app.json Configuration

Open app.json and customize your app's identity:

• Name & Slug: Change "name" and "slug" to your project name.
• Bundle Identifier (iOS): Update ios.bundleIdentifier (e.g., com.yourname.project).
• Package Name (Android): Update android.package (e.g., com.yourname.project).
• Scheme: Update "scheme". This is crucial for deep linking (e.g., change authsetup to your-app-scheme).

Important: If you change the scheme in app.json, you must also update the scheme in lib/auth.ts:

// lib/auth.ts
const redirectUrl = Linking.createURL("auth/callback", { scheme: "your-app-scheme" });

3. Google Auth Setup

1. Google Cloud Console:

   • Create a new project.
   • Configure the OAuth Consent Screen.
   • Create OAuth 2.0 Client IDs:
     • Web Client ID: Required for Supabase.
     • iOS Client ID: Use your Bundle Identifier.
     • Android Client ID: Use your Package Name and SHA-1 certificate fingerprint.

2. Supabase Auth Settings:

   • Go to Authentication > Providers > Google.
   • Enable Google.
   • Paste your Web Client ID (from Google Cloud) into the "Client ID" field.
   • (Optional) Paste your Client Secret if verified.
   • Redirect URL: Add your app's deep link scheme to the Redirect URLs list in Supabase (Authentication > URL Configuration):
     • Format: your-app-scheme://auth/callback (e.g., authsetup://auth/callback)
     • Also add: com.yourname.project://auth/callback (for Android intents)

🏃‍♂️ Usage

Start the development server:

npx expo start

Run on Android:

npx expo run:android

Run on iOS:

npx expo run:ios

📂 Project Structure

• app/: Expo Router pages.
  • (auth)/: Public auth screens (Login).
  • (tabs)/: Protected app screens (Home, Profile).
  • _layout.tsx: Root layout with auth protection logic.
• components/: Reusable UI components.
• context/: React Contexts (AuthProvider).
• lib/:
  • auth.ts: Google Sign-In logic.
  • supabaseClient.ts: Supabase client configuration.
  • ui.ts: Responsive UI helpers.

🧩 Key Dependencies

If you are migrating this code to another project, ensure you install:

npx expo install @supabase/supabase-js @react-native-async-storage/async-storage @expo-google-fonts/manrope expo-auth-session expo-crypto expo-linking expo-router expo-secure-store expo-web-browser expo-splash-screen react-native-get-random-values react-native-url-polyfill

🐛 Troubleshooting

• "Redirect URL mismatch": Ensure the URL scheme in app.json, lib/auth.ts, and Supabase Dashboard (URL Configuration) matches exactly.
• "Google Sign In Error": formatting of the SHA-1 fingerprint for Android or Bundle ID for iOS in Google Cloud Console must be correct.
• "Logs appearing in terminal": Check lib/supabaseClient.ts and set debug: false if you want to silence Supabase logs.