Supabase Realtime Chat

supabase/supabase ↗ ·★ 104.7k ·TypeScript ·Apache-2.0

A realtime group chat example powered by Supabase Realtime and Row Level Security, with a React frontend you can ship to any static host.

Supabase Realtime Chat screenshot
Stars
★ 104.7k
Language
TypeScript
License
Apache-2.0
Deploy targets
3

Overview

Supabase Realtime Chat is a compact example that shows how to build live, multi-user features with Supabase as the entire backend. Messages are streamed with Supabase Realtime, which broadcasts Postgres row changes to every subscribed client over WebSockets — so a new message appears for everyone instantly, with no polling and no custom socket server to operate.

The example is also a clear lesson in doing direct-to-database frontends safely. Because the React client connects to Supabase with a public anon key, Row Level Security policies are what actually decide who can read and write each row. Studying how the policies are written here is the best way to understand the Supabase security model before you apply it to a real app, where getting RLS right is non-negotiable.

Architecturally there is no server to deploy. Supabase hosts the database, auth and realtime layer, and the frontend is a plain static React build. That means you ship the UI to any free static host — Netlify or Cloudflare Pages both work well — and point it at your Supabase project. It is an ideal starting point for adding chat, presence or other live features to something you are already building.

Highlights

  • Live messages via Supabase Realtime over Postgres changes
  • Row Level Security so users only access what they're allowed to
  • Supabase Auth for sign-in out of the box
  • Static React frontend that deploys to any free host

Best for

  • Learning the Supabase Realtime + RLS pattern
  • Adding live chat or presence to an existing app
  • Demos that need a backend without running a server

Getting started

  1. 1 Create a Supabase project and run the example's SQL to set up tables and policies
  2. 2 Enable Realtime on the messages table and configure RLS policies
  3. 3 Add your Supabase URL and anon key to the frontend's environment variables
  4. 4 Deploy the React frontend to Netlify or Cloudflare Pages
#chat#realtime#postgres#auth#example

FAQ

How does the realtime part work?

Supabase Realtime streams Postgres row changes to subscribed clients over WebSockets. When a row is inserted into the messages table, every connected client receives it instantly — no polling.

Why is Row Level Security important here?

Because the frontend talks to Supabase directly with a public anon key, RLS policies are what enforce who can read and write rows. They are the real security boundary, not the client code.

Do I need to host a backend?

No. Supabase is the backend. The frontend is a static React app, so you deploy it to a free static host like Netlify or Cloudflare Pages and point it at your Supabase project.

Deploy Supabase Realtime Chat for free

Free-tier platforms that can host this project. Pick one and ship it.