Auth state change listeners in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What happens when a user signs out in Supabase auth listener?

Consider this Supabase auth state change listener code snippet:

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_OUT') {
    console.log('User signed out');
  }
});

What will be printed when the user signs out?

Supabase

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_OUT') {
    console.log('User signed out');
  }
});

A The console prints 'User signed out' exactly once when the user signs out.

B The console prints 'User signed out' every second after the user signs out.

C Nothing is printed because the event name is incorrect.

D The console prints 'User signed out' only if the session is null.

💡 Hint

Check the event name string for the sign-out event.

The listener triggers once when the auth state changes. When the event is 'SIGNED_OUT', the message prints once.

🧠 Conceptual

intermediate

What does the session parameter represent in onAuthStateChange?

In the Supabase auth state change listener:

supabase.auth.onAuthStateChange((event, session) => { /* ... */ });

What does the session parameter contain?

Supabase

supabase.auth.onAuthStateChange((event, session) => { /* ... */ });

A The previous session object before the auth state changed.

B The event type string like 'SIGNED_IN' or 'SIGNED_OUT'.

C A boolean indicating if the user is authenticated.

D The current user's session object including access token and user info, or null if signed out.

💡 Hint

Think about what data you need to access user info after sign-in.

The session parameter holds the current session data, including tokens and user details, or null if no user is signed in.

❓ Configuration

advanced

Which code correctly unsubscribes from the auth state change listener?

Supabase's onAuthStateChange returns a subscription object with an unsubscribe method.

Which option correctly unsubscribes the listener?

Supabase

const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
  console.log(event);
});

// Unsubscribe code here

A authListener.removeListener();

B authListener.unsubscribe();

C supabase.auth.offAuthStateChange(authListener);

D supabase.auth.onAuthStateChange(null);

💡 Hint

Check the method name on the subscription object returned.

The subscription object has an unsubscribe() method to stop listening to auth changes.

❓ security

advanced

What security risk exists if you do not unsubscribe auth listeners on page unload?

If you add an auth state change listener in a single-page app but never unsubscribe it on page unload, what risk arises?

A The listener will block all network requests until unsubscribed.

B User credentials get exposed to third-party sites automatically.

C Memory leaks causing increased resource use and potential slowdowns.

D The app will automatically sign out the user after a timeout.

💡 Hint

Think about what happens when event listeners accumulate without removal.

Not unsubscribing causes memory leaks as listeners accumulate, slowing the app and wasting resources.

❓ Architecture

expert

How to architect a global auth state listener for multi-tab sync in Supabase?

You want to keep user auth state synchronized across multiple browser tabs using Supabase auth listeners.

Which approach best achieves this?

A Use <code>onAuthStateChange</code> in each tab and broadcast changes via <code>localStorage</code> events to sync state.

B Use server-side polling every 5 seconds to check auth state for all tabs.

C Store the session in a cookie and reload tabs on cookie change to sync state.

D Use a single global listener in the main tab and block other tabs from listening.

💡 Hint

Consider browser features that allow communication between tabs.

Each tab listens for auth changes and uses localStorage events to notify others, keeping state in sync without reloads.