Skip to main content

Supabase Integration

Supabase powers INSTROC's built-in backend with database, authentication, and storage.

Overview​

Every INSTROC project includes Supabase by default:

  • PostgreSQL Database - Relational data storage
  • Authentication - User management
  • Storage - File uploads
  • Real-time - Live data subscriptions

You don't need to set up anything—it's ready to use!

Using Supabase in INSTROC​

Via AI​

Ask the AI to create backend functionality:

Create a blog with posts table, user authentication,
and the ability to upload cover images

The AI will set up:

  • Database tables with proper schema
  • Authentication flows
  • Storage buckets
  • API routes to connect everything

Via Code​

Import the Supabase client:

import { db, auth, storage } from '@/lib/backend';

// Database query
const { data: posts } = await db
  .from('posts')
  .select('*')
  .order('created_at', { ascending: false });

// Authentication
const { data: { user } } = await auth.getUser();

// Storage
const { data: { publicUrl } } = storage
  .from('images')
  .getPublicUrl('photo.jpg');

Connecting Your Own Supabase​

If you need more control or have an existing Supabase project:

1. Get Your Supabase Credentials​

  1. Go to supabase.com and open your project
  2. Go to Settings → API
  3. Copy:
    • Project URL
    • anon (public) key
    • service_role (secret) key

2. Connect to INSTROC​

  1. Open your INSTROC project
  2. Go to Project Settings → Integrations
  3. Click Supabase → Use Custom
  4. Enter your credentials
  5. Click Save

3. Environment Variables​

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Database​

See Database documentation for detailed usage.

Quick Reference​

// Select
const { data } = await db.from('posts').select('*');

// Insert
const { data } = await db.from('posts').insert({ title: 'Hello' });

// Update
const { data } = await db.from('posts').update({ title: 'Updated' }).eq('id', 1);

// Delete
await db.from('posts').delete().eq('id', 1);

// Join
const { data } = await db.from('posts').select('*, author:users(name)');

Authentication​

See Authentication documentation for detailed usage.

Quick Reference​

// Sign up
const { data, error } = await auth.signUp({
  email: 'user@example.com',
  password: 'password123'
});

// Sign in
const { data, error } = await auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
});

// Sign out
await auth.signOut();

// Get current user
const { data: { user } } = await auth.getUser();

Storage​

See Storage documentation for detailed usage.

Quick Reference​

// Upload
const { data, error } = await storage
  .from('images')
  .upload('path/file.jpg', file);

// Get public URL
const { data: { publicUrl } } = storage
  .from('images')
  .getPublicUrl('path/file.jpg');

// Delete
await storage.from('images').remove(['path/file.jpg']);

Real-time​

Subscribe to database changes:

const channel = db
  .channel('posts-changes')
  .on('postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('Change:', payload);
      // Update UI
    }
  )
  .subscribe();

// Cleanup
channel.unsubscribe();

Subscribe to Specific Events​

// Only inserts
.on('postgres_changes',
  { event: 'INSERT', schema: 'public', table: 'posts' },
  handleInsert
)

// Only updates
.on('postgres_changes',
  { event: 'UPDATE', schema: 'public', table: 'posts' },
  handleUpdate
)

// Only deletes
.on('postgres_changes',
  { event: 'DELETE', schema: 'public', table: 'posts' },
  handleDelete
)

Edge Functions​

Run custom server-side code with Edge Functions:

// supabase/functions/hello/index.ts
Deno.serve(async (req) => {
  const { name } = await req.json();
  return new Response(
    JSON.stringify({ message: `Hello ${name}!` }),
    { headers: { 'Content-Type': 'application/json' } }
  );
});

Call from your app:

const { data, error } = await db.functions.invoke('hello', {
  body: { name: 'World' }
});

Row Level Security​

Protect your data with RLS policies:

-- Enable RLS
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Users can only see their own posts
CREATE POLICY "Users see own posts"
ON posts FOR SELECT
USING (user_id = auth.uid());

-- Anyone can see published posts
CREATE POLICY "Public sees published"
ON posts FOR SELECT
USING (published = true);

Supabase Dashboard​

Access the full Supabase dashboard:

  1. Go to Project Settings → Backend
  2. Click Open Supabase Dashboard

From the dashboard you can:

  • Run SQL queries
  • View and edit data
  • Manage users
  • Configure auth providers
  • View logs and metrics

Migration​

Export from INSTROC​

Export your database schema and data:

supabase db dump -f backup.sql

Import to New Project​

Restore to another Supabase project:

psql -h db.xxxxx.supabase.co -U postgres -d postgres -f backup.sql

Resources​