Skip to main content

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

IMPORTANT

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:

  1. Site URL: Add your production URL there in the form of https://yourdomain.com.
  2. 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.