Tutorial: How to connect Supabase database to your Bind AI application

This tutorial will walk you through connecting a Supabase database to your web application, step by step. No technical background required!

What is Supabase?

Supabase is a free database service that lets you store and manage data for your applications without setting up complex servers. Think of it as a digital filing cabinet that your website can read from and write to.

Part 1: Creating Your Supabase Account and Database

Step 1: Sign Up for Supabase

1. Go to supabase.com

2. Click "Start your project"

3. Sign up with your GitHub account or email

4. Verify your email if required

Step 2: Create a New Project

1. Once logged in, click "New Project"

2. Choose your organization (usually your username)

3. Fill in the project details:

   • Name: Give your project a memorable name (e.g., "My App Database")

   • Database Password: Create a strong password and save it somewhere safe

   • Region: Choose the region closest to your users

4. Click "Create new project"

5. Wait 2-3 minutes for the project to be set up

---

Part 2: Creating Your Database Table

Step 3: Create a Table

1. In your Supabase dashboard, click "Table Editor" in the left sidebar

2. Click "Create a new table"

3. Fill in the table details:

   • Name: Enter your table name (e.g., "workflows")

   • Description: Optional description of what this table stores

4. Click "Save"

Step 4: Add Columns to Your Table

Your table needs columns to store different types of data. Here's how to add them:

1. Click "New Column" button

2. For each column, fill in:

   • Name: The column name (e.g., "name")

   • Type: Choose the data type:

     • text - for names, descriptions, short text

     • bigint - for numbers (IDs, counts)

     • jsonb - for complex data structures

     • timestamp with time zone - for dates and times

   • Default Value: Leave blank unless you want a default

   • Primary Key: Only check this for your ID column

3. Click "Save"

Example columns for a workflows table:

• id (bigint, Primary Key) - Auto-generated unique identifier

• created_at (timestamp with time zone) - When the record was created

• name (text) - The workflow name

• workflow_data (jsonb) - Additional workflow information

Tip: Supabase automatically creates id and created_at columns when you create a new table. You just need to add your custom columns!

---

Part 3: Getting Your Connection Details

Step 5: Find Your Project URL and API Key

1. In your Supabase dashboard, click "Settings" in the left sidebar

2. Click "API" under Settings

3. You'll see two important pieces of information:

   • Project URL: Looks like https://abcdefg.supabase.co

   • Public anon key: A long string starting with eyJ...

4. Copy both values - you'll need them in your code

Important: The "anon" key is safe to use in your website code. Never use the "service_role" key in browser code!

---

Part 4: Disable Row Level Security (For Beginners)

Step 6: Turn Off RLS (Row Level Security)

Row Level Security can prevent your app from saving data. For learning purposes, we'll disable it:

1. Go to "Authentication" in the left sidebar

2. Click "Policies"

3. Find your table (e.g., "workflows")

4. You'll see a toggle switch for "Enable RLS"

5. Click to turn it OFF

6. Confirm when prompted

Note: In production apps, you should enable RLS and create proper policies for security. But for learning, turning it off makes things simpler.

---

Part 5: Connecting to Your Application

Step 7: Add Supabase to Your Code

Option A: Use AI to Generate the Code (Recommended for Beginners)

Instead of writing code manually, you can ask AI to create it for you. Try out these test prompts to create a simple html file and save data to Supabase :

Prompt 1 - Generate Basic HTML Form:

Create a simple HTML form with a text input for "name" and a submit button. Include the Supabase JavaScript library from CDN and link to a script.js file.

Prompt 2 - Generate Supabase JavaScript Code:

Create JavaScript code that connects to Supabase and saves form data to a table called "workflows" with columns: name (text) and workflow_data (jsonb). Include proper error handling and success messages. Use placeholder values for the Supabase URL and API key that I can replace later.

Option B: Manual Setup (If you prefer to type)

If you want to add Supabase manually, add this line before your closing </body> tag in your HTML:

Html<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

