Next.js & Supabase Authentication Starter Template
Next.js and Supabase authentication code starter template that I actually lifted from Vercel's site, but it was wrong so I fixed it. You'll need to setup a Supabase account and database before you can run this Next.js code, but it works with both client and server components and the authentication will allow you to tie into Supabase's Row Level Security, which will help you to really bullet-proof your application from black-hearted souls.
Install it ( npm install from the directory)
Create a .env file in the root of your application and add your credentials (available in the Settings panel of your Supabase account):
- · DB_PASSWORD=[your_password]
- · DATABASE_URL=[your_url]
- · NEXT_PUBLIC_SUPABASE_URL=[your_url]
- · SUPABASE_ANON_KEY=[your_key]
- · NEXT_PUBLIC_BASE_URL=[your_url]
- · NEXT_PUBLIC_SUPABASE_ANON_KEY=[your_key]
DON'T FORGET TO ADD .env TO YOUR .gitignore FILE!
Summary:
· In order to complete the process of registering/authenticating a user in your Next.js application you need to enable SMTP in your Supabase account. I created my own SMTP server but you can use the default SMTP server that Supabase provides, unfortunately it only permits some ridiculously low number of emails to be sent for free (like 4 per hour?). Seeing as you'll need to test this functionality across multiple email accounts, with multiple browsers you'll burn through your limit immediately. If I find the docs on how to configure your own SMTP server I'll post them here, but be warned it is a super-duper-grade-AAA-ball-buster task. NOTE: The emails are sent from Supabase NOT from your Next.js application, so don't freak out that you'll have to configure your server, open ports, or any of that crapola.
· I don't think I included the formatted forms so they appear exactly as they are - unformatted. Whaddya want for free?
· If you want to change the path of where to send an authenticated user after they've been registered you'll actually change that in the SMTP template page in your Supabase account. (The callback just passes the url param located in the Supabase template).
· Finally, gut these pages like a fish, style them up, and make it your own. Just promise me you won't use shadcn - everyone is using that library and now everything looks the same (just like Bootstrap of 2010). Try Mantine instead. Enjoy!
· In order to complete the process of registering/authenticating a user in your Next.js application you need to enable SMTP in your Supabase account. I created my own SMTP server but you can use the default SMTP server that Supabase provides, unfortunately it only permits some ridiculously low number of emails to be sent for free (like 4 per hour?). Seeing as you'll need to test this functionality across multiple email accounts, with multiple browsers you'll burn through your limit immediately. If I find the docs on how to configure your own SMTP server I'll post them here, but be warned it is a super-duper-grade-AAA-ball-buster task. NOTE: The emails are sent from Supabase NOT from your Next.js application, so don't freak out that you'll have to configure your server, open ports, or any of that crapola.
· I don't think I included the formatted forms so they appear exactly as they are - unformatted. Whaddya want for free?
· If you want to change the path of where to send an authenticated user after they've been registered you'll actually change that in the SMTP template page in your Supabase account. (The callback just passes the url param located in the Supabase template).
· Finally, gut these pages like a fish, style them up, and make it your own. Just promise me you won't use shadcn - everyone is using that library and now everything looks the same (just like Bootstrap of 2010). Try Mantine instead. Enjoy!