How to Set Up Authentication with Supabase using Cursor AI - Building in Public Day 10
So here's the thing about building in public - sometimes you hit these moments where everything just clicks, and other times you're staring at error messages wondering why you thought this was a good idea. Day 10 of my 60-day challenge was definitely one of those rollercoaster days.
Quick summary
I spent today setting up the entire authentication system for my Bali travel directory using Supabase and Cursor AI. What should have been straightforward turned into a deep dive into Next.js 15 cookie handling issues, but we got there in the end. Now I've got user login, admin dashboards, and role-based access all working. Kind of amazed it happened this fast, honestly.
Why authentication matters for this project
Living here in Bali, I'm constantly meeting people who ask me about the best places to stay, eat, or explore. That's the whole reason I'm building this travel directory. But here's what I realized early on - if I want this to actually be useful, I need a way for me and my partner Grace to easily add and update content. Plus, eventually I want visitors to leave reviews and bookmark their favorite spots.
That means I need user accounts. And not just basic accounts - I need different types of users with different permissions. Admin users (me and Grace) who can add listings, and regular users who can save favorites and leave reviews.
The challenge I was facing
Up until yesterday, our website was basically static. Sure, it looked decent with the homepage and about page we built, but there was no way to actually manage content or let users interact with it. Every time I wanted to add a new place we'd visited, I'd have to manually code it in. Not exactly scalable when you're trying to document an entire island.
I knew I needed to set up authentication, but honestly, building login systems from scratch sounds like a nightmare. Forms, password hashing, session management, email verification - there's so much that can go wrong.
What I tried first (spoiler: it didn't work perfectly)
I decided to use Supabase for the backend because I'd heard good things, and Cursor AI to actually build everything. My plan was simple: tell Cursor what I wanted, let it build the authentication system, and boom - done in an hour.
I gave Cursor this prompt: "Create a signin page, signup page, password reset flow, protected routes, build a user page, and implement role-based access control. Also need a basic admin dashboard."
Cursor started building, and at first I was like "this is amazing!" It was creating all these files, setting up the database connections, building the UI components. I was already planning what I'd work on tomorrow.
Then I tried to actually log in.
The breakthrough moment (after some frustration)
The first issue hit me immediately - cookie handling errors. Something about Next.js 15 handling cookies differently than previous versions. I kept getting these redirect loops where the system couldn't figure out if I was logged in or not.
I'm not gonna lie, this was frustrating. I spent probably an hour just trying to understand why something as basic as cookies wasn't working. This is the second time I've run into this issue, so clearly I need to do some research on Next.js 15 changes.
But here's where Cursor AI really shined - once I explained the specific error, it knew exactly what was wrong and fixed the cookie handling. Turns out you need to await the cookies function in server components now. Who knew?
Here's how I actually built it
Step 1: Setting up the Supabase project
First thing was getting the database ready. I already had Supabase set up from previous episodes, but I needed to create a proper user profiles table. The cool thing about Supabase is it automatically handles user registration and authentication - I just needed to extend it with custom profile data.
I added a "role" column to the profiles table with options for "user" and "admin". This way I can control who gets access to what features.
Step 2: Building the authentication pages
Cursor created all the standard auth pages:
Login page
Registration page
Password reset flow
Protected route middleware
The UI looks clean because I told it to use our existing design system with Shadcn components. Everything matches the brand guidelines we set up earlier.
Step 3: Creating role-based access
This was the tricky part. I needed the system to automatically redirect users based on their role:
Regular users go to a basic dashboard where they can bookmark places
Admin users (me and Grace) go to an admin panel where we can add listings
The logic checks the user's role from the database and routes them accordingly. Pretty neat once it's working.
Step 4: Building the admin dashboard
The admin dashboard is where Grace and I will manage all the content. Right now it's pretty basic - just placeholder sections for listings, users, and settings. But the structure is there, and it only shows up for admin users.
I have to admit, the initial design was pretty ugly. Very generic admin panel vibes. I'll definitely need to customize it to match our brand better.
The stuff that went wrong
Oh man, where do I start? The cookie handling issue was the big one, but there were also some weird routing problems. At one point, admin users were getting redirected to the regular dashboard first, then having to click another button to get to the admin panel. Not exactly smooth.
There was also this thing where the system kept trying to import Next.js page router components when we're using the app router. Cursor got confused about which routing system we're using, which caused a bunch of file structure issues.
How I fixed the problems
Most of the fixes came down to being more specific with Cursor about our setup. I had to explicitly tell it we're using Next.js 15 with the app router, not the pages router. Once I clarified that, it stopped making those import errors.
For the cookie issues, I literally just asked Cursor "why are these cookies not working?" and it explained the await requirement. Sometimes the simplest questions get the best answers.
The routing flow took a few iterations to get right, but now it works smoothly - admins go straight to the admin dashboard, regular users go to their dashboard.
What it looks like now
I can now register as a user, log in, and get redirected to the appropriate dashboard based on my role. The whole authentication flow works:
New users can register and get a "user" role by default
I can manually change someone's role to "admin" in the database
Login automatically routes to the right dashboard
Password reset works via email
All the admin pages are protected - regular users can't access them
When I log in as an admin, I see sections for managing listings, users, and settings. It's not connected to actual data yet, but the framework is there.
Lessons I'm taking from this
Next.js 15 has some quirks with cookie handling that I need to understand better
Being specific with AI tools saves tons of debugging time
Authentication is way more complex than it looks on the surface
Having a clear role system from the start makes everything else easier
The biggest lesson? Don't assume the first version will work perfectly. I was ready to celebrate after Cursor finished building, but the real work was in the debugging and refinement.
What I'm working on next
Tomorrow I want to start building out the actual content pages - the stays listings, individual property pages, and the forms where Grace and I can add new places we've discovered. The authentication system is the foundation, but now I can start building the fun stuff on top of it.
I'm also planning to ask Grace for some photos and details about places we've stayed so I can test everything with real content instead of placeholder text.
Final thoughts
You know what's wild about this whole process? Three weeks ago, building a complete authentication system would have taken me days of research and coding. Today, with the right AI tools and some patience for debugging, I got it done in a few hours.
I'm definitely not a backend expert - I'm learning this stuff as I go. But that's kind of the point of this challenge. If someone like me can build a functional web application using AI tools, imagine what's possible for people who actually know what they're doing.
The authentication system isn't perfect yet, and I'll probably need to refine it as I add more features. But it works, it's secure, and it gives me the foundation I need to start building the actual travel directory.
Following along with the 60-day challenge? I'm documenting everything on YouTube - the good, the bad, and the moments where I question my life choices. Would love to hear about your own building experiences in the comments.