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.