Framergenie connects your Framer project to Supabase, turning your designs into full-stack, data-driven web apps. Supabase serves as the backend, providing features like authentication, real-time database, file storage, and serverless functions—all accessible through Framergenie’s components and plugin setup.

Framergenie uses Supabase to handle user authentication, data storage, real-time updates, and more, with minimal setup required from you. With a single connection, you unlock the ability to build and scale production-ready applications—all inside Framer.

Why Supabase?

Supabase is an open-source alternative to Firebase. It offers:

• PostgreSQL database

• Row-Level Security (RLS)

• Real-time updates

• File storage

• Auth with magic links and social providers

• Serverless edge functions

What Framergenie Uses Supabase For

Authentication:

Login, Signup, Social login, Reset password, Update profile, Protected routes

Data Storage:
Forms, Testimonials, Comments, Ratings, Submissions, Projects, and User-generated content

Real-Time Features:
Live chat, collaborative comments, dashboard metrics, analytics updates

File Uploads:
Profile avatars, file attachments, image galleries, media-based testimonials

Permissions and RLS:
Each user sees only their data with automatically applied Row-Level Security (RLS) policies

Webhooks & Triggers:
Integrate third-party tools via Supabase webhooks or extend logic using Supabase Functions

How Framergenie Connects to Supabase

You can connect your Supabase project in two ways:

Plugin Settings (Recommended for Production)

• Secure connection via Framergenie’s internal proxy

• Credentials stored securely

• Automatic session handling

• Required for protected routes, login states, auth redirect handling

Component-Level (Development Mode)

• Use Supabase URL and anon/public key directly in components

• Ideal for testing, staging, or isolated deployments

• Does not handle token refresh or session expiry

• Not recommended for production

Required Setup Steps

1. Create a Supabase Project

Go to supabase.com, sign in, and create a new project. Save your Project URL and anon/public key.

2. Configure Plugin

Paste your credentials into Framergenie > Settings > Supabase Configuration

Example SQL: Creating Auth Table

create table public.profiles (
  id uuid references auth.users not null,
  name text,
  avatar_url text,
  created_at timestamp with time zone default timezone('utc'::text, now()),
  primary key (id)
)

Supabase Integration Use Cases

authentication, user profiles, dashboards, chat systems, testimonial submissions, project management, e-commerce data, file uploads, analytics charts, lead capture forms, dynamic filters