Add Login and Signup to Your App

Why Add Auth?

User accounts let your app:

• Save data specific to each person
• Personalize the experience
• Control access to features
• Build a relationship with users over time

The Quick Way

Just ask the AI:

"Add user authentication with email login"

This creates:

• Signup page
• Login page
• Password reset flow
• Protected routes
• User session handling

The AI uses Supabase Auth, which handles the heavy lifting securely.

Setting Up Supabase

1. Create a free account at supabase.com
2. Create a new project
3. Go to Settings → API
4. Copy your project URL and anon key

Add these to your app's environment variables:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

What Gets Generated

The AI creates these pages:

Login page (/login)

• Email and password fields
• "Forgot password" link
• Link to signup

Signup page (/signup)

• Email and password fields
• Password confirmation
• Link to login

Password reset (/reset-password)

• Email input
• Sends reset link via email

Protecting Routes

After adding auth, you can protect any page:

"Make the dashboard page require login"

Users who aren't logged in get redirected to the login page.

Social Login

Want Google or GitHub login? Just ask:

"Add Google and GitHub login options"

You'll need to configure OAuth providers in your Supabase dashboard, but the UI is generated automatically.

Getting User Info

In your app, you can access the logged-in user:

"Show the user's email in the header"

The AI knows how to pull this from the Supabase session.