Skip to Content
DocumentationThird Party ServicesSupabase

Supabase

Overview

Supabase is integrated into this React Native app as the backend-as-a-service platform, providing authentication, database (PostgreSQL), real-time subscriptions, and storage. It serves as the primary backend for user authentication, data persistence, and API interactions.

Configuration

Supabase is configured in lib/supabase.ts:

  • URL: Set via EXPO_PUBLIC_SUPABASE_URL environment variable
  • Anon Key: Set via EXPO_PUBLIC_SUPABASE_ANON_KEY environment variable
  • Storage: Uses AsyncStorage for session persistence
  • Auto Refresh: Token refresh is handled automatically
  • Session Persistence: Sessions are persisted across app restarts
  • URL Detection: Disabled (not needed for React Native)

Integration Details

Authentication

Authentication Methods

The app supports multiple authentication methods:

  1. Magic Link (OTP): Email-based one-time password

    • Component: components/auth/withMagic.tsx
    • Flow: User enters email → receives OTP → verifies code

  2. Google Sign-In: OAuth with Google

    • Component: components/auth/withGoogle.tsx
    • Uses @react-native-google-signin/google-signin
    • Exchanges Google ID token with Supabase

  3. Apple Sign-In: OAuth with Apple

    • Component: components/auth/withApple.tsx
    • Uses expo-apple-authentication
    • Exchanges Apple ID token with Supabase

  4. Facebook Sign-In: OAuth with Facebook

    • Component: components/auth/withFacebook.tsx
    • Uses OAuth flow with URL redirects

  5. Twitter Sign-In: OAuth with Twitter

    • Component: components/auth/withTwitter.tsx
    • Uses OAuth flow with URL redirects

Session Management

// Start auto-refresh (on app start)
supabase.auth.startAutoRefresh();
 
// Stop auto-refresh (on app background)
supabase.auth.stopAutoRefresh();
 
// Get current session
const {
  data: { session },
} = await supabase.auth.getSession();
 
// Listen for auth state changes
supabase.auth.onAuthStateChange((event, session) => {
  // Handle auth state changes
});
 
// Sign out
await supabase.auth.signOut();

Database Schema

The app uses Prisma for database schema management with multi-schema support:

  • Public Schema: Application tables (UserProfile, Image, Theme)
  • Auth Schema: Supabase authentication tables (users, identities, etc.)

Linking Auth and Public Schema

User profiles in the public schema are linked to Supabase auth users via foreign key:

model UserProfile {
  userId   String  @id @map("user_id") @db.Uuid
  users    users   @relation(fields: [userId], references: [id])
  // ... other fields
}

Environment Setup

1. Create Supabase Project

  1. Go to Supabase Dashboard 
  2. Create a new project
  3. Wait for database provisioning
  4. Copy your project URL and anon key

2. Configure Environment Variables

Add your Supabase credentials to your environment variables:

EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

3. Configure Authentication Providers

  1. Go to Authentication → Email Templates
  2. Customize the magic link email template
  3. Add the OTP code display: 
    <h2>Confirm your signup</h2>
<p>Please enter this code: {{ .Token }}</p>

Google OAuth

  1. Go to Authentication → Providers → Google
  2. Enable Google provider
  3. Add your Google OAuth client ID
  4. Configure redirect URLs

Apple OAuth

  1. Go to Authentication → Providers → Apple
  2. Enable Apple provider
  3. Add your Apple bundle IDs (iOS app and web)
  4. Configure Apple service credentials

Facebook/Twitter OAuth

  1. Go to Authentication → Providers
  2. Enable the desired provider
  3. Add OAuth client IDs and secrets
  4. Configure redirect URLs

4. Database Setup

Initial Migration

If using Prisma with an existing Supabase database:

# Pull existing schema
npx prisma db pull
 
# Create baseline migration
mkdir -p prisma/migrations/0_init_supabase
 
# Generate migration
npx prisma migrate diff \
  --from-empty \
  --to-schema-datamodel prisma/schema.prisma \
  --script > prisma/migrations/0_init_supabase/migration.sql
 
# Mark as applied
npx prisma migrate resolve --applied 0_init_supabase
  1. Go to Database → Tables
  2. Create foreign key relationship:
    • In your UserProfile table, link user_id to auth.users.id
  3. Set up Row Level Security (RLS) policies if needed

5. Configure Row Level Security

For tables that should be user-specific:

  1. Go to Database → Tables → Select table
  2. Enable Row Level Security
  3. Create policies:
    • Users can only read/update their own data
    • Use auth.uid() to reference the current user

6. Set Up Database Connection

Add database connection strings to environment variables:

DATABASE_URL=postgresql://postgres:[password]@[host]:5432/postgres
DIRECT_URL=postgresql://postgres:[password]@[host]:5432/postgres

Resources

SentryHooks