The latest articles on DEV Community by Theo (@theosucksatcode). https://dev.to/theosucksatcode https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3611534%2F04daf1eb-5568-485a-9bec-0c58f8f197bc.jpeg https://dev.to/theosucksatcode en Theo Sun, 28 Jun 2026 19:33:23 +0000 https://dev.to/theosucksatcode/i-made-a-production-ready-auth-scaffold-with-nuxt-and-supabase-35m2 https://dev.to/theosucksatcode/i-made-a-production-ready-auth-scaffold-with-nuxt-and-supabase-35m2 <p>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.</p> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Feel free to check out the <a href="https://nuxt-supabase-auth-scaffold.vercel.app/" rel="noopener noreferrer">live demo</a> or dig through the <a href="https://github.com/theosucksatcode/NuxtSupabaseAuthScaffold" rel="noopener noreferrer">repository</a>. I'd love to hear your thoughts and feedback.</p> <h2> What's in the box though? </h2> <ul> <li>Sign up with email confirmation (optional because I made sure both was supported)</li> <li>Sign in</li> <li>Forgot password + password reset via email link</li> <li>All PKCE code exchanges handled in a dedicated route</li> <li>Protected routes via Supabase's redirect options + a guest middleware that boots authenticated users off the auth pages where they don't belong</li> <li>Live password strength feedback during sign up (built as a composable considering its used in a few places and potentially a few more)</li> <li>Friendly, specific error handling throughout</li> <li>Dark mode (based on the system's preference)</li> <li>Polished UI with Nuxt UI</li> </ul> <h2> Tech stack </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>What</th> <th>Package</th> </tr> </thead> <tbody> <tr> <td>Framework</td> <td>Nuxt 4</td> </tr> <tr> <td>Auth + DB</td> <td>Supabase</td> </tr> <tr> <td>UI</td> <td>Nuxt UI 4</td> </tr> <tr> <td>Validation</td> <td>Zod</td> </tr> <tr> <td>Styling</td> <td>Tailwind CSS 4</td> </tr> </tbody> </table></div> nuxt supabase vue webdev