Member-only story

Authentication with Next.js and Supabase

Girff
6 min readDec 28, 2024

--

In this guide, we’ll build an example Next.js server-side rendered application with PropelAuth and Supabase. We cover the Pages Router version of Next.js 13, and demonstrate how to create an application that manages both users and organizations using PropelAuth.

Create a PropelAuth Project

The first step is to create a project in PropelAuth, which we’ll be using instead of the default Supabase auth options.

Once a project has been created, you will be directed to the dashboard for your project, outlining the steps to complete adding authentication into your application. This includes styling the UI, choosing authentication methods, and enabling organizations/enterprise SSO.

One of the onboarding steps is to sign up as a test user, which we’ll use later on to test our application.

Create a Supabase Project

Create a Supabase project, along with at least one table in the project. You can configure the table however you’d like; in this guide, we’ll be using a table we’ll call “foos.”

One column in the table must be labeled “user_id,” and its type must be “uuid.” In our example, we also included “title” with the “Text” type.

--

--

No responses yet