Auth state change listeners in Supabase - Mini Project: Build & Apply

Supabase Auth State Change Listeners

📖 Scenario: You are building a simple web app that needs to react when users log in or log out. You will use Supabase's authentication state change listeners to detect these changes and update the app accordingly.

🎯 Goal: Create a Supabase client and set up an authentication state change listener that logs the current user status whenever it changes.

📋 What You'll Learn

Create a Supabase client with the given URL and anon key

Set up a variable to hold the current user

Add an auth state change listener using supabase.auth.onAuthStateChange

Update the current user variable inside the listener callback

💡 Why This Matters

🌍 Real World

Web apps often need to know when users log in or out to update the interface or restrict access. Using auth state change listeners helps apps react instantly to these changes.

💼 Career

Understanding how to listen for authentication changes is key for frontend and backend developers working with user sessions and security in cloud-based applications.

1

Create the Supabase client

Create a constant called supabase by calling createClient with the URL 'https://xyzcompany.supabase.co' and the anon key 'public-anon-key'.

Supabase

# Your code here

Need a hint?

Use createClient from @supabase/supabase-js with the exact URL and anon key.

2

Create a variable to hold the current user

Create a variable called currentUser and set it to null.

Supabase

import { createClient } from '@supabase/supabase-js';
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

# Your code here

Need a hint?

Use let to declare currentUser and initialize it to null.

3

Set up the auth state change listener

Use supabase.auth.onAuthStateChange with a callback that takes event and session as parameters. Inside the callback, set currentUser to session?.user ?? null.

Supabase

import { createClient } from '@supabase/supabase-js';
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

let currentUser = null;

# Your code here

Need a hint?

Use optional chaining session?.user to safely get the user or set null if no session.

4

Complete by exporting the current user variable

Add the line export { currentUser }; at the end of the file to allow other parts of the app to access the current user.

Supabase

import { createClient } from '@supabase/supabase-js';
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

let currentUser = null;

supabase.auth.onAuthStateChange((event, session) => {
    currentUser = session?.user ?? null;
});

# Your code here

Need a hint?

Use export to share currentUser with other modules.