NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co

NEXT_PUBLIC_SUPABASE_KEY=your-anon-key

/node_modules

/.pnp

/coverage

/.next/

/out/

/build

This is a full-stack Slack clone example using:

- Frontend:

- Next.js.

- [Supabase](https://supabase.io/docs/library/getting-started) for user management and realtime data syncing.

- Backend:

- [app.supabase.io](https://app.supabase.io/): hosted Postgres database with restful API for usage with Supabase.js.


This example is a clone of the [Slack Clone example](https://github.com/supabase/supabase/tree/master/examples/slack-clone) in the supabase repo, feel free to check it out!

Once you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

[](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db&env=NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_KEY&envDescription=Required%20to%20connect%20the%20app%to%Supabase&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db%23step-3-set-up-environment-variables&project-name=supabase-slack-clone&repo-name=supabase-slack-clone)

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

npx create-next-app --example with-supabase-auth-realtime-db realtime-chat-app

yarn create next-app --example with-supabase-auth-realtime-db realtime-chat-app

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

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


In your Supabase project, go to Project Settings (the cog icon), open the API tab, and find your **API URL** and **anon** key, you'll need these in the next step.


Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on `.env.local`:

- `NEXT_PUBLIC_SUPABASE_URL` should be the **API URL**

- `NEXT_PUBLIC_SUPABASE_KEY` should be the **anon** key

The **anon** key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data. Read more about this [below](#postgres-row-level-security).

npm install

npm run dev

yarn install

yarn dev

Visit [http://localhost:3000](http://localhost:3000) and start chatting! Open a channel across two browser tabs to see everything getting updated in realtime 🥳. If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).

You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example).

**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.

Alternatively, you can deploy using our template by clicking on the Deploy button below.

[](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db&env=NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_KEY&envDescription=Required%20to%20connect%20the%20app%to%Supabase&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db%23step-3-set-up-environment-variables&project-name=supabase-slack-clone&repo-name=supabase-slack-clone)

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:

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 );

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' );

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 );

import Link from 'next/link'

import { useContext } from 'react'

import UserContext from '~/lib/UserContext'

import { addChannel } from '~/lib/Store'

export default function Layout(props) {

const { signOut } = useContext(UserContext)

const slugify = (text) => {

return text

.toString()

.toLowerCase()

.replace(/\s+/g, '-') // Replace spaces with -

.replace(/[^\w-]+/g, '') // Remove all non-word chars

.replace(/--+/g, '-') // Replace multiple - with single -

.replace(/^-+/, '') // Trim - from start of text

.replace(/-+$/, '') // Trim - from end of text

}

const newChannel = async () => {

const slug = prompt('Please enter your name')

if (slug) {

addChannel(slugify(slug))

}

}

return (

<main className="main flex h-screen w-screen absolute overflow-hidden">

{/* Sidebar */}

<nav

className="w-64 bg-gray-900 text-gray-100 h-screen"

style={{ maxWidth: '20%', minWidth: 150 }}

>

<div className="p-2">

<h4 className="font-bold">Channels</h4>

<ul className="channel-list">

{props.channels.map((x) => (

<SidebarItem

channel={x}

key={x.id}

isActiveChannel={x.id === props.activeChannelId}

/>

))}

</ul>

</div>

<hr className="m-2" />

<div className="p-2">

<button

className="bg-blue-900 hover:bg-blue-800 text-white py-2 px-4 rounded w-full transition duration-150"

onClick={() => newChannel()}

>

New Channel

</button>

</div>

<hr className="m-2" />

<div className="p-2">

<button

className="bg-blue-900 hover:bg-blue-800 text-white py-2 px-4 rounded w-full transition duration-150"

onClick={() => signOut()}

>

Log out

</button>

</div>

</nav>

{/* Messages */}

<div className="flex-1 bg-gray-800 h-screen">{props.children}</div>

</main>

)

const SidebarItem = ({ channel, isActiveChannel }) => (

<>

<li>

<Link href="/channels/[id]" as={`/channels/${channel.id}`}>

<a className={isActiveChannel ? 'font-bold' : ''}>{channel.slug}</a>

</Link>

</li>

</>

const Message = ({ message }) => (

<>

<div className="py-1">

<p className="text-blue-700 font-bold">{message.author.username}</p>

<p className="text-white">{message.message}</p>

</div>

</>

export default Message

import { useState } from 'react'

const MessageInput = ({ onSubmit }) => {

const [messageText, setMessageText] = useState('')

const submitOnEnter = (event) => {

// Watch for enter key

if (event.keyCode === 13) {

onSubmit(messageText)

setMessageText('')

}

}

return (

<>

<input

className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

type="text"

placeholder="Send a message"

value={messageText}

onChange={(e) => setMessageText(e.target.value)}

onKeyDown={(e) => submitOnEnter(e)}

/>

</>

)

export default MessageInput

{

"compilerOptions": {

"baseUrl": ".",

"paths": {

"~/*": ["./*"]

}

}

}