ConfigurationUser authentication

Configuration

User authentication

In this project, we use middleware (middleware.ts) to protect routes that should only be accessible to authenticated users. This is next.js’ recommended way to handle user authentication.

Here’s the code snippet that handles the authentication and redirects the user to the login page if not authenticated:

middleware.ts
if (!user) {
    // redirects non-authenticated users to sign-in page
    return nextResponse.redirect(new URL("/auth/sign-in", request.url));
}

Here’s the code snippet that handles the premium and free trial status and redirects the user to the pricing page if they don’t have a premium or free trial:

middleware.ts
if (hasPremiumOrFreeTrial) {
    return HIDE_ON_PREMIUM_PLAN.includes(currentPath)
        ? nextResponse.redirect(new URL("/", request.url))
        : nextResponse.next();
} else {
    return currentPath !== "/choose-pricing-plan"
        ? nextResponse.redirect(new URL("/choose-pricing-plan", request.url))
        : nextResponse.next();
}

The HIDE_ON_PREMIUM_PLAN array contains the paths that should be hidden from authenticated users with a premium or free trial. For instance, if we wanna hide more pages to premium users, we can add them to this array.

middleware.ts
const HIDE_ON_PREMIUM_PLAN = ["/choose-pricing-plan"];

If you’ve never worked with a middleware before, this might seem a bit daunting at first but the more you use it, the more natural it becomes. Remember, you can always reach out to me on [Twitter] for questions!

Email authentication

This is Supabase’s default authentication method and most common for most projects. This should be enabled by default. If it’s not, here’s how to enable it:

  1. Inside the Supabase project, go to the authentication tab and click on PROVIDERS.
  2. Look for EMAIL and enable the switches for ENABLE EMAIL PROVIDER and CONFIRM EMAIL.

Supabase has a couple of built-in email templates that are used for sign-in, confirmation, and recovery emails. You can find these templates under the authentication tab and then click on EMAIL TEMPLATES.

Setting up Google Sign-In

You can follow this guide to integrate Google authentication into your application or watch the Loom below that walks through the process in about 5-10 minutes.


This is the exact process we use in the Loom to set up Google authentication in our Supabase project. Let’s go through it step-by-step!

Set up Google Consent Screen

  • In the Google Cloud console, go to the [Consent Screen configuration] page. The consent screen is the view shown to your users when they consent to signing in to your app.

  • Choose EXTERNAL as the user type and enter all required fields such as APP NAME, USER SUPPORT EMAIL, DEVELOPER CONTACT INFORMATION, etc.

  • Under AUTHORIZED DOMAINS field, add your Supabase project’s domain, which has the format [project-id].supabase.co.

  • Enable the following non-sensitive scopes:

    • .../auth/userinfo.email
    • ...auth/userinfo.profile
    • openid

Set Up Google Oauth Client

  • Return to the credentials tab and click on CREATE CREDENTIALS → OAUTH CLIENT ID.

  • Choose WEB APPLICATION as the application type.

  • For the AUTHORIZED JAVASCRIPT ORIGINS field, add:

    • http://localhost:3000
    • https://[project-id].supabase.co

  • For the AUTHORIZED REDIRECT URIS field, add:

    • https://[project-id].supabase.co/auth/v1/callback

  • Click Create and save the Client ID and Client Secret somewhere safe.

Configure Google in Supabase

  • In your Supabase dashboard, go to the authentication tab and then click on PROVIDERS.

  • Enter the Client ID and Client Secret, then save.

Google Sign-In will function on your local environment immediately. For production, it will work but display a cautionary message until Google completes the verification (typically within a few days).

Production Deployment Steps

  • In the Supabase dashboard, go to the authentication tab and then click on URL CONFIGURATION.

  • Set your live domain (e.g., https://example-domain.com) as the SITE URL.

  • Update the REDIRECT URLS field to include:

    • https://example-domain.com/**
    • http://localhost:3000/**

These configurations ensure smooth operation of Google Sign-In across both your development and production environments.

DatabaseEmail