Skip to main content

Supabase integration

Add authentication, database, and storage to your apps.

Overview​

Supabase provides:

  • Authentication - User signup/login
  • Database - PostgreSQL with real-time
  • Storage - File uploads
  • Edge Functions - Serverless compute

Adding Supabase​

In your prompt​

Build a notes app with:
- User authentication using Supabase
- Notes stored in Supabase database
- Real-time sync across devices

To existing project​

Add Supabase authentication to replace the current auth system.
Migrate user data to Supabase.

Authentication​

Email/password​

Add Supabase auth with email and password signup.
Include email verification.

Social login​

Add Google and GitHub login using Supabase Auth.
Use Supabase magic link authentication (passwordless).

Database​

Creating tables​

Create these Supabase tables:
- profiles: id, user_id, display_name, avatar_url
- posts: id, author_id, title, content, created_at
- comments: id, post_id, author_id, content

Real-time subscriptions​

Add real-time updates so new posts appear instantly
without refreshing the page.

Row level security​

Enable RLS so users can only see their own data.
Admins can see everything.

Storage​

File uploads​

Add profile picture upload using Supabase Storage.
Resize images to 200x200 on upload.

Public vs private​

Store user uploads privately.
Only the owner can access their files.

Configuration​

Environment variables​

Add to your project:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key

Client setup​

Appifex configures the Supabase client automatically:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
)

Common patterns​

Protected routes​

Make the dashboard only accessible to logged-in users.
Redirect to login if not authenticated.

User profiles​

Create a profile page showing:
- User info from Supabase auth
- Custom fields from profiles table
- Edit functionality

Data relationships​

Show posts with author info.
Join posts table with profiles table.

Troubleshooting​

Auth not working​

  1. Verify Supabase URL and key
  2. Check auth settings in Supabase dashboard
  3. Ensure redirect URLs are configured

Database errors​

  1. Check table exists in Supabase
  2. Verify RLS policies
  3. Check column types match

Real-time not updating​

  1. Enable real-time on the table
  2. Check subscription is set up
  3. Verify RLS allows read access

Best practices​

Use RLS​

Always enable Row Level Security for production.

Handle errors​

Add error handling for Supabase operations.
Show user-friendly error messages.

Optimize queries​

Use Supabase's query builder efficiently.
Select only needed columns.