Authentication

Configuring Authentication's production configuration in the Next.js Supabase SaaS kit

Supabase needs a few settings to be configured in their Dashboard to work correctly.

This guide will walk you through the steps to get your Supabase authentication set up in your Production environment. The dev environment does not require any configuration.

Third Party Providers

Third Party providers need to be configured, managed and enabled fully on the provider's and Supabase's side. Makerkit does not need any configuration (beyond setting the provider to be displayed in the UI).

Please read Supabase's documentation on how to set up third-party providers.

Authentication URLs

The first thing you need to do is to set the authentication URLs in the Supabase Dashboard. These URLs are used to redirect users to the correct page after they have logged in or signed up.

  1. Go to the Supabase Dashboard.
  2. Click on the project you want to use.
  3. Go to the Authentication tab.
  4. Click on URL Configuration.
  5. Add your Site URL to the Site URL field. This is the URL of your MakerKit site (e.g. https://my-site.com).
  6. Add your Redirect URLs to the Redirect URLs field. This is the URL of your MakerKit site with /auth/callback appended to it (e.g. https://my-site.com/auth/callback).

Failure to set these URLs will result in your users not being able to log in or sign up.

Custom SMTP

Supabase's SMTP settings have low limits and low deliverability. If you want your emails to go out and be delivered, please remember to set an alternative SMTP provider in the Supabase settings.

  1. Go to the Supabase Dashboard.
  2. Click on the project you want to use.
  3. Go to the Project Settings tab.
  4. Click on Auth.
  5. Tweak the SMTP Settings settings to your liking according to your provider's documentation.

Please refer to the Supabase documentation for more information.

Troubleshooting

If you are having authentication issues, ensure that the Site URL and Redirect URLs are correct. If you are using a custom domain, ensure that you are using the correct domain in the Site URL and Redirect URLs.

If something is still not working, please open a support ticket with any useful information (such as server logs).


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS