Skip to main content

Configuring Supabase Authentication Providers

When deploying your application to production, it's crucial to set up and configure your authentication providers correctly. This guide will walk you through the process of setting up authentication providers.

Authentication Providers​

There are two primary authentication methods:

  1. Magic Link.
  2. Google Sign-In
  1. In your Supabase dashboard, go to "Authentication" > "Providers".
  2. Ensure that "Email" is enabled this is required for Magic Link to work.

It's important to customize the Magic Link email template to match your brand. Here's a template you should use:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Access Your Account</title>
    <style>
      body {
        background-color: #f6f9fc;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Ubuntu, sans-serif;
        margin: 0;
        padding: 0;
      }
      .container {
        background-color: #ffffff;
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 20px;
      }
      h1 {
        color: #333333;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin: 0 0 20px;
      }
      p {
        color: #333333;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 20px;
      }
      .button-container {
        text-align: center;
        margin: 30px 0;
      }
      .footer {
        color: #8898aa;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #e6e6e6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Access Your Account</h1>
      <p>Hello,</p>
      <p>
        You've requested access to your account. Click the button below to log
        in:
      </p>
      <div class="button-container">
        <a
          href="{{ .SiteURL }}/api/auth/callback?token_hash={{ .TokenHash }}&type=magiclink&redirect_to={{ .RedirectTo }}"
          style="background-color: #0070f3; border: none; border-radius: 5px; color: #ffffff; display: inline-block; font-size: 16px; font-weight: bold; padding: 14px 28px; text-decoration: none; text-align: center; mso-hide: all;"
        >
          Log In
        </a>
      </div>
      <p>
        This link will expire in 24 hours for security reasons. If you didn't
        request this email, please ignore it.
      </p>
      <p>Best regards,</p>
      <p>The Team</p>
      <div class="footer">&copy; All rights reserved.</div>
    </div>
  </body>
</html>

To update the template:

  1. In your Supabase dashboard, go to "Authentication" > "Email Templates".
  2. Select the "Magic Link" template.
  3. Replace the existing HTML with the provided template.
  4. Customize the content and styling as needed to match your brand.

Setting Up Google Authentication​

For detailed instructions on setting up Google Authentication, please refer to the Google Sign-In Setup section in the Getting Started guide.

Enabling Both Providers​

It's crucial to enable both Magic Link and Google authentication providers for your application to function correctly:

  1. In your Supabase dashboard, go to "Authentication" > "Providers".
  2. Ensure that both "Email" (for Magic Link) and "Google" are enabled.
  3. Double-check that you've completed the setup process for both providers as described in their respective sections.

Configuring Site URL and Redirect URIs​

It's crucial to properly configure your Site URL and Redirect URIs in Supabase to ensure smooth authentication flows:

Updating Site URL​

  1. In your Supabase dashboard, go to "Authentication" > "URL Configuration".
  2. Under "Site URL", enter your production domain (AVOID ADDING A / AT THE END). It should look like this: 
    https://yourdomain.com
  3. This URL is used as the default redirect URL when a specific redirect URL is not provided or doesn't match the allow list.
  4. It's also exposed as a template variable in email templates.

Configuring Redirect URIs​

  1. In the same "URL Configuration" section, find "Redirect URLs".
  2. Add the following URLs (adjust as needed for your domain): 
    http://localhost:3000/**
    https://yourdomain.com/**
  3. The ** wildcard allows for any path after the domain.
  4. Include both your local development URL and your production URL.

Best Practices for URL Configuration​

  • Always use HTTPS for production URLs.
  • Be as specific as possible with your redirect URLs to enhance security.
  • Update these settings whenever you change your domain or add new valid redirect paths.
  • Test authentication flows after making changes to ensure everything works as expected.

Troubleshooting​

If you encounter issues with authentication:

  1. Double-check that all URIs and credentials are correct.
  2. Ensure your domain is properly configured and SSL is set up.
  3. Check the Supabase logs for any error messages related to authentication.

By properly configuring these authentication providers, you ensure a smooth and secure login experience for your users across various platforms and methods.