Docs

New

Getting Started

Supabase

Authentication

Stripe

User Authentication with Supabase

Learn how Framergenie components use Supabase to power user login, signup, session management, and protected routes.

FramergenieAUthPage
Overview

Framergenie makes it easy to implement full user authentication in Framer using Supabase Auth. With built-in components and plugin integration, you can handle signup, login, social auth, logout, and protected pages without writing backend logic.

Supabase Auth supports email/password login, magic link login, and third-party OAuth providers (Google, GitHub, etc.), and Framergenie wraps all of that into customizable UI components with real-time session management.


Framergenie Auth Components

Here are the key Framergenie components used to build authentication flows:

  1. AuthProvider: Global wrapper for Supabase session management

  2. SignupForm: Collects user info and creates new accounts

  3. LoginForm: Allows existing users to log in

  4. MagicLinkLogin: Enables one-click email-based login

  5. LogoutButton: Signs users out and clears the session

  6. ProtectedRoute: Restricts access to pages unless a user is logged in

  7. AuthState: Conditional component that renders based on login status


Getting Started Steps


1. Enable Supabase Auth

In your Supabase project:

  • Go to Authentication > Settings

  • Enable Email/Password and any social providers you want (e.g., Google)

  • Set your redirect URL to match your Framer site domain

2. Connect Supabase to Framergenie

In Framergenie > Plugin Settings:

  • Paste your Supabase projectUrl and anon/publicKey

  • Ensure you’ve selected Enable Auth Integration


3. Wrap Your App with AuthProvider

Add the AuthProvider component to your global layout (usually in your main Framer Page component). This handles login state automatically.


<AuthProvider>
  <YourApp />
</AuthProvider>


4. Add Login and Signup Forms


Drag and drop the LoginForm and SignupForm components into your page.

5. Use ProtectedRoute to Restrict Pages

Wrap protected pages or sections in the ProtectedRoute component. This ensures only authenticated users can access it.

<ProtectedRoute fallback={<LoginForm />}>
  <Dashboard />
</ProtectedRoute>


6. Customize Auth UI


You can adjust text, styles, error states, and success messages through each component’s property controls.


Auth Flows Supported


Flow

Description

Email/Password

Traditional Login/Signup with validation

Magic Link

One-time email Login (passwordless)

Social Login

Google, Github, etc

Auth session

Auth state stored via token or cookies

Logout

Fully clears user session


Best Practices

  • Always wrap your site in AuthProvider to enable session detection

  • Use AuthState to show "Logged in as..." or conditional menus

  • Add redirect URLs inside Supabase Auth settings

  • Enable email confirmations for signup if needed

  • Set up RLS policies in Supabase to protect user data


Example SQL for Users Table


create table public.users (
  id uuid primary key references auth.users(id),
  name text,
  email text,
  created_at timestamp default now()
)
Component Use Cases

login, signup, magic link login, logout, conditional menus, user dashboard, access gating, email verification, social auth

Troubleshooting Tips


  • Ensure your Supabase redirect URLs are correct

  • Use Framer Preview links for testing (they support localhost-style redirect)

  • If login doesn’t work, check Supabase Auth logs for failed attempts

  • For persistent login, enable cookie-based session management


Authentication with Supabase + Resend Email Delivery

Framergenie components uses Supabase Auth to power all authentication features—login, signup, password reset, magic links, and protected pages. To deliver beautiful, branded transactional emails, you can connect Resend to Supabase for seamless email sending with zero manual SMTP setup.


Connect Resend to Supabase

You can connect Resend to your Supabase project in just a few clicks. This automatically sets up all required SMTP details in your Supabase project.


Steps

Go to Resend.com

Create a workspace

Use ''Connect to Supabase" in the settings page from the integrations tab

Resend automatically injects SMPT credentials into supabase

You're ready to send auth emails

Custom Email Templates

You can customize the look and feel of your Supabase auth emails directly in Resend using your own HTML.



Supported Templates:

  • Signup confirmation

  • Magic link login

  • Password reset

  • Invite user

  • Change email address

  • Reauthentication



Magic Link Email (HTML)


<!DOCTYPE html>
<html>
  <head>
    <style>
      body { font-family: Inter, sans-serif; background: #f4f4f4; padding: 40px; }
      .container { background: #fff; padding: 24px; border-radius: 8px; max-width: 480px; margin: auto; }
      .button { background: #000; color: white; padding: 12px 18px; text-decoration: none; border-radius: 6px; }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Welcome Back!</h2>
      <p>Click the button below to log in:</p>
      <a href="{{ .ConfirmationURL }}" class="button">Login Now</a>
    </div>
  </body>
</html>

Supabase automatically replaces {{ .ConfirmationURL }} with your user's unique login URL.


✅ Email-Based Auth Use Cases


Feature

Required Setup

Signup Emails

Resend + Supabase

Magic Link Login

Resend + Supabase

Password Reset

Resend + Supabase

Custom HTML Templates

Optional via Resend

SMTP Delivery

Handled by Resend


Set Redirect URLs

Supabase requires redirect URLs for authentication flows like magic links and password resets.

In Supabase > Authentication > URL Configuration:

  • Site URL:
    Add your Framer site domain (e.g. https://yourproject.framer.website)

  • Redirect URLs:

Add all routes used for redirecting after login or reset:


Supabase url Config


https://yourproject.framer.website
https://yourproject.framer.website/auth/callback
https://yourproject.framer.website/reset

Make sure these match the routes used in your Framergenie components for login, magic link, and reset flows.


@Framergenie

@Framergenie