This documentation is for a legacy version of Next.js Supabase. For the latest version, please visit the Next.js Supabase Turbo documentation

Setup

Learn how to setup Supabase authentication with MakerKit.

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).

Troubleshooting

If you are having issues with authentication, 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).

If you want to send emails from your own domain, you can configure your SMTP settings in the Supabase Dashboard.

This is optional, but recommended if you want to send emails from your own domain.

  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.

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