Stytch

In this guide we will build a simple expense tracker web application using Stytch, Supabase, and Next.js.

Stytch provides an all-in-one platform for passwordless auth. Stytch makes it easy for you to embed passwordless solutions into your websites and apps for better security, better conversion rates, and a better end user experience. Their easy-to-use SDKs and direct API access allows for maximum control and customization. In this example we will use Email magic links to create and log in our users, and Session management. There is an additional, optional step to enable Google One Tap which is an especially high-converting Google OAuth sign-up and login flow.

We will leverage Supabase to store and authorize access to user data. Supabase makes it simple to set up Row Level Security (RLS) policies which ensure users can only read and write data that they are authorized to do so. If you do not already have a Supabase account, you will need to create one.

This guide will use Next.js which is a web application framework built on top of React. Stytch provides a Node.js library and a React library which makes building Next.js apps super easy.

Note: You can find a completed version of this project on Github.

Step 0: Create a Stytch Account#

If you already have a Stytch account you may skip this step.

Go to Stytch, and create an account. Note that Stytch provides two ways to create an account, either via Google OAuth, or through Email magic links.  This is the same user experience we will be building in this guide!

Step 1: Set up Stytch redirect URLs#

First we need to add the redirect URLs that will be used during the Email magic link flow. This step helps ensure bad actors cannot spoof your magic links and hijack redirects.

Navigate to your redirect URL settings in the Stytch dashboard, and under Test environment create an entry where the URL is http://localhost:3000/api/authenticate and the Type is All.

After pressing Confirm, the redirect URLs dashboard will update to show your new entry. We will use this URL later on.

Step 2: Create a Supabase project#

From your Supabase dashboard, click New project.

Enter a Name for your Supabase project.

Enter a secure Database Password.

Click Create new project. It may take a couple minutes for your project to be provisioned.

Step 3: Creating data in Supabase#

Once your Supabase project is provisioned, click Table editor, then New table. This tool is available from the sidebar menu in the Supabase dashboard.

Enter expenses as the Name field.

Select Enable Row Level Security (RLS).

Add three new columns:

• user_id as text

• title as text

• value as float8

Click Save to create the new table.

From the Table editor view, select the expenses table and click Insert row.

Fill out the title and value fields (leave user_id blank for now) and click Save.

Use Insert Row to further populate the table with expenses.

Step 4: Building a Next.js app#

Using a terminal, create a new Next.js project:

Next, within stytch-supabase-example create a .env.local file and enter the following values:

Note: Stytch values can be found in the project dashboard under API Keys.

Note: Supabase values can be found under Settings > API for your project.

Start your Next.js development server to read in the new values from .env.local.

You should have a running Next.js application on localhost:3000.

Step 5: Build the Login Form#

Now we will replace the default Next.js home page with a login UI. We will use the Stytch React library.

Note: Stytch provides direct API access for those that want to build login UI themselves

Install the @stytch/stytch-react library.

In the root directory, create a new folder named components and file in that folder named /StytchLogin.js. Within this file, paste the snippet below. This will configure, and style the Stytch React component to use Email magic links.

Additionally, create a profile component by creating a file called Profile.js in /components. We will use this component to render our expenses stored in Supabase later on.

Finally, replace the contents of the file /pages/index.js to render our new StytchLogin and Profile components.

On localhost:3000 there is now a login form prompting for your email address.

Enter your email address and press Continue with email.

In your inbox you will find a login request from your app.

However, if you click the link in the email you will get a 404. We need to build an API route to handle the email magic link authentication.

Step 6: Authenticate and start a session#

To make authentication easier we will use the Stytch Node.js library. Run

Additionally, we will need to store the authenticated session in a cookie. Run

Create a new folder named utils and inside a file namedstytchLogic.js with the following contents

This logic is responsible for setting up the Stytch client we will use to call the API. It provides functions we will use to login, logout, and validate user sessions.

In order to complete the email login flow, create a new file pages/api/authenticate.js with the contents:

We will also create a logout API endpoint with similar contents. In pages/api/logout.js include the following:

Finally, update pages/index.js by importing getAuthenticatedUserFromSession, and calling it to set the user variable in getServerSideProps.

Return to localhost:3000, and login again by sending yourself a new email. Upon clicking through in the email you should be presented with “Welcome $USER_ID”. If you refresh the page, you should remain in an authenticated state. If you press Logout then you should return to the login screen.

Now that we have a working login flow with persistent authentication it is time to pull in our expense data from Supabase.

Step 7: Requesting user data from Supabase#

First, install the Supabase client:

In order to pass an authenticated user_id to Supabase we will package it within a JWT. Install jsonwebtoken:

Create a new file utils/supabase.js and add the following:

Our payload for the JWT will contain our user's unique identifier from Stytch, their user_id. We are signing this JWT using Supabase's signing secret, so Supabase will be able to validate it is authentic and hasn't been tampered with in transit.

Let's load our expenses from Supabase on the home page! Update pages/index.js a final time to make a request for expense data from Supabase.

When we reload our application, we are still getting the empty state for expenses.

This is because we enabled Row Level Security, which blocks all requests by default and lets you granularly control access to the data in your database. To enable our user to select their expenses we need to write a RLS policy.

Step 8: Write a policy to allow select#

Our policy will need to know who our currently logged in user is to determine whether or not they should have access. Let's create a PostgreSQL function to extract the current user from our new JWT.

Navigate back to the Supabase dashboard, select SQL from the sidebar menu, and click New query. This will create a new query,, which will allow us to run any SQL against our Postgres database.

Write the following and click Run.

You should see the output Success, no rows returned. This created a function called auth.user_id(), which will inspect the userId field of our JWT payload.

Note: To learn more about PostgreSQL functions, check out this deep dive video.

Let's create a policy that checks whether this user is the owner of an expense.

Select Authentication from the Supabase sidebar menu, click Policies, then New Policy.

From the modal, select For full customization create a policy from scratch and add the following.

This policy is calling the function we just created to get the currently logged in user's user_id auth.user_id() and checking whether this matches the user_id column for the current expense. If it does, then it will allow the user to select it, otherwise it will continue to deny.

Click Review and then Save policy. After you've saved, click Enable RLS on the table to enable the policy we just created.

Note: To learn more about RLS and policies, check out this video.

The last thing we need to do is update the user_id columns for our existing expenses.

Head back to the Supabase dashboard, and select Table editor from the sidebar. You will notice each entry has user_id set to NULL. We need to update this value to the proper user_id.

To get the user_id for our Stytch user, you can pull it from the welcome page in our example app (eg user-test-61497d40-f957-45cd-a6c8-5408d22e93bc).

Update each row in Supabase to this user_id.

Return to localhost:3000, and you will see your expenses listed.

We now have a basic expense tracker application powered by Stytch, Supabase, and Next.js. From here you could add additional features like adding, editing, and organizing your expenses further.

Note: You can find a completed version of this project on Github.

Optional: Add Google One Tap#

In this optional step, we will extend our application to allow users to login with Google One Tap in addition to Email magic links.

You will need to follow the first four steps of this guide to create a Google project, set up Google OAuth consent, and configure credentials and redirect URLs.

First, we will make some adjustments to the StytchLogin component. We will update the configuration, so that it uses both Google OAuth, and Email magic links.

We also need to make an adjustment to the function authenticateTokenStartSession in stytchLogic.js. Stytch has separate authentication endpoints for Email magic links and OAuth, so we need to route our token correctly.

With these two changes you will now have a working Google One Tap authentication method along with email magic links.

Resources#

• Stytch blog
• Stytch documentation