Supabase Integration

Supabase gives your app superpowers! It's a complete backend-as-a-service that handles everything from user accounts to databases to file uploads. Best of all, it's free to get started and the AI does all the heavy lifting for you.

🎉 No backend experience needed! Just tell the AI what you want — "add user login" or "save data to a database" — and it handles the rest.

Supabase Integration Overview

Video coming soon

What Can You Build?

With Supabase connected, the possibilities are endless:

FeatureExample Prompt
User Login"Add email/password authentication"
Social Login"Let users sign in with Google"
Database"Create a products table and let users add products"
File Upload"Add profile picture upload for users"
Real-time"Make the comments update in real-time"

Getting Started: 3 Easy Steps

Step 1: Create a Free Supabase Account

  1. Go to supabase.com
  2. Click "Start your project"
  3. Sign up with GitHub or email (it's free!)
  4. Create an organization when prompted
💡 Pro Tip: You can create a Supabase project now, or let IndigiCoder help you select one later. The free tier includes 2 projects with generous limits!

Creating a Supabase Account

Video coming soon

Step 2: Connect Supabase to IndigiCoder

  1. In IndigiCoder, click your profile iconIntegrations
  2. Find the Supabase card
  3. Click "Connect Supabase"
  4. You'll be redirected to Supabase — click "Authorize"
  5. That's it! You'll see a success message
What does "Authorize" mean? You're giving IndigiCoder permission to:
  • See your Supabase projects
  • Create database tables for your apps
  • Get API keys so your app can talk to Supabase
Your data stays in YOUR Supabase account. IndigiCoder just helps you build with it!

Connecting Your Supabase Account

Video coming soon

Step 3: Link a Project

Now connect Supabase to your IndigiCoder project:

  1. Open your project in IndigiCoder
  2. Click "Project Settings" (gear icon)
  3. Find "Supabase Integration"
  4. Click "Connect a project"
  5. Select your Supabase project from the dropdown
  6. Done! The AI can now use Supabase in your app

Linking Supabase to Your Project

Video coming soon

Adding User Authentication

User login is usually the first thing people add. Here's how easy it is:

Example Prompts

"Add user authentication with login and signup pages"
"Add Google login button"
"Make the dashboard only accessible to logged-in users"
"Add a forgot password flow"

What the AI Creates

  • ✅ Beautiful login & signup forms
  • ✅ Auth state management (knows who's logged in)
  • ✅ Protected routes (redirects if not logged in)
  • ✅ Logout functionality
  • ✅ User profile display
Social Logins (Google, GitHub, etc.): After the AI adds social login, you'll need to enable the provider in your Supabase Dashboard → Authentication → Providers. It takes about 2 minutes to set up!

Adding User Login with Supabase

Video coming soon

Building with a Database

Need to store data? Just describe what you want and the AI creates everything:

Example Prompts

"Create a tasks table with title, description, status, and due date. Add a form to create tasks and show them in a list."
"Add the ability to mark tasks as complete and delete them"
"Create a products catalog with name, price, and image. Let users add items to a cart."

What the AI Creates

  • ✅ Database table with proper columns
  • ✅ Security rules (only you can see your data)
  • ✅ TypeScript types for type safety
  • ✅ Forms to add/edit data
  • ✅ Lists/tables to display data
  • ✅ Delete and update functionality

Creating Database Tables with AI

Video coming soon

Uploading Files

Profile pictures, product images, documents — Supabase handles it all:

"Add profile picture upload for users"
"Let vendors upload product images"
"Create a document sharing feature with file upload"

Real-time Features

Make your app feel alive with real-time updates:

"Make the messages update in real-time like a chat app"
"Show a live notification when someone adds a comment"

How It Works Behind the Scenes

When you link a Supabase project, IndigiCoder securely stores:

CredentialWhat It DoesSecurity
Project URLYour app talks to Supabase through this URLPublic (safe to share)
Anon KeyLets your app access Supabase from the browserPublic (safe in client code)
Service KeyAdmin access for creating tables🔒 Encrypted (never in your app)
🔒 Security Note: The service role key is encrypted and ONLY used server-side when the AI creates database tables. It's never exposed in your generated app code!

Troubleshooting

I don't see my Supabase projects

Make sure you've connected your Supabase account first (Settings → Integrations). If you just created a project, refresh the page — it can take a minute to appear.

My Supabase project says "Paused"

Free-tier projects pause after 1 week of inactivity. Go to your Supabase Dashboard and click "Restore" to wake it up.

Can I use an existing Supabase project with tables?

Absolutely! The AI will see your existing tables and can work with them. Just describe what you want and it'll use your existing structure.

How do I disconnect Supabase?

  1. Go to Project Settings
  2. Find the Supabase card
  3. Click "Disconnect Project"

Your data stays in Supabase — disconnecting just removes the link. You can reconnect anytime!

Troubleshooting Supabase Connection

Video coming soon

Supabase Integration - Documentation | IndigiCoder