NextJS SupaBase Authentication
In SupaLaunch, we use SupaBase authentication. The routes for login and signup are located in /src/app/auth
folder.
Both signup and login use the same auth form client component located in /src/app/auth/auth-form.tsx
. Depending on the internal state, it shows either login or signup form.
Login
Path: /src/app/auth/login/page.tsx
After login, the user is redirected to the /dashboard
page.
Signup
Path: /src/app/auth/signup/page.tsx
After signup, the user is redirected to the /auth/configm-email
page. This page shows a message that the user needs to confirm their email address.
Limiting access to the dashboard
In NextJS the access for unauthorized users is controlled in @/middleware.ts
file. We provide this file in SupaLaunch as well.
Authorised URLs are defined in function middleware
. This function is applied to all API except those listed in matcher
config in the same file.
For example, middleware is not applied to /api
, /legal
, /sitemap
etc.
Confirm email
When developing locally, the confirmation email is sent to the Inbucket inbox.
In production, the confirmation email is sent to the user's email address.
Sending confirmation email in production
Supabase has limits on the number of emails it can send using their SMTP server. You need to set up a custom SMTP server in order to send more emails.
In SupaLaunch, we use MailerSend to send emails via SMTP. But you can use any other SMTP server.
In order to set up the SMTP, first you need to create an SMTP user in MailerSend: https://www.mailersend.com/help/smtp-relay.
Once this is done, add your SMTP settings to production Supabase settings: Project -> Settings -> Authentication -> Email Settings -> SMTP Settings
Adding redirect URL to Supabase
It is important to add your production URL to the list of allowed redirect URLs in Supabase. Otherwise, you will get an error when trying to login or signup.
Go to Project -> Authentication -> URL Configuration and add your production URL:
- Site URL: Add your production URL there in the form of
https://yourdomain.com
. - Redirect URLs: Add your production URL there in the form of
https://yourdomain.com/**
.
Learn more here: https://supabase.com/docs/guides/auth/concepts/redirect-urls.