Email Authentication

Supabase email authentication is a secure and easy way to allow users to sign up and log in to your application using their email and password.

Prerequisites

Before getting started with this section, ensure you have,

1. Completed all steps in the Supabase setup
2. Completed Initial setup required for authentication.

Adding Email Authentication

Let's see how to add a Supabase email authentication by building an example that looks like this:

The steps to add Supabase email authentication are as follows:

Configure Email Authentication in Supabase

Due to some Supabase auth behavior, you need to disable the email verification on the Supabase side. However, you can still add the email verification logic on your own in your app if you wish to.

Here's how you disable email verification on the Supabase side:

1. In your Supabase project, navigate to Authentication > Provider.
2. Open the Email section and disable the Confirm email and Secure email change.

Disable email verification on the Supabase side

Building pages

Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the template. Here is the page added from the templates, and after some modification, it looks the below:

Also, see how to build a page layout in case you want to build a page from scratch.

Adding Create Account [Action]

Now, you can proceed to add an account creation flow, which basically consists of three actions in the following order:

1. Supabase Create Account Action
2. Supabase Insert row action
3. Navigate action

The first one creates an account in Supabase and adds an email and password in the "auth.users" table (i.e., Protected schemas > schema auth). However, this action does not create an entry in the "users" table you created here. To do so, you need to add another action called Supabase insert row action with the user's details, such as email and profile_pic. Once the entry has been created, you can navigate to the home page using the navigate action.

Here's how it looks:

Adding Log In [Action]

To allow users to log in with their credentials, you can use this action.

Adding Logout [Action]

To let users log out of your app, you can use this action.

Verify user creation

To verify that you have successfully added the email authentication, you can come over to your Supabase project > Table Editor > select the "users" table and verify the user entries.

What's next?

Now that you have successfully added the Supabase email authentication in your app, you can access the logged-in user's details, such as email, user id, phone number, email verified, and JWT token via the Set Variable menu > Authenticated User.

Here's an example of filtering the to-do list based on the logged-in user using the Set Variable menu > Authenticated User > User ID property.