All posts
Published February 12, 2025 in development 101

How to set-up Supabase Authentication?

How to set-up Supabase Authentication?
Author: Stephane & Bobby at Lovable

Introduction

Getting authentication right is a critical part of any developer’s workflow. When you’re juggling landing pages, database connections, and user login flows, the process can quickly become overwhelming. Luckily, Supabase provides a powerful yet simple approach to handle authentication—especially when paired with Lovable. In this guide, we’ll walk you through building a landing page, connecting to Supabase, configuring authentication, and avoiding common pitfalls along the way.

TL;DR

  • Create a landing page in Lovable and connect it to Supabase.
  • Configure your Supabase settings (URLs, email confirmations, and profiles table).
  • Implement a secure login page, logout button, and optional bypass for testing.
  • Test your new user flow end-to-end and confirm everything works smoothly.

The Development Lifecycle Approach

Below is a concise breakdown of each phase you’ll tackle when adding authentication to your project. While these steps are specific to Supabase, they highlight fundamental authentication considerations relevant to any development 101.

1. Create Your Landing Page

Start by setting up a basic landing page using Lovable’s builder (or your preferred framework). This page will serve as the entry point for your users.

Initialize the Page

  • Spin up a new page in Lovable.
  • Keep it simple, focusing on layout and navigation.

Add Key Components

  • Consider a clear “Login” button or link to direct users to the authentication flow.
  • Prepare placeholders for any additional pages you plan to secure.

2. Connect to Supabase

Next, integrate your project with Supabase so you can leverage its authentication features.

Project Configuration

  • Sign in to your Supabase dashboard and create (or select) your project.
  • Note your Supabase Project URL and anon key—they’ll be needed during the connection step.

In Lovable

  • Navigate to your project settings or integrations.
  • Choose Supabase and paste in your Project URL and key.
  • Save your changes to establish the connection.

3. Add a Prompt to Create Your Login Page and Authentication

With your landing page in place, it’s time to build the login logic. Make use of a structured prompt to direct the AI on what to create. For instance:

I want to add Supabase authentication on a /login page:

  • Create a profiles table
  • Use a shadcn login component
  • Protect all routes and redirect unauthorized users to /login
  • Create a logout button for when the user is logged in
  • When a user logs in, redirect them to /

This prompt (or a variation) should generate:

  • A Login Page with an email/password field.
  • A Profiles Table (or equivalent) in your Supabase database to store user data.
  • A Logout Button to end user sessions seamlessly.
  • A Route Protection Mechanism so only authenticated users see the rest of your app.

4. Confirm the SQL for Your Profiles Table

Supabase generally sets up a default profiles table if you’re using their quickstart templates. However, if you’re generating a custom table via Lovable’s AI, ensure the SQL script resembles something like:

create table if not exists profiles (
id uuid references auth.users not null primary key,
updated_at timestamp with time zone,
...
);

-- Creates a trigger to automatically make a profile when a new user is created
create function handle_new_user() returns trigger ...
create trigger on_auth_user_created ...

Tip: Always double-check for any references to your specific user IDs or custom columns.

5. Go to Supabase URL Configuration

After building your login flow, head back into Supabase to configure your allowed redirects:

Authentication Settings

  • Within your project’s Authentication settings, add your Lovable preview URL (or wildcard).
  • Make sure to click “Save” at the bottom—many developers forget this step!

Disable or Enable Email Confirmation

Under the “Confirm Email” or “Sign-up” settings, you can toggle off email confirmation if you want frictionless testing.
If you do disable it, remember to turn it back on once you go live to maintain security.

6. (Optional) Add a Temporary Bypass Button

If you’re iterating quickly and want to skip the login flow during development, create a temporary bypass button on your /login page. This allows you to enter the app without authenticating repeatedly. Just remember to remove it before production to keep your app secure!

<button onClick="{()" ="">
  { // your bypass function here }}> Skip Login (Dev Only)
</button>

7. Test Your Authentication Flow

Finally, verify that everything works:

  • Sign Up with an email and password (or your dev bypass if enabled).
  • Sign In to ensure authenticated routes are accessible.
  • Log Out and confirm that restricted pages redirect you back to the login screen.

If all goes well, you’ve successfully added Supabase authentication to your Lovable app. Congratulations!

Conclusion

Authentication doesn’t have to be complicated. By breaking the process into clear steps—landing page creation, Supabase connection, prompt-based login setup, and final testing—you can streamline your development 101. With Lovable’s AI-driven approach, you’ll minimize repetitive coding, catch common pitfalls quickly, and get back to focusing on features that matter.

Ready to level up your project? Explore more possibilities with Lovable and see how AI can help you build, test, and deploy features faster. Join our Discord community and discover new tips, troubleshoot issues, or just share what you’re working on.