> For the complete documentation index, see [llms.txt](https://bind-ai.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bind-ai.gitbook.io/docs/ide-by-bind-ai/tutorial-how-to-connect-supabase-database-to-your-bind-ai-application.md).

# 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](https://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:**

```css
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:**

```css
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
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:

   ```javascript
   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:**

```javascript
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
   Javascript.from('workflows')
   ```

   Replace `'workflows'` with your actual table name
2. **Find the column names** in the insert section - look for something like:

   ```javascript
   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.<br>