Complete Guide: Build & Deploy a Web App with Authentication in 15 Minutes

Step 1: Get Your Code from Claude AI

In Claude.ai, request two pieces of code:

Say this to Claude:

"I need two codes:

• HTML file for a home lending web app named [YOUR COMPANY NAME] that includes a calculator for monthly mortgage payments AND email/password login. Use white space with blue accents for the design.

• SQL code to create the user database with security policies for the login system"

✅ Claude will give you both files

Step 2: Set Up Your Database in Supabase

• Sign up at supabase.com

• Create a new project

  • Choose a project name

  • Set a database password (save this!)

  • Select a region close to you

  • Click "Create new project"

• Wait 2 minutes for your project to finish setting up

• Go to SQL Editor (left sidebar)

• Paste your SQL code from Claude

• Click Run

✅ Your database tables are now created!

Step 3: Get Your API Keys

• In Supabase, go to Settings → API (in left sidebar)

• Copy two things:

  • Project URL (looks like: https://abc123.supabase.co)

  • anon public key (long string under "Project API keys")

Step 4: Add Keys to Your HTML File

• Go back to Claude.ai

• Say this:

  "Here's my Supabase Project URL: [PASTE URL] And my anon public key: [PASTE KEY] Please update my HTML file with these credentials"

• Claude will give you updated code

• Copy the complete HTML code

Step 5: Save Your Code Locally

• Create a new folder on your Desktop called my-app

• Open a text editor (Notepad on Windows, TextEdit on Mac)

• Paste the HTML code from Claude

• Save as: index.html inside your my-app folder

  • Important: Make sure it's saved as .html, not .txt

Step 6: Deploy to Netlify

• Go to netlify.com

• Sign up (you can use GitHub, email, etc.)

• On the dashboard, find the deploy zone (big dashed box that says "Drag and drop your site folder here")

• Drag your entire my-app folder into the deploy zone

• Wait 30 seconds while it deploys

• Copy your live URL (looks like: https://random-name-123.netlify.app)

✅ Your site is now live!

Step 7: Connect Netlify URL Back to Supabase (CRITICAL!)

This is the final step that makes login work:

• Go back to Supabase

• Navigate to Authentication → URL Configuration (left sidebar)

• Paste your Netlify URL into:

  • Site URL field

  • Redirect URLs field (click "Add URL" if needed)

• Click Save

✅ Done! Your app is fully functional!

Test Your App

• Visit your Netlify URL

• Click Sign Up

• Create an account with email and password

• You should be able to log in and use the calculator!

Troubleshooting

If login doesn't work:

• Make sure you saved the Netlify URL in Supabase (Step 7)

• Check that email authentication is enabled: Supabase → Authentication → Providers → Email (toggle ON)

• Try disabling email confirmation for testing: Authentication → Providers → Email → Confirm email (toggle OFF)

If the calculator doesn't work:

• Open browser console (press F12)

• Look for error messages

• Go back to Claude and share the error

– Dr. Erin Jacques
Founder, Chattify IT| Professor | AI Strategist
email: info@erinjacques.com.