ethanjb / supabase

Slack Clone

Deploy a simple, real-time Slack clone using Supabase (Postgres) and Vercel (Next.js).

How to use

Watch Video: how to use this repo

1. Create new project

Sign up to Supabase - https://app.supabase.io and create a new project. Wait for your database to start.

2. Run "Slack Clone" Quickstart

Once your database has started, run the "Slack Clone" quickstart.

3. Get the URL and Key

Go to the Project Settings (the cog icon), and find your API URL and anon key.

4. Deploy the front end

Deploy!

You will be asked for a NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_KEY. You can use the keys in step 3.

For developers

Postgres Row level security

This project uses very high-level Authorization using Postgres' Role Level Security. When you start a Postgres database on Supabase, we populate it with an auth schema, and some helper functions. When a user logs in, they are issued a JWT with the role authenticated and thier UUID. We can use these details to provide fine-grained control over what each user can and cannot do.

This is a trimmed-down schema, with the policies:

-- USER PROFILES
CREATE TYPE public.user_status AS ENUM ('ONLINE', 'OFFLINE');
CREATE TABLE public.users (
  id uuid NOT NULL PRIMARY KEY, -- UUID from auth.users (Supabase)
  username text,
  status user_status DEFAULT 'OFFLINE'::public.user_status
);
ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Allow logged-in read access" on public.users FOR SELECT USING ( auth.role() = 'authenticated' );
CREATE POLICY "Allow individual insert access" on public.users FOR INSERT WITH CHECK ( auth.uid() = id );
CREATE POLICY "Allow individual update access" on public.users FOR UPDATE USING ( auth.uid() = id );

-- CHANNELS
CREATE TABLE public.channels (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  inserted_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL,
  slug text NOT NULL UNIQUE
);
ALTER TABLE public.channels ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Allow logged-in full access" on public.channels FOR ALL USING ( auth.role() = 'authenticated' );

-- MESSAGES
CREATE TABLE public.messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  inserted_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL,
  message text,
  user_id uuid REFERENCES public.users NOT NULL,
  channel_id bigint REFERENCES public.channels NOT NULL
);
ALTER TABLE public.messages ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Allow logged-in read access" on public.messages USING ( auth.role() = 'authenticated' );
CREATE POLICY "Allow individual insert access" on public.messages FOR INSERT WITH CHECK ( auth.uid() = user_id );
CREATE POLICY "Allow individual update access" on public.messages FOR UPDATE USING ( auth.uid() = user_id );

Run locally

If you want to run this without deploying:

Clone this folder

# Copy the repo to your machine
git clone --no-checkout https://github.com/supabase/supabase
cd supabase

# Checkout this 
git sparse-checkout init --cone
git sparse-checkout set examples/slack-clone-basic
cd examples/slack-clone-basic

Start the frontend

npm install     # install npm dependencies
npm run dev     # start Next.js

Visit http://localhost:3000 and start slacking! Open in two tabs to see everything getting updated in realtime