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

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

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

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

Hint

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

Practice

1. What does session management in Supabase primarily help you do?

easy

A. Keep track of who is logged in

B. Store database tables

C. Manage server resources

D. Create new users automatically

Solution

1. Step 1: Understand session management purpose

   Session management is about tracking user login status.

2. Step 2: Match with Supabase context

   Supabase uses sessions to know who is logged in or out.

3. Final Answer:

   Keep track of who is logged in -> Option A

4. Quick Check:

   Session management = tracking logged-in users [OK]

Hint: Sessions track logged-in users, not data or servers [OK]

Common Mistakes:

• Confusing session with database storage
• Thinking session manages server resources
• Assuming session creates users automatically

2. Which Supabase method is used to log a user in with email and password?

easy

A. signOut

B. getSession

C. signInWithPassword

D. createUser

Solution

1. Step 1: Identify login method

   Supabase uses signInWithPassword to log users in with email and password.

2. Step 2: Eliminate other options

   signOut logs out, getSession checks session, createUser is not a Supabase method.

3. Final Answer:

   signInWithPassword -> Option C

4. Quick Check:

   Login method = signInWithPassword [OK]

Hint: Login uses signInWithPassword, logout uses signOut [OK]

Common Mistakes:

• Choosing signOut to log in
• Confusing getSession with login
• Assuming createUser is a Supabase method

3. What will the following code return if a user is logged in?

const { data } = await supabase.auth.getSession();
console.log(data.session);

medium

A. An object with session details

B. null

C. An error message

D. Undefined

Solution

1. Step 1: Understand getSession behavior

   getSession returns session info if user is logged in.

2. Step 2: Analyze console output

   Logging data.session shows session object, not null or error.

3. Final Answer:

   An object with session details -> Option A

4. Quick Check:

   Logged-in session = session object [OK]

Hint: getSession returns session object if logged in, else null [OK]

Common Mistakes:

• Expecting null when user is logged in
• Thinking getSession throws error
• Assuming undefined is returned

4. You wrote this code to log out a user:

await supabase.auth.signInWithPassword();

What is wrong here?

medium

A. You need to pass email and password to signInWithPassword

B. signInWithPassword is for logging in, not logging out

C. signInWithPassword does not exist in Supabase

D. You should use getSession to log out

Solution

1. Step 1: Identify method purpose

   signInWithPassword is for logging in users, not logging out.

2. Step 2: Correct logout method

   To log out, use signOut method instead.

3. Final Answer:

   signInWithPassword is for logging in, not logging out -> Option B

4. Quick Check:

   Logout method ≠ signInWithPassword [OK]

Hint: Use signOut to log out, not signInWithPassword [OK]

Common Mistakes:

• Using signInWithPassword to log out
• Forgetting to pass credentials to signInWithPassword
• Confusing getSession with logout

5. You want to check if a user is logged in before showing a dashboard. Which code snippet correctly does this using Supabase session management?

hard

A. const session = await supabase.auth.signInWithPassword(); if (session) { showDashboard(); } else { showLogin(); }

B. const session = supabase.auth.signOut(); if (session) { showDashboard(); } else { showLogin(); }

C. const session = supabase.auth.getUser(); if (session) { showDashboard(); } else { showLogin(); }

D. const { data } = await supabase.auth.getSession(); if (data.session) { showDashboard(); } else { showLogin(); }

Solution

1. Step 1: Identify correct session check method

   getSession returns current session info to check login status.

2. Step 2: Verify conditional logic

   If data.session exists, user is logged in; else show login screen.

3. Step 3: Eliminate incorrect options

   signInWithPassword logs users in, signOut logs users out, getUser requires await and checking data.user (e.g. const { data } = await supabase.auth.getUser(); if (data.user)) but const session = supabase.auth.getUser(); if (session) { showDashboard(); } else { showLogin(); } lacks both.

4. Final Answer:

   const { data } = await supabase.auth.getSession(); if (data.session) { showDashboard(); } else { showLogin(); } -> Option D

5. Quick Check:

   Check session with getSession before showing dashboard [OK]

Hint: Use getSession and check data.session to confirm login [OK]

Common Mistakes:

• Using signOut or signInWithPassword to check session
• Using getUser without await and proper data.user check
• Not checking if session is null