Auth state change listeners in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for authentication state changes using Supabase.

Supabase

supabase.auth.[1]((event, session) => {
  console.log('Auth event:', event);
});

Drag options to blanks, or click blank then click option'

AonAuthStateChange

Bsubscribe

Clisten

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'subscribe' or 'listen'.

Missing the method call entirely.

The onAuthStateChange method is used to listen for authentication state changes in Supabase.

2fill in blank

medium

Complete the code to handle the 'SIGNED_IN' event inside the auth state change listener.

Supabase

supabase.auth.onAuthStateChange((event, session) => {
  if (event === [1]) {
    console.log('User signed in:', session.user);
  }
});

Drag options to blanks, or click blank then click option'

A'SIGNED_IN'

B'SIGNED_OUT'

C'USER_UPDATED'

D'TOKEN_REFRESHED'

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'SIGNED_IN' with 'SIGNED_OUT'.

Using event names that do not exist.

The event 'SIGNED_IN' indicates a user has signed in.

3fill in blank

hard

Fix the error in the code to correctly unsubscribe from the auth state change listener.

Supabase

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

Drag options to blanks, or click blank then click option'

Astop

Bremove

Ccancel

Dunsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'remove' or 'stop'.

Not calling any method to unsubscribe.

The unsubscribe() method is used to stop listening to auth state changes.

4fill in blank

hard

Fill both blanks to log the user's email when the 'SIGNED_IN' event occurs.

Supabase

supabase.auth.onAuthStateChange((event, session) => {
  if (event === [1]) {
    console.log('Email:', session.user.[2]);
  }
});

Drag options to blanks, or click blank then click option'

A'SIGNED_IN'

B'SIGNED_OUT'

Cemail

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong event name.

Accessing a wrong user property like 'id' instead of 'email'.

Use 'SIGNED_IN' to check the event and email to access the user's email.

5fill in blank

hard

Fill all three blanks to correctly set up an auth state change listener that unsubscribes after logging the event.

Supabase

const { data: listener } = supabase.auth.[1]((event, session) => {
  console.log('Event:', [2]);
});
listener.[3]();

Drag options to blanks, or click blank then click option'

AonAuthStateChange

Bevent

Cunsubscribe

Dsession

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names for listening or unsubscribing.

Logging the wrong variable.

Use onAuthStateChange to listen, log the event, and call unsubscribe() to stop listening.

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