Step 8: Update Your Supabase Credentials

After the AI generates your code (or if you wrote it manually), you need to replace the placeholder values:

1. Find your JavaScript file (usually named script.js)

2. Look for these lines at the top of the file:

   Javascriptconst SUPABASE_URL = 'YOUR-SUPABASE-URL-HERE';
   const SUPABASE_ANON_KEY = 'YOUR-SUPABASE-ANON-KEY-HERE';

3. Replace the placeholder text with your actual values from Step 5:

   • Replace 'YOUR-SUPABASE-URL-HERE' with your Project URL (keep the quotes)

   • Replace 'YOUR-SUPABASE-ANON-KEY-HERE' with your anon key (keep the quotes)

Example of what it should look like:

Javascriptconst SUPABASE_URL = 'https://iloddfdekwsnrxpncwnhlgz.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NidfdfIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imlsb2Rla3dzbnJ4cG5jd25obGd6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDgxNTA4OTcsImV4cCI6MjA2MzcyNjg5N30.7K2yOrXEqZ3e7H1yyVQyc3hSntQNUp7WI3pbLrePqQc';

Step 9: Update Table and Column Names

If your table or column names are different from what the AI generated:

1. Find the table name in your JavaScript code - look for something like:

   Javascript.from('workflows')

   Replace 'workflows' with your actual table name

2. Find the column names in the insert section - look for something like:

   Javascript.insert({
       name: name,
       workflow_data: {}
   })

   Update the column names to match your actual columns

---

Common Issues and Solutions

Issue 1: "Invalid API key" or Connection Errors

Symptoms: Error messages about invalid keys or failed connections

Solutions:

• Double-check your URL and anon key from the Supabase dashboard

• Make sure there are no extra spaces or missing characters

• Verify you're using the anon key, not the service_role key

Issue 2: Data Not Saving (No Error Messages)

Symptoms: Form submits but nothing appears in your Supabase table

Solutions:

1. Check Row Level Security: Make sure RLS is disabled (see Step 6)

2. Verify table and column names: They must match exactly (case-sensitive)

3. Check browser console: Press F12, look for error messages in the Console tab

Issue 3: "Permission Denied" Errors

Symptoms: Error messages about permissions or access denied

Solutions:

• Ensure Row Level Security is disabled

• Verify you're using the correct anon key

• Check that your table exists and column names are correct

Issue 4: "Column does not exist" Errors

Symptoms: Error messages about missing columns

Solutions:

• Check spelling of column names in your code

• Verify the columns exist in your Supabase table

• Column names are case-sensitive

Issue 5: Wrong Data Types

Symptoms: Errors about data type mismatches

Solutions:

• Don't manually set id values if using bigint auto-increment

• Ensure JSON data is properly formatted for jsonb columns

• Match text data to text columns, numbers to numeric columns

---

Testing Your Connection

Step 10: Verify Everything Works

1. Test the connection: Try saving a simple record through your form

2. Check Supabase: Go to your Table Editor and see if the data appears

3. Check browser console: Press F12 and look for any error messages

4. Check Supabase logs: In your dashboard, go to "Logs" → "API" to see request logs

---

Quick Troubleshooting Checklist

When something isn't working, check these in order:

1. ✅ URL and Key: Are they copied correctly from Supabase dashboard?

2. ✅ Table Name: Does it match exactly (case-sensitive)?

3. ✅ Column Names: Do they match your table schema?

4. ✅ RLS: Is Row Level Security disabled?

5. ✅ Browser Console: Any error messages when you submit?

6. ✅ Supabase Logs: Any failed requests in the API logs?

---

Next Steps

Once you have basic connectivity working:

1. Learn about Row Level Security: Enable it and create policies for better security

2. Add more features: Reading data, updating records, deleting records

3. User authentication: Let users log in and manage their own data

4. Real-time updates: Subscribe to database changes

Congratulations! You now have a working database connection. Start simple and build up your features gradually.