> ## Documentation Index
> Fetch the complete documentation index at: https://docs.readdy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate with Supabase

> Connect your Readdy website with Supabase for user authentication, database management, and backend services integration

## Supabase Overview

### What is Supabase?

[Supabase](https://supabase.com) is a powerful and user-friendly Backend-as-a-Service platform built on PostgreSQL. It provides developers with a complete suite of backend tools needed for modern application development, including:

* 🌐 Database (PostgreSQL) - Powerful relational database with real-time data synchronization
* 🔐 Authentication - Complete user login and registration system supporting multiple login methods
* 🗂️ Storage - Secure file storage service for managing images, documents, and other resources
* ⚡ Edge Functions - Serverless cloud functions for handling complex backend logic

### Integrating Supabase with Readdy

Once you connect Supabase to your Readdy project, you can add Database, Authentication, Storage, and Edge Functions to your projects. Zero coding needed - Readdy executes automatically.

### Supabase Pricing

Supabase offers a **generous free tier** that's sufficient for prototyping and small to medium projects. If you need more powerful features or resources in the future, you can upgrade to the corresponding paid plans in Supabase.

At this stage, you can experience the Supabase and Readdy integration at **zero cost**!

## Authorization

Connecting Supabase with Readdy requires just a simple click. Since Supabase is a separate platform, you'll need a Supabase account. Don't worry - Readdy will guide you through the entire process. Supabase offers a free tier, so you can add it to your project at no cost initially.

### Step 1: Connect

In Readdy, click the **Connects** button at the top, then select **Supabase**.

<Frame>
  <img src="https://mintcdn.com/readdy/DVR1m5KO54hpjW-t/images/go-to-connects.png?fit=max&auto=format&n=DVR1m5KO54hpjW-t&q=85&s=518b280f4f709d1d7017759adc5242f6" alt="Connects button in the top navigation bar" width="1516" height="904" data-path="images/go-to-connects.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/readdy/DVR1m5KO54hpjW-t/images/connects/supabase.png?fit=max&auto=format&n=DVR1m5KO54hpjW-t&q=85&s=8fefc5b36bdc2b096fe97014a0fba336" alt="Supabase in the Connects panel" width="2016" height="1724" data-path="images/connects/supabase.png" />
</Frame>

When you need Supabase services, the AI will provide relevant prompts, and you can click the connection button in the conversation to proceed.

<Frame>
  <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/connect-supabase-chat.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=889cfe50cc07a2c281625ab8289460b2" alt="Navigate to Supabase integration in the chat" width="4000" height="2296" data-path="images/connect-supabase-chat.png" />
</Frame>

### Step 2: Configure

If you haven't logged into your Supabase account, please sign in or register first.

<Frame>
  <img src="https://mintcdn.com/readdy/XM6zx4Mq-XYNJTgS/images/signin-supabase.png?fit=max&auto=format&n=XM6zx4Mq-XYNJTgS&q=85&s=a69daf012aa081da9249a0dd36985692" width="4000" height="2296" data-path="images/signin-supabase.png" />
</Frame>

Once complete, Supabase will prompt for Readdy authorization. Next, you'll select a Supabase organization to connect with Readdy.

<Frame>
  <img src="https://mintcdn.com/readdy/9Cdr9atkDMg606to/images/select-organization.png?fit=max&auto=format&n=9Cdr9atkDMg606to&q=85&s=6a2b59225dabb75570759884ab8433f1" width="4002" height="2296" data-path="images/select-organization.png" />
</Frame>

Upon successful authorization, Readdy will automatically redirect you back to the Readdy application. You'll need to select or create a new project to match your Readdy project.

* Click **"Connect"** to connect the project

<Frame>
  <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/connect-project.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=a79139a3287580e7826cfc0f4913c30e" width="4000" height="2296" data-path="images/connect-project.png" />
</Frame>

* When creating a new project, you'll first need to select a region. Choose one closest to your user base for optimal performance.

<Frame>
  <img src="https://mintcdn.com/readdy/9Cdr9atkDMg606to/images/select-region.png?fit=max&auto=format&n=9Cdr9atkDMg606to&q=85&s=baed86d64f5b7c9c65ca9b3f9a859cf3" width="4000" height="2296" data-path="images/select-region.png" />
</Frame>

Once connected successfully, Readdy will automatically send a confirmation message "Supabase is all set in my project." to complete the project configuration and handle connection operations.

## Building with Supabase

Integrating Supabase with Readdy is incredibly simple. Here are specific examples of integrating Supabase functionality into your project.

### User Login

#### Email/Password

After connecting Supabase to your Readdy project, you can directly add Supabase's authentication system to your project through conversation.

**Example prompt:**

```
Add login and registration functionality using Supabase authentication system
```

**Results:**

* **In your app**: After executing the above prompt, a login/registration page will be generated in your Readdy project for user authentication operations.
* **Supabase user table**: In your Supabase project dashboard, you can find **Authentication** > **Users** to view all registered users.

<Frame>
  <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/auth-users.png?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=57b6261651f5341be5e5c67439818579" width="4000" height="2298" data-path="images/auth-users.png" />
</Frame>

<Note>
  In Supabase, you can also configure whether registered users need email verification. The setting page is in **Authentication** > **Sign In / Providers**, select **Auth Providers** > **Email**. During development and testing, you can disable **"Confirm email"** for more testing, but it's recommended to enable this setting before production release to ensure user authenticity.

  <Frame>
    <video src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/confirm-email.mp4?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=12591c0728a1c56caaeb02a7dd612d23" controls autoPlay={false} muted data-path="images/confirm-email.mp4" />
  </Frame>

  Before publishing your website, you need to configure Redirect URLs in Supabase's **Authentication** > **URL Configuration**. The format should be: https\://\*.yourdomain.com/\*\*, where \*.yourdomain is the domain name you fill in when publishing your website.

  <Frame>
    <img src="https://mintcdn.com/readdy/XM6zx4Mq-XYNJTgS/images/supabase-auth-url-config.png?fit=max&auto=format&n=XM6zx4Mq-XYNJTgS&q=85&s=ced045ec5490b0cb7b7073a73c5694a1" width="2822" height="1840" data-path="images/supabase-auth-url-config.png" />
  </Frame>

  When testing before publishing your website, the "Confirm your mail" link in emails may redirect abnormally, but it will work normally after your website is published.
</Note>

#### Third-Party Login

Supabase also provides social media login/registration options, such as Google, Twitter, and Apple.

1. **Enable login methods in Supabase**: In **Sign In / Providers** > **Auth Providers**, enable the required providers. Follow Supabase's guidance to configure and save the necessary information.

<Frame>
  <img src="https://mintcdn.com/readdy/XM6zx4Mq-XYNJTgS/images/third-party-login.png?fit=max&auto=format&n=XM6zx4Mq-XYNJTgS&q=85&s=6248c85bde794cd0820e58ed46d37beb" width="3162" height="1854" data-path="images/third-party-login.png" />
</Frame>

2. **Add login methods in Readdy project**: After completing the above configuration, you can add corresponding login methods through conversation. For example:

```
Add Google login to the login/registration page using Supabase integration.
```

After completing these steps, your app will support Google login, redirecting to Google for verification and then returning to your application.

[Learn how to build Google Sign-in from scratch.](/integrations/google-login)

### Database

In your product, besides login/registration, database reading and writing might also be necessary. For example:

* Saving user contact information to database tables.
* Dynamically retrieving product information from database tables.

1. **Create data tables in Readdy**: You can create data tables and product tools through conversation. For example:

```
Add a contact information form and save the information to a database table.
```

2. **Automatic implementation**: After receiving the request, Readdy will automatically implement the related UI and logic, generate database operation SQL, and automatically sync to Supabase for table creation and modification operations.

<Note>
  SQL is automatically generated by AI. To avoid dangerous operations from AI errors, the SQL will block dangerous operations like deleting tables/fields or clearing tables. If you need to delete tables or fields, you can do so in Supabase’s Table Editor.
</Note>

After completion, you can submit data in your product and check if it's correctly saved in Supabase's Table Editor.

<Warning>
  **Row Security Policy Check**: **Before launching your product, make sure to check the row security policies of your data tables.** Row security policies define which users can read and write each row of data in the database.
  When generating, Readdy AI will also create relatively secure row security policy requirements. However, for greater security, please make sure to check in Supabase's Authentication > Policies before release.

  <Frame>
    <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/check-RLS.png?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=2e279d9f73aa4d58e8dfa4112e030d43" width="3244" height="1886" data-path="images/check-RLS.png" />
  </Frame>
</Warning>

### Edge Functions

In some product logic, you might need backend logic to help complete your product. For example:

* **Stripe payments**: Process subscription payments, one-time purchases, and refunds
* **AI service integration**: Generate content, analyze images, or provide chatbot functionality
* **Complex processing logic**: Calculate pricing, process bulk data, or generate reports
* **Third-party integrations**: Send emails, SMS notifications, or sync with CRM systems

You can add these functionalities through conversation in Readdy, and the system will automatically generate and deploy the necessary edge functions to Supabase. For example:

```
Add an AI chatbot feature using Supabase Edge Functions to connect with OpenAI's GPT-4o API
```

<Warning>
  For API keys used in functions, make sure to save them securely in **Edge Functions** > **Secrets** in the Supabase dashboard to ensure key security. **Do not directly input keys to AI in conversations.**

  <Frame>
    <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/add-secretskey.png?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=bea81e313263e7040a02be172d15dcdd" width="3244" height="1974" data-path="images/add-secretskey.png" />
  </Frame>
</Warning>

### File Storage

Supabase provides 1GB of file storage space for storing images, PDFs, and other files. For example, if your application needs users to upload avatars or files.

You can add a file upload component through conversation in Readdy, which will upload files to Supabase Storage.

Your product pages will also use these file links for display.

## Switch or Remove a Supabase Account Connection

<Note>
  Unless necessary, we generally do not recommend switching Supabase accounts. After switching, you will usually need to re-check project bindings, authentication, database, Storage, Edge Functions, and related integrations, which can take additional time to verify.
</Note>

Readdy currently does not support disconnecting a Supabase account directly inside a project.

If you want to stop using the current Supabase account with Readdy, or switch to another Supabase account, you must first remove the authorized **Readdy** app from the current account in **Supabase**, then reconnect.

### When You Might Need This

* You want to connect the current Readdy project to a different Supabase account
* The current Supabase authorization was granted to the wrong account and needs to be redone
* The current Readdy project is connected to the wrong Supabase project
* Account ownership has changed and a new Supabase admin account should be used

### Steps

If you want to switch to another Supabase account, or stop using the current one with Readdy, follow these steps:

<Steps>
  <Step title="Step 1: Remove the Readdy app in Supabase">
    First, sign in to the Supabase account that is currently connected. You can access it here: [Supabase Dashboard](https://supabase.com/dashboard)

    Go to **Settings** > **OAuth Apps** > **Authorized apps**, find the authorized **Readdy** app, and remove it.

    If you plan to switch to another Supabase account, complete this step first, then sign out and sign in to the target account.

    <Frame>
      <img src="https://mintcdn.com/readdy/LhbEdgmMGSb900WF/images/supabase-oauth-apps-readdy.png?fit=max&auto=format&n=LhbEdgmMGSb900WF&q=85&s=99b3ac080521dcd7e57ba8d0857c3065" alt="Authorized Readdy app in the Supabase OAuth Apps page" width="3840" height="1688" data-path="images/supabase-oauth-apps-readdy.png" />
    </Frame>
  </Step>

  <Step title="Step 2: Return to Readdy and reconnect">
    After removing the app, return to Readdy, refresh the current page, then click **Connect Supabase** to start the connection flow again.

    <Note>
      If Readdy does not immediately show the reconnect state after you return, refreshing the page usually fixes it.
    </Note>

    <Frame>
      <img src="https://mintcdn.com/readdy/LhbEdgmMGSb900WF/images/supabase-reconnect.png?fit=max&auto=format&n=LhbEdgmMGSb900WF&q=85&s=2e1a90d3a7b4fa8e7e7e47e12d026ad2" alt="Reconnect Supabase in Readdy" width="3840" height="1870" data-path="images/supabase-reconnect.png" />
    </Frame>
  </Step>

  <Step title="Step 3: Choose an organization and authorize">
    On the Supabase authorization page, select the **Organization** you want to authorize, then click **Authorize Readdy**.

    <Frame>
      <img src="https://mintcdn.com/readdy/LhbEdgmMGSb900WF/images/supabase-authorize-organization.png?fit=max&auto=format&n=LhbEdgmMGSb900WF&q=85&s=1ded3c72715400d4ee54eded8d42faec" alt="Select an organization and authorize Readdy in Supabase" width="3840" height="1866" data-path="images/supabase-authorize-organization.png" />
    </Frame>
  </Step>

  <Step title="Step 4: Choose a project or create a new one">
    After returning to Readdy, choose the **Project** you want to connect. If you do not have an existing project yet, you can create a new one here.

    <Frame>
      <img src="https://mintcdn.com/readdy/LhbEdgmMGSb900WF/images/supabase-select-project.png?fit=max&auto=format&n=LhbEdgmMGSb900WF&q=85&s=0ae5355e1bf62c868bb92f38cdf8aa4b" alt="Choose a Supabase project or create a new one in Readdy" width="3840" height="1870" data-path="images/supabase-select-project.png" />
    </Frame>
  </Step>
</Steps>

<Note>
  Simply signing out of Supabase in the browser and switching to another account is usually not enough to trigger the full reconnection flow in Readdy. You need to first remove the authorized **Readdy** app from the original Supabase account.
</Note>

<Note>
  The Supabase dashboard UI may change over time. Please use the actual labels and navigation shown in your Supabase account if they differ slightly from this guide.
</Note>

### Important Notes

* After switching accounts or removing authorization, any Readdy features that depend on Supabase may be affected, including user sign-in / sign-up, database reads and writes, form submissions, file uploads to Supabase Storage, Edge Functions, and integrations that rely on Supabase, such as Stripe, PayPal, and Resend.
* Switching accounts or removing authorization will not automatically delete existing database tables, auth users, Storage files, Edge Functions, or Secrets in Supabase.
* If you reconnect to a different Supabase project, existing data and configuration will not be migrated automatically. Please verify the migration status yourself.
* After reconnecting, we recommend checking Redirect URLs, Auth Providers, RLS Policies, Storage Buckets, Edge Functions, and Secrets again to make sure everything is configured correctly.
* Under the current credit rules, authorizing a Supabase account itself does not consume credits. However, connecting or switching a specific Supabase project may consume credits.
