I made a production ready auth scaffold with Nuxt and Supabase

#nuxt #supabase #vue #webdev

I have a lot of ideas. The kind of ideas you get at midnight, the ones that seem brilliant, and then I have to implement auth and all traction on a brilliant idea gets lost within 15 minutes of overthinking how I want to set up auth this time.

The next brilliant idea I got, not at midnight this time was building an auth scaffold for myself that I can simply reuse for every single idea. But the caveat is I decided against just vibe coding it.

Auth is a weird one. It's boring enough that you want to hammer through it, but it's also your first line of security. Cutting corners here means cutting corners on the one thing that protects your users.

So I actually spent some time clueing myself up on how to do this properly for Nuxt/Supabase projects (my preferred 10x developer stack). I didn't just hook this project up and called it done, I spent time thinking through edge cases, user flows, error handling, user feedback, and my desired initial application behaviour... to be honest I don't think I've ever thought as much as I did with this ever before.

Feel free to check out the live demo or dig through the repository. I'd love to hear your thoughts and feedback.

What's in the box though?

Sign up with email confirmation (optional because I made sure both was supported)
Sign in
Forgot password + password reset via email link
All PKCE code exchanges handled in a dedicated route
Protected routes via Supabase's redirect options + a guest middleware that boots authenticated users off the auth pages where they don't belong
Live password strength feedback during sign up (built as a composable considering its used in a few places and potentially a few more)
Friendly, specific error handling throughout
Dark mode (based on the system's preference)
Polished UI with Nuxt UI