2mrw v1.0 has been released! Find out more →
ConfigurationUser authentication

Configuration

User authentication

In this project, we use middleware middleware.ts to protect our routes from unauthenticated access. 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) {
    return nextResponse.redirect(new URL("/auth/sign-in", request.url)); // redirects non-authenticated users to sign-in page
}

Feel free to jump around in the middleware.ts file a bit to see how it works.

Setting Up Email and Password Login / Signup

FYI: If a user signs up or logs in via email and password or a magic link, he’ll be redirected to the /auth/(handlers)/confirm route which will take care of the auth related logic.

Email is Supabase’s default authentication method (which is relevant for email and password login / sign up and magic links). This should be enabled. If it’s not, here’s how to enable it:


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

However, we won’t be using these templates because we’ll be using Loops to send emails.

Setting up Google Sign-In

FYI: If a user signs up or logs in via Google, he’ll be redirected to the /auth/(handlers)/callback route which will take care of the auth related logic.

You can follow the guide below to integrate Google authentication in about 2-3 minutes. You can also 2x the speed of the videos if I speak too slow! 😉

Set up Google Consent Screen


Set Up Google Oauth Client


How To Use Google Sign-In In Production

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

  • Let’s now set the production domain for our application under the Site URL field. In our case it would be https://2mrw.dev.

  • Update the Redirect URLs field to include our Production domain as well as the localhost:3000 domain (for local development):

    • https://2mrw.dev/**
    • http://localhost:3000/**

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

DatabaseEmail