Supabase Integration

Connect your Meku projects to Supabase to add databases, authentication, and real-time APIs. The Supabase integration lets you manage data-driven full-stack apps without writing backend code. Meku connects directly through the generated React + Tailwind components.

Why Supabase integration

The Supabase integration allows you to:

• Connect a Supabase project to the Meku app.
• Automatically configure environment variables and client setup.
• Use the Supabase schema to generate CRUD logic and data-bound components.
• Enable authentication, storage, and real-time updates inside Meku projects.

Meku uses the Supabase connection to generate code that’s production-ready and aligned with the database structure.

Connect Supabase

• Log in to your Meku account.
• In Meku, open your Account Settings > Integrations > Supabase.

• Click on Connect Supabase to allow permission to connect Meku to your workspace.
• Then go to the project you want to connect, and click on the Supabase icon.

• Click Connect Supabase to link your Supabase project.
• Then click on the "Connect Project" button.

• Select your connected Supabase organisation and choose the project, or click "create project" to create a Supabase project.

Once connected, Meku will store these keys securely and generate code using your schema and project configuration.

Generate components with Supabase

When Supabase is connected, you can instruct Meku to use your database directly in prompts.

Example prompts:

• “Create a dashboard that lists users from my Supabase users table.”
• “Build a form that writes data to the contacts table.”
• “Generate an admin page to update product prices from the products table.”

Meku will use your database schema to generate the correct queries, API hooks, and table components.

Environment variables

Meku automatically maps your Supabase credentials to environment variables when you export.

Example:

VITE_SUPABASE_URL=https://yourproject.supabase.co
VITE_SUPABASE_KEY=your_anon_key
VITE_SUPABASE_PROJECT_ID=project_id

These are included in your .env file for local development and automatically configured for Meku-hosted deployments.

Authentication support

You can add Supabase Authentication to any project by prompting Meku: “Add Supabase authentication with email and password login.”

Meku generates:

• Sign-up and login forms.
• Auth context and hooks using the Supabase client.
• Route guards for protected pages.

This setup works instantly once your project is linked to Supabase.

Using Supabase Storage

Access Supabase Storage directly from your Meku project.

Prompt example:

“Create an image upload component using Supabase Storage.”

Meku will generate upload functions, previews, and file path references connected to your Supabase bucket.

Disconnect Supabase

To remove Supabase integration:

• Go to Integrations > Supabase.
• Click Disconnect.
• Your stored credentials will be deleted securely.

You can reconnect later without losing any project files.

Best practices

• Always use the public/anon key for frontend connections.
• Store service keys securely on the server side if needed.
• Use descriptive table and column names to improve prompt accuracy.
• Export environment variables when deploying to Vercel, Netlify, or Meku hosting.

Following these practices ensures stable and secure integration with Supabase.