Authentication

Configuring Authentication's production configuration in the Remix 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 setup in your Production environment. The dev environment does not require any configuration.

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.

Please refer to the Supabase documentation for more information.

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.

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