How to Add User Login Feature on Your App Using Supabase (Windsurf AI, Cursor AI)

This video will teach you to implement Supabase user authentication that allows users to create an account with email and password and log in to the website/application. This tutorial is for total beginners that never code before but eager to try AI code editors like Windsurf, Cursor AI, and GitHub Copilot.

Prompt 1:
1. I want to create a simple test website called “Duck Photo” where users can create an account and log in to see content. Use only HTML and CSS.
2. Create a simple homepage that describes the website and encourages visitors to sign up to see the duck photo.
3. Create a dashboard page that shows a duck photo (Duck.JPG).
4. Both homepage and dashboard pages will have the same styling.
5. Let’s do it slowly. Build those two pages first. Other pages and authentication logic will be added later.

Prompt 2:
1. Create sign up, sign in, check email confirmation, and reset password pages.
2. Make sure the design and styling is consistent across pages.
3. Don’t add authentication logic yet. We’ll do it later.

Prompt 3:
1. Install Supabase client library via NPM or Attach Supabase client library via CDN link.
2. Add the CDN link to sign in, sign up, password reset, and dashboard pages.
3. Again, do not add any configuration or authentication logic yet. We’ll do it later.

Prompt 4:
1. Let’s start implementing the authentication logic.
2. Create authentication.js file to handle the feature.
3. Provide a .env file to store the Project URL and public anon key which I will manually add.

Prompt 5:
1. I already inserted the project URL and public anon key in the .env file.
2. Link the sign in, sign up, reset password, and dashboard page with the authentication logic.
3. Make sure the user experience and flow is seamless.

Tools I use:
🎤 Microphone https://amzn.to/4eWLfr2
🎙️ Boom arm https://amzn.to/4fUS7GU
💡 Lighting https://amzn.to/3AXiQUb
🌬️ Standing fan https://amzn.to/4ifgy3d
🔍 Research tool https://perplexity.ai/pro?referral_co...

Buy me a coffee:
☕ https://ko-fi.com/chris_ai
(I prefer tea but ok)