Step-by-Step Guide
7 steps

How to Add Authentication to Your Lovable App

Lovable apps use Supabase for authentication. This guide walks you through setting up email/password auth, adding OAuth providers, protecting routes, and configuring auth settings securely.

Scan Your App Now

Find security issues automatically before attackers do.

Follow These Steps

1

Enable authentication in Supabase

Go to the Supabase dashboard and configure authentication providers.

Code Example
// Supabase Dashboard > Authentication > Providers
// Enable Email provider with:
// - Confirm email: ON
// - Secure email change: ON
// - Password minimum length: 8
2

Set up the Supabase auth client

Initialize the Supabase client with auth configuration.

Code Example
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
3

Create signup and login functions

Implement authentication functions with proper error handling.

Code Example
async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: { emailRedirectTo: `${window.location.origin}/auth/callback` }
  })
  if (error) throw error
  return data
}

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password })
  if (error) throw error
  return data
}
4

Add OAuth providers

Enable Google, GitHub, or other OAuth providers for social login.

Code Example
async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: { redirectTo: `${window.location.origin}/auth/callback` }
  })
  if (error) throw error
}

// Create the callback handler
// app/auth/callback/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const code = searchParams.get('code')
  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }
  return NextResponse.redirect(new URL('/dashboard', request.url))
}
5

Protect routes with auth checks

Add authentication guards to protected pages.

Code Example
import { redirect } from 'next/navigation'
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'

export default async function DashboardPage() {
  const supabase = createServerComponentClient({ cookies })
  const { data: { session } } = await supabase.auth.getSession()
  
  if (!session) {
    redirect('/login')
  }
  
  return <div>Welcome, {session.user.email}</div>
}
6

Configure redirect URLs

In Supabase dashboard, set the site URL and allowed redirect URLs.

Code Example
// Supabase Dashboard > Authentication > URL Configuration
// Site URL: https://yourdomain.com
// Redirect URLs:
//   https://yourdomain.com/auth/callback
//   http://localhost:3000/auth/callback (for local dev)

Always include both production and localhost URLs in redirect URLs for development convenience.

7

Test authentication flow

Test signup, login, logout, and OAuth flows to verify everything works correctly.

Test with both email/password and OAuth providers. Verify that protected routes redirect unauthenticated users.

What You'll Achieve

Your Lovable app has secure email/password authentication, OAuth social login, protected routes, and properly configured redirect URLs. Users can sign up, log in, and access only their own data.

Common Mistakes to Avoid

Mistake

Not enabling email confirmation

Fix

Without email confirmation, anyone can sign up with any email. Enable "Confirm email" in Supabase Auth settings.

Mistake

Forgetting to set up the auth callback route

Fix

OAuth and magic link flows require a callback route to exchange the code for a session. Create /auth/callback/route.ts.

Mistake

Checking auth only on the client side

Fix

Always verify the session on the server side (in Server Components or API routes). Client-side auth checks can be bypassed.

Frequently Asked Questions

Does Lovable set up authentication automatically?

Lovable may generate basic auth UI components, but the Supabase configuration (email confirmation, OAuth providers, redirect URLs) must be set up manually in the Supabase dashboard.

Should I use email/password or OAuth?

Offer both for the best user experience. OAuth (Google, GitHub) is more convenient and avoids password management. Email/password is essential for users who prefer it.

How do I handle auth state across pages?

Use Supabase auth helpers for your framework. In Next.js, use @supabase/auth-helpers-nextjs which provides server and client auth utilities.

Related Guides

Secure Your Lovable AppAdd RLS to LovableAdd Two-Factor AuthenticationSecure JWT Tokens

Ready to Secure Your App?

VAS automatically scans your deployed app for the security issues covered in this guide. Get actionable results in minutes.

Start Security Scan