Build a Chat App with NextJS + Supabase
In this tutorial we will create a simple chat app using NextJS (Typescript) and Supabase.

In this project, users will sign in using magic email link and exchange messages in a single chatroom.
The issue with React Strictmode and Supabase Realtime has been fixed with the release of supabase-js v2, and this article as well as the Github repo has been updated.
Overview

The complete code for this tutorial can be found here.
Supabase setup
Before we start building our app, we're going to setup our database and API in Supabase.
Create a project
- Go to app.supabase.com (and create a free account if you haven't already)
- Click on "New Project"
- Enter your project details
- Wait for project to complete initializing
Database schema setup: Auth
For this, we can use the "User Management Starter" quickstart in the SQL Editor.
- Go to the "SQL Editor" section.
- Click "User Management Starter"
- Click "Run".
That's all. Next, we will setup the schema to store our messages.
Database schema setup: Messages
- Go to "Table Editor"
- Add a table named
messages
with the following settings and columns:


user_id
references theid
column in auth.users tableSetup table policies
We will need to setup our policies to allow read and write access to our messages
tables.
- Go to "Authentication" and click on "Policies"
- Under
messages
, add the following 2 policies
Policy name: "Users can insert their own messages."

Policy name: "Users can read messages."

API credentials
- Go to "Settings" > "API"
- Under "Project API keys", there's your
API URL
andanon key
. We will be using them later for the connection to Supabase

Building the app
The app will consist of 2 parts - user authentication and the chat functionality. We will be using NextJS/React/Typescript and TailwindCSS to style our components.
To speed things up, clone the following starter template to your preferred directory.
Then, install the Supabase JS client library (using v2, note the @rc at the end)
Environment variables
Create a file .env.local
with the API credentials from before
Now let's create a helper to initialize the Supabase client
Create the login component
Since we are using TailwindCSS, we can just create and style the form right in our component.
"utils/example.ts"
instead of "../utils/example.ts"

Display the login form
Let's add the Auth component to pages/index.tsx
, and leave the authenticated state empty for now while we start building the Chat components:
Creating the chat components
Let's create 3 components, the 1. main chat window, 2. the chat message, and 3. a "dirty little trick", AlwaysScrollIntoView
component, to scroll our latest message into view whenever the DOM updates, such as receiving or typing new messages.
In a chat app, the direction of the messages are usually reversed, so many of our implementations are also reversed. For example, we prepend new messages received instead of appending. The messages are also reversed using the flex-col-reverse
CSS property, which is why we need to add the AlwaysScrollIntoView
component before the messages so that it renders at the bottom.
Putting everything together
Now that we have everything in place, it is time to add our Chat
component to pages/index.tsx
:
Once that is done, run the development server to view the app:
On your browser, go to http://localhost:3000
and you should see the login page. Enter your email address to get the magic link. Once you have signed in, start typing away!