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.

Practice

1. What is the main purpose of an auth state change listener in Supabase?

easy

A. To send emails to users automatically

B. To store user data permanently in the database

C. To detect when a user logs in or logs out and update the app accordingly

D. To encrypt user passwords before login

Solution

1. Step 1: Understand auth state change listener role

   An auth state change listener watches for user login or logout events.

2. Step 2: Identify its main use in app behavior

   It updates the app UI or logic based on whether the user is signed in or out.

3. Final Answer:

   To detect when a user logs in or logs out and update the app accordingly -> Option C

4. Quick Check:

   Auth listener updates app on login/logout [OK]

Hint: Auth listeners track login/logout to update app UI [OK]

Common Mistakes:

• Thinking it sends emails automatically
• Confusing with data storage functions
• Assuming it encrypts passwords

2. Which of the following is the correct way to subscribe to auth state changes in Supabase?

easy

A. supabase.auth.subscribe((event, session) => { /* handler */ })

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

C. supabase.auth.listenAuthChange((event, session) => { /* handler */ })

D. supabase.auth.watchStateChange((event, session) => { /* handler */ })

Solution

1. Step 1: Recall Supabase auth listener method

   The correct method to listen for auth changes is onAuthStateChange.

2. Step 2: Verify method signature

   It takes a callback with parameters event and session.

3. Final Answer:

   supabase.auth.onAuthStateChange((event, session) => { /* handler */ }) -> Option B

4. Quick Check:

   Use onAuthStateChange for auth listeners [OK]

Hint: Use onAuthStateChange method to listen auth events [OK]

Common Mistakes:

• Using non-existent methods like listenAuthChange
• Confusing subscribe or watchStateChange methods
• Incorrect callback parameters

3. What will be logged by this code snippet when a user signs out?

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

// User signs out here
supabase.auth.signOut();

medium

A. "SIGNED_OUT"

B. "SIGNED_IN"

C. "USER_UPDATED"

D. No output

Solution

1. Step 1: Understand event on user sign out

   When a user signs out, the event emitted is "SIGNED_OUT".

2. Step 2: Check console.log output

   The listener logs the event string, so it will print "SIGNED_OUT".

3. Final Answer:

   "SIGNED_OUT" -> Option A

4. Quick Check:

   Sign out triggers SIGNED_OUT event [OK]

Hint: Sign out triggers SIGNED_OUT event logged [OK]

Common Mistakes:

• Expecting SIGNED_IN on sign out
• Thinking USER_UPDATED triggers on sign out
• Assuming no event is logged

4. Identify the error in this code that listens for auth state changes:

const authListener = supabase.auth.onAuthStateChange((event, session) => {
  if(event === 'SIGNED_IN') {
    console.log('User signed in');
  }
});

// Later in code
authListener.unsubscribe();

medium

A. authListener.unsubscribe() is incorrect; should use authListener.data.subscription.unsubscribe()

B. Callback function parameters are wrong

C. Event name 'SIGNED_IN' is invalid

D. No need to unsubscribe from authListener

Solution

1. Step 1: Check how onAuthStateChange returns subscription

   It returns an object with a data property containing the subscription.

2. Step 2: Verify unsubscribe method call

   Unsubscribe should be called on authListener.data.subscription.unsubscribe(), not directly on authListener.unsubscribe().

3. Final Answer:

   authListener.unsubscribe() is incorrect; should use authListener.data.subscription.unsubscribe() -> Option A

4. Quick Check:

   Unsubscribe via authListener.data.subscription.unsubscribe() [OK]

Hint: Call unsubscribe on data.subscription, not directly [OK]

Common Mistakes:

• Calling unsubscribe directly on listener object
• Misnaming event strings
• Skipping unsubscribe causing memory leaks

5. You want to update your app UI only when a user signs in or signs out, but not on other auth events. Which code snippet correctly implements this using Supabase auth state change listener?

hard

A. supabase.auth.onAuthStateChange((event, session) => {
if(event === 'USER_UPDATED') {
updateUI(session);
}
});

B. supabase.auth.onAuthStateChange((event, session) => {
if(event !== 'SIGNED_IN' && event !== 'SIGNED_OUT') {
updateUI(session);
}
});

C. supabase.auth.onAuthStateChange((event, session) => {
updateUI(session);
});

D. supabase.auth.onAuthStateChange((event, session) => {
if(event === 'SIGNED_IN' || event === 'SIGNED_OUT') {
updateUI(session);
}
});

Solution

1. Step 1: Identify events to trigger UI update

   Only 'SIGNED_IN' and 'SIGNED_OUT' events should update the UI.

2. Step 2: Check conditional logic in each option

   supabase.auth.onAuthStateChange((event, session) => { if(event === 'SIGNED_IN' || event === 'SIGNED_OUT') { updateUI(session); } }); correctly checks for these two events and calls updateUI accordingly.

3. Final Answer:

   supabase.auth.onAuthStateChange((event, session) => { if(event === 'SIGNED_IN' || event === 'SIGNED_OUT') { updateUI(session); } }); -> Option D

4. Quick Check:

   Update UI only on SIGNED_IN or SIGNED_OUT [OK]

Hint: Use if(event==='SIGNED_IN'||event==='SIGNED_OUT') to filter events [OK]

Common Mistakes:

• Updating UI on all events without filtering
• Using wrong event names like USER_UPDATED
• Negating conditions incorrectly