Auth state change listeners in Supabase - Step-by-Step Execution

Process Flow - Auth state change listeners

Start app

↓

Register auth listener

↓

User signs in/out

↓

Listener detects change

↓

Update app state

↓

Reflect changes in UI

The app starts and sets up a listener for authentication changes. When the user signs in or out, the listener detects it and updates the app state and UI accordingly.

Execution Sample

Supabase

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

This code sets up a listener that runs a function whenever the authentication state changes, logging the event and session info.

Process Table

Step	Event Triggered	Listener Action	Session State	App State Update
1	App starts	Listener runs callback (initial)	null	No user logged in
2	User signs in	Listener runs callback	{ user: 'user1' }	App updates to logged in
3	User signs out	Listener runs callback	null	App updates to logged out
4	User session refresh	Listener runs callback	{ user: 'user1' }	App keeps logged in state

💡 No more auth events; listener waits for next change

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4
event	SIGNED_OUT	SIGNED_IN	SIGNED_OUT	TOKEN_REFRESHED
session	null	{ user: 'user1' }	null	{ user: 'user1' }
appState	logged out	logged in	logged out	logged in

Key Moments - 3 Insights

Why does the listener run when the app starts even if the user is not signed in?

The listener callback runs immediately upon registration (step 1) with the initial auth state: event='SIGNED_OUT', session=null, updating app state to logged out.

What happens if the user signs out and then signs in quickly?

The listener runs twice, once for SIGNED_OUT and once for SIGNED_IN events, updating the session and app state accordingly as shown in steps 3 and 2.

Why is the session sometimes null and sometimes an object?

Session is null when no user is signed in (steps 1 and 3), and contains user info when signed in or refreshed (steps 2 and 4).

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the appState?

A logged in

B logged out

C null

D session expired

💡 Hint

Check the 'App State Update' column at step 2 in the execution_table

At which step does the listener detect the user signing out?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Event Triggered' column for SIGNED_OUT event in the execution_table

If the session is null, what is the likely appState?

A logged in

B logged out

C refreshing

D error

💡 Hint

Refer to the variable_tracker for session and appState values

Concept Snapshot

Auth state change listeners track user sign-in and sign-out events.
Register a listener with supabase.auth.onAuthStateChange(callback).
Callback receives event type and session info.
Update app state and UI based on session presence.
Listener runs on every auth event including sign-in, sign-out, and token refresh.

Full Transcript

When you start your app, you set up a listener to watch for authentication changes. This listener waits for events like user sign-in or sign-out. When the user signs in, the listener runs a function that receives the event type and session details. The app then updates its state to show the user is logged in. If the user signs out, the listener runs again, session becomes null, and the app updates to logged out. The listener also runs on token refresh events to keep the session current. This way, your app always knows the user's auth status and can update the interface accordingly.

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