Session management in Supabase - Mini Project: Build & Apply

Session Management with Supabase

📖 Scenario: You are building a simple web app that needs to remember if a user is logged in or not. You will use Supabase to manage user sessions securely.

🎯 Goal: Create a basic session management setup using Supabase client. You will initialize the client, configure session persistence, check for an active session, and handle session changes.

📋 What You'll Learn

Initialize Supabase client with the exact URL and anon key

Create a variable to hold the current session

Write code to check if a session exists and store it

Add an event listener to update the session variable when the auth state changes

💡 Why This Matters

🌍 Real World

Session management is essential for any web app that requires user login. Supabase simplifies this by providing easy-to-use authentication and session handling.

💼 Career

Understanding how to manage user sessions with cloud services like Supabase is a key skill for frontend and backend developers working on modern web applications.

1

Initialize Supabase Client

Create a constant called supabaseUrl with the value "https://xyzcompany.supabase.co". Then create a constant called supabaseAnonKey with the value "public-anonymous-key". Finally, initialize the Supabase client by creating a constant called supabase using createClient(supabaseUrl, supabaseAnonKey).

Supabase

// Your code here

Need a hint?

Use const to create variables and call createClient with the URL and anon key.

2

Create Session Variable

Create a variable called session and set it to the current session by calling supabase.auth.getSession() and accessing the data.session property.

Supabase

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

// Your code here

Need a hint?

Use await supabase.auth.getSession() and get data.session from it.

3

Listen for Auth State Changes

Add an event listener using supabase.auth.onAuthStateChange that updates the session variable with the new session from the event callback parameter.

Supabase

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

let session = (await supabase.auth.getSession()).data.session;

// Your code here

Need a hint?

Use supabase.auth.onAuthStateChange and update session inside the callback.

4

Export Session Variable

Export the session variable so other parts of your app can use it by adding export { session }; at the end.

Supabase

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

let session = (await supabase.auth.getSession()).data.session;

supabase.auth.onAuthStateChange((_event, newSession) => {
    session = newSession;
});

// Your code here

Need a hint?

Add export { session }; at the end of your code.