examples/realtime/nextjs-auth-presence/README.md
This is an example program for Supabase Realtime Presence APIs. User get authenticated using Supabase Auth API. Once Logged-in you can see which users are 'present' and viewing the page.
This program shows usage of channel presence API calls such as , channel.on('presence', ...), channel.subscribe function usage.
Sign up to Supabase - https://app.supabase.io and create a new project. Wait for your database to start.
This will create user tables and profile tables for user management.
Go to the 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.
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.
git clone <<this repository url>>
Create a .env.local file and add following environment variables.
NEXT_PUBLIC_SUPABASE_URL=<<insert-your-db-url-here>>
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<<insert-your-publishable-key-here>>
Now run First, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
When you visit http://localhost:3000, you will be redirected to auth login/signup screen.
Signup if you haven't and then login.
You will see your email listed on the page.
Open another browser window. And sign-in as another user.
As you login from other browser window, you will see list of current users updated.
Since this is next.js application, simplest method to deploy this repository is on Vercel.