Presence for online status in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

How does Supabase Presence track online users?

Supabase Presence uses a real-time system to track users' online status. Which option best describes how it detects when a user goes offline?

A It uses WebSocket connection state; when the connection closes, the user is marked offline.

B It checks the user's last login timestamp in the database every minute.

C It relies on periodic pings from the client to the server; if pings stop, the user is offline.

D It uses browser cookies to detect if the user closes the tab.

💡 Hint

Think about how real-time connections usually detect disconnections.

Supabase Presence uses WebSocket connections. When the connection closes, it knows the user is offline immediately.

❓ Configuration

intermediate

Configuring Supabase Presence to track multiple devices per user

You want to track online status for users who may be connected from multiple devices simultaneously. Which configuration approach correctly supports this?

A Disable presence and rely on session tokens to track devices.

B Use a unique presence channel per device with the same user ID, allowing multiple connections.

C Track presence only by IP address to differentiate devices.

D Use a single presence channel per user ID to track all devices together.

💡 Hint

Consider how presence channels identify connections.

Each device should connect with a unique presence channel instance but share the same user ID to track multiple devices per user.

❓ Architecture

advanced

Designing a scalable presence system with Supabase for thousands of users

You need to design a presence system using Supabase that can handle 10,000 concurrent users efficiently. Which architectural choice best supports this scale?

A Partition presence channels by user groups or regions to distribute load.

B Use a single global presence channel for all users to simplify management.

C Store presence data only in the client local storage to reduce server load.

D Poll the database every second to update user presence status.

💡 Hint

Think about how to distribute load and avoid bottlenecks.

Partitioning presence channels by groups or regions helps distribute load and improves scalability for many users.

❓ security

advanced

Securing presence data in Supabase to prevent spoofing

How can you secure Supabase Presence data to prevent users from spoofing online status of others?

A Allow all users to write presence data freely without restrictions.

B Store presence data in a public table accessible by everyone.

C Disable authentication to simplify presence updates.

D Use Row Level Security (RLS) policies to restrict presence updates to authenticated users only for their own IDs.

💡 Hint

Consider how to restrict who can update presence data.

Using RLS policies ensures only authenticated users can update their own presence data, preventing spoofing.

✅ Best Practice

expert

Handling presence state cleanup on unexpected client disconnects

In Supabase Presence, what is the best practice to ensure presence state is cleaned up if a client disconnects unexpectedly (e.g., network failure)?

A Use a fixed timeout to remove presence entries after inactivity, regardless of connection state.

B Require clients to send a disconnect message before closing the connection.

C Rely on the server to detect WebSocket disconnects and automatically remove presence entries.

D Manually clear presence data from the database every hour with a scheduled job.

💡 Hint

Think about how real-time systems detect lost connections.

Supabase Presence uses WebSocket connection state; the server detects disconnects and cleans presence automatically.

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'