Katerina Skroumpelou
a7563e9fe6
* Use latest 2.x version of `@supabase/supabase-js` in all examples * Use `latest` version of `@supabase/ssr` in all examples * Remove lock files from examples * Add examples lock files in .gitignore The rationale is: - Lock files are not actively maintained/updated (or the versions in the package.json files for that matter) - They pin an arbitrary version (from the end-user perspective) - Removes the need to manually update the versions and reinstall - Consistency <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Chores** * Broadened Supabase SDK dependency version constraints across example projects for greater flexibility with compatible updates * Updated some SSR package dependencies to track latest releases * Added gitignore rules for dependency lock files in example directories <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Supabase Realtime Presence API Sample Program
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.
- Frontend:
- Backend:
- app.supabase.io: hosted postgres database with realtime support.
Real time Presence APIs used.
This program shows usage of channel presence API calls such as , channel.on('presence', ...), channel.subscribe function usage.
Getting Started
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 "User Management Starter" Quickstart
This will create user tables and profile tables for user management.
3. Get the URL and Key
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.
4. Pull this example git repository
git clone <<this repository url>>
5. Create a .env.local file
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>>
5. Now run the development server!
Now run First, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
How to Test?
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.
Deployment
Since this is next.js application, simplest method to deploy this repository is on Vercel.
Conclusion/Next Steps
- Need to implement Profile page
- Need to implement ability to upload User Avatars
- Need ability to read user avatar from social media.