Presence for online status in Supabase - Mini Project: Build & Apply

Presence for Online Status

📖 Scenario: You are building a simple chat application where users can see who is currently online. To do this, you will use Supabase's real-time presence feature to track online users.

🎯 Goal: Create a presence system using Supabase that tracks users' online status in real-time.

📋 What You'll Learn

Create a Supabase client instance with the given URL and anon key

Set up a presence channel for user online status

Track when users join and leave the channel

Update the presence state to reflect current online users

💡 Why This Matters

🌍 Real World

Presence tracking is essential in chat apps, collaboration tools, and online games to show who is currently active.

💼 Career

Understanding real-time presence helps in building interactive cloud applications and improves user engagement.

1

Create Supabase client instance

Create a Supabase client instance called supabase using the URL https://xyzcompany.supabase.co and the anon key public-anon-key.

Supabase

# Create Supabase client instance
# Your code here

Hint

Use createClient from @supabase/supabase-js with the given URL and anon key.

2

Set up presence channel

Create a presence channel called presenceChannel by subscribing to the Supabase real-time channel named online-users.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseAnonKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Create presence channel
// Your code here

Hint

Use supabase.channel('online-users').subscribe() to create the presence channel.

3

Track user join and leave events

Use presenceChannel to track when users join and leave by adding event handlers for 'presence' events with onJoin and onLeave callbacks. Use variables userId and userName inside the callbacks.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseAnonKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

const presenceChannel = supabase.channel('online-users').subscribe();

// Add presence event handlers
// Your code here

Hint

Use presenceChannel.on('presence', { onJoin: ..., onLeave: ... }) to track user presence.

4

Update presence state with track method

Use presenceChannel.track to add the current user with userId set to 'user-123' and userName set to 'Alice'.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseAnonKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

const presenceChannel = supabase.channel('online-users').subscribe();

presenceChannel.on('presence', {
  onJoin: ({ userId, userName }) => {
    console.log(`${userName} joined with ID ${userId}`);
  },
  onLeave: ({ userId, userName }) => {
    console.log(`${userName} left with ID ${userId}`);
  }
});

// Track current user presence
// Your code here

Hint

Use presenceChannel.track with the given userId and userName to mark the user as online.

Practice

1. What is the main purpose of using presence in Supabase realtime channels?

easy

A. To show which users are currently online in real-time

B. To store user passwords securely

C. To send emails to users

D. To create database backups automatically

Solution

1. Step 1: Understand presence feature

   Presence in Supabase is designed to track and show who is online at any moment.

2. Step 2: Identify main use case

   It helps applications display real-time online user lists, not for security or backups.

3. Final Answer:

   To show which users are currently online in real-time -> Option A

4. Quick Check:

   Presence = Online user tracking [OK]

Hint: Presence means tracking who is online live [OK]

Common Mistakes:

• Confusing presence with security features
• Thinking presence handles backups
• Assuming presence sends emails

2. Which of the following is the correct way to listen for presence updates in Supabase realtime channels?

easy

A. channel.on('presence', callback)

B. channel.on('update', callback)

C. channel.on('message', callback)

D. channel.on('sync', callback)

Solution

1. Step 1: Recall Supabase presence event names

   Supabase presence uses the 'sync' event to notify when presence data updates.

2. Step 2: Match event to correct listener

   The 'sync' event triggers the callback with the updated online user list.

3. Final Answer:

   channel.on('sync', callback) -> Option D

4. Quick Check:

   Presence updates use 'sync' event [OK]

Hint: Presence updates come from 'sync' event, not 'presence' [OK]

Common Mistakes:

• Using 'presence' event which does not exist
• Confusing 'message' event with presence updates
• Using 'update' event which is unrelated

3. Given this code snippet, what will be logged when a user joins the presence channel?

const channel = supabase.channel('online-users').on('presence', () => {
  console.log(channel.presenceState())
}).subscribe()

medium

A. An object showing all currently online users

B. An error because presenceState() is not a function

C. An empty array always

D. A string message 'User joined'

Solution

1. Step 1: Understand presenceState() method

   presenceState() returns the current presence data, showing online users grouped by user ID.

2. Step 2: Analyze code behavior on 'presence' event

   When a user joins, 'presence' triggers and logs the updated presence state object.

3. Final Answer:

   An object showing all currently online users -> Option A

4. Quick Check:

   presenceState() = online users object [OK]

Hint: presenceState() returns online users object on presence event [OK]

Common Mistakes:

• Thinking presenceState() is undefined
• Expecting a string message instead of object
• Assuming it returns an empty array always

4. You wrote this code to track online users but no updates appear:

const channel = supabase.channel('online-users')
channel.on('presence', () => {
  console.log('Users online:', channel.presenceState())
})

What is the likely problem?

medium

A. The event name 'presence' is incorrect

B. You forgot to call subscribe() on the channel

C. presenceState() does not exist on channel

D. You need to use 'message' event instead

Solution

1. Step 1: Check channel subscription

   Without calling subscribe(), the channel does not connect and receive events.

2. Step 2: Confirm event and method correctness

   'presence' event and presenceState() are correct, so missing subscribe() is the issue.

3. Final Answer:

   You forgot to call subscribe() on the channel -> Option B

4. Quick Check:

   Must call subscribe() to receive events [OK]

Hint: Always call subscribe() after setting up channel listeners [OK]

Common Mistakes:

• Skipping subscribe() call
• Using wrong event name
• Expecting presenceState() without subscription

5. You want to show a live list of online users with their usernames using Supabase presence. Which approach correctly combines presence tracking and user data fetching?

hard

A. Subscribe to 'update' events and update UI without querying user data

B. Query user profiles once on page load, then listen to 'message' events for updates

C. Listen to 'presence' event, get user IDs from presenceState(), then query user profiles from database

D. Use presenceState() to get usernames directly without extra queries

Solution

1. Step 1: Understand presenceState() data

   presenceState() gives user IDs and metadata, but not full usernames.

2. Step 2: Combine presence with database queries

   After getting IDs from presenceState(), query the database to fetch usernames for display.

3. Final Answer:

   Listen to 'presence' event, get user IDs from presenceState(), then query user profiles from database -> Option C

4. Quick Check:

   Presence + DB query = live usernames [OK]

Hint: Use presenceState() IDs then query DB for usernames [OK]

Common Mistakes:

• Expecting presenceState() to contain usernames
• Not querying user profiles after presence update
• Listening to wrong events like 'message' or 'update'