Skip to main content
Mobile Launcher
First App Launch in 30 minutes

Supabase Integration

Configure Supabase backend for your Expo app

Supabase Integration for Expo

Supabase is already installed and fully integrated into the boilerplate. This guide shows you how to configure your own Supabase project and connect it to the app.

What's Included

  • Authentication: Email/Password, Apple, Google, and Magic Links
  • Database: PostgreSQL with Row Level Security (RLS)
  • Data Sync: Custom offline-first synchronization via RTK and Redux Toolkit
  • Storage: File uploads for user avatars and media

Step 1: Create a Supabase Project

Sign Up or Log In

  1. Go to supabase.com
  2. Click Start your project or Sign In
  3. Sign in with GitHub, GitLab, or email

Create New Project

  1. Click New project in the dashboard
  2. Select your Organization (or create one if needed)
  3. Fill in project details:
    • Project name: e.g., "My App"
    • Database Password: Create a strong password and save it securely
    • Region: Choose the closest to your users for better performance
  4. Click Create new project
  5. Wait 1-2 minutes for your database to provision

Supabase New Project

Why this matters: Choosing the right region reduces latency for your users. The database password is only shown once, so save it immediately!

Get Your API Credentials

Once your project is ready:

  1. Click the Settings icon (gear) in the left sidebar
  2. Go to API under Project Settings
  3. Copy these values:
    • Project URL: https://xxxxx.supabase.co
    • anon public key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Supabase API Settings

Quick Navigation: You can also access your API keys directly at https://supabase.com/dashboard/project/YOUR_PROJECT_ID/settings/api

Never expose your service_role key in client-side code. Only use the anon key in your Expo app.

Step 2: Configure Environment Variables

Add your Supabase credentials to the .env file in your project root:

# Supabase Configuration
EXPO_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx

Expo requires environment variables to be prefixed with EXPO_PUBLIC_ to be accessible in your app code.

Step 3: Set Up Authentication

Enable Email Authentication

  1. In Supabase Dashboard, go to Authentication in the left sidebar
  2. Click Providers tab
  3. Find Email in the list (enabled by default)
  4. Configure options:
    • Enable email confirmations: Toggle based on your needs
    • Minimum password length: Set to 8 or higher
  5. Click Save

Supabase Auth Providers

  1. Go to Authentication → URL Configuration
  2. Set your Site URL:
    • For Expo development: exp://localhost:3000 or your local IP
    • For production: Your app's URL scheme (e.g., myapp://)
  3. Add Redirect URLs:
    • exp://localhost:3000
    • exp://192.168.x.x:3000 (replace with your local IP)
    • myapp://auth/callback
  4. Click Save

Supabase URI Settings

Remember to click Save at the bottom, this is often missed!

Enable Google OAuth (Optional)

Step A: Create Google OAuth Credentials

  1. Go to Google Cloud Console
  2. Create a new project or select existing
  3. Go to APIs & Services → Credentials
  4. Click Create Credentials → OAuth client ID
  5. Select Web application
  6. Add Authorized redirect URI: https://your-project-id.supabase.co/auth/v1/callback
  7. Click Create
  8. Copy the Client ID and Client Secret

Supabase Google Console

Step B: Configure Supabase

  1. In Supabase, go to Authentication → Providers → Google
  2. Toggle Enable Sign in with Google
  3. Paste your Client ID and Client Secret
  4. Click Save

Step C: Update app.json

The boilerplate already has the Google Sign-In plugin configured. Make sure your app.json has the correct bundleIdentifier (iOS) and package (Android) matching what you registered in Google Cloud Console. Also add your iOS client ID to the CFBundleURLSchemes array.

Enable Apple Sign-In (Optional)

Step A: Configure Apple Developer

  1. Go to Apple Developer Portal
  2. Navigate to Certificates, Identifiers & Profiles → Identifiers
  3. Select your App ID and enable Sign In with Apple
  4. Create a Services ID for web authentication
  5. Configure the return URL: https://your-project-id.supabase.co/auth/v1/callback
  6. Create a Key with Sign In with Apple enabled
  7. Download the .p8 key file

Step B: Configure Supabase

  1. In Supabase, go to Authentication → Providers → Apple
  2. Toggle Enable Sign in with Apple
  3. Enter your Services ID (Client ID)
  4. Enter your Secret Key (content of .p8 file)
  5. Enter your Team ID and Key ID
  6. Click Save

Step C: Update app.json

The boilerplate already has Apple authentication configured. Verify your app.json has usesAppleSignIn: true under the iOS section, and expo-apple-authentication in the plugins array.

Step 4: Set Up Database

Create a Profiles Table

  1. In Supabase Dashboard, click SQL Editor in the sidebar
  2. Click New query
  3. Paste and run the SQL that creates a profiles table with RLS policies. The boilerplate expects the following structure:
    • id (UUID, references auth.users)
    • email (TEXT)
    • full_name (TEXT)
    • avatar_url (TEXT)
    • created_at and updated_at (timestamps)
  4. Enable Row Level Security so users can only read and update their own profile
  5. Create a trigger that auto-creates a profile row when a new user signs up
  6. Click Run to execute

Supabase SQL Editor

Tip: You can also use the "Table Editor" UI to create tables, but running the SQL snippet is much faster and less error-prone.

Verify Table Creation

  1. Go to Table Editor in the sidebar
  2. You should see the profiles table
  3. Click on it to view the structure and columns

Supabase Table View

Step 5: Set Up Storage (Optional)

Create a Storage Bucket

  1. In Supabase Dashboard, go to Storage in the sidebar
  2. Click New bucket
  3. Enter bucket details:
    • Name: avatars
    • Public bucket: Toggle ON for publicly accessible images
  4. Click Create bucket

Supabase Storage Buckets

Configure Storage Policies

  1. Click on your avatars bucket
  2. Go to Policies tab
  3. Click New Policy → For full customization
  4. Add these policies:
    • Upload policy: Allow authenticated users to upload files to their own folder (using their user ID as the folder name)
    • Read policy: Allow public read access so avatars can be displayed
    • Delete policy: Allow authenticated users to delete files from their own folder

Common Issues

IssueSolution
CORS errorsAdd your app URL to Authentication → URL Configuration
RLS blocking queriesCheck policies in Table Editor → select table → Policies
Auth session not persistingEnsure AsyncStorage is imported and configured
Type errorsRegenerate types with npx supabase gen types typescript
Connection refusedVerify URL and key in .env; restart Expo with --clear flag
Deep links not workingCheck URL Configuration in Supabase matches your app.json scheme

Security Best Practices

  1. Always enable RLS on tables containing user data
  2. Use the anon key in client-side code, never service_role
  3. Validate on the server for sensitive operations using Edge Functions
  4. Limit storage access with proper bucket policies
  5. Test RLS policies by querying as different authenticated users

Where the Code Lives

FeatureLocation
Clientsrc/lib/supabase.ts
Auth Servicesrc/features/auth/services/auth.service.ts
Data Syncsrc/services/sync/ (RTK + Redux Toolkit)
Typessrc/types/supabase.ts

Additional Resources

Tool Integration

Integrate essential services like Firebase, Supabase, RevenueCat, and Expo Dev into your mobile app

RevenueCat Integration

Implement in-app subscriptions and purchases in your Expo app

On this page

Supabase Integration for ExpoWhat's IncludedStep 1: Create a Supabase ProjectSign Up or Log InCreate New ProjectGet Your API CredentialsStep 2: Configure Environment VariablesStep 3: Set Up AuthenticationEnable Email AuthenticationConfigure Deep Links for ExpoEnable Google OAuth (Optional)Enable Apple Sign-In (Optional)Step 4: Set Up DatabaseCreate a Profiles TableVerify Table CreationStep 5: Set Up Storage (Optional)Create a Storage BucketConfigure Storage PoliciesCommon IssuesSecurity Best PracticesWhere the Code LivesAdditional Resources