Session management in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

How does Supabase handle session persistence by default?

Supabase uses a client library to manage user sessions. What is the default behavior for session persistence when a user logs in?

A Sessions are stored only in memory and are lost when the browser tab is closed or refreshed.

B Sessions are stored in local storage and persist across browser tabs and reloads until the user logs out.

C Sessions are stored in cookies with a fixed expiration of 1 hour regardless of user activity.

D Sessions are stored on the server and require manual refresh tokens to maintain.

💡 Hint

Think about how web apps keep you logged in even if you close and reopen the browser.

Supabase client stores session tokens in local storage by default, allowing sessions to persist across tabs and reloads until the user explicitly logs out.

❓ security

intermediate

What is the risk of storing Supabase session tokens in local storage?

Supabase stores session tokens in local storage by default. What is a primary security risk of this approach?

A Local storage tokens automatically expire after 5 minutes, causing frequent logouts.

B Local storage tokens are sent with every HTTP request, exposing them to man-in-the-middle attacks.

C Local storage tokens are encrypted by default, so there is no risk.

D Local storage tokens can be accessed by any script running on the page, increasing risk of cross-site scripting (XSS) attacks.

💡 Hint

Consider what happens if a malicious script runs on your page.

Local storage is accessible by any JavaScript running on the page, so if an attacker injects malicious scripts (XSS), they can steal session tokens.

❓ Architecture

advanced

How to implement secure session refresh in Supabase?

You want to keep user sessions active securely without forcing frequent logins. Which approach best implements secure session refresh with Supabase?

A Use Supabase's built-in refresh token mechanism that automatically refreshes access tokens before expiration without exposing tokens to client-side scripts.

B Store access tokens in local storage and refresh tokens in cookies accessible by JavaScript to allow manual refresh calls.

C Store all tokens in session storage and refresh tokens only on page reload.

D Disable refresh tokens and require users to log in again every 15 minutes for security.

💡 Hint

Think about how tokens can be refreshed without exposing sensitive data to scripts.

Supabase provides a secure refresh token mechanism that refreshes access tokens automatically and securely, minimizing exposure and user friction.

✅ Best Practice

advanced

Which is the best practice for handling Supabase session tokens in a React app?

In a React app using Supabase, what is the best practice to handle session tokens to balance security and user experience?

A Save tokens in local storage and reload the entire app on every token refresh.

B Manually store tokens in React state and pass them as props to components to control access.

C Use Supabase client’s built-in session management and listen to auth state changes to update UI accordingly, avoiding manual token handling.

D Store tokens in cookies accessible by JavaScript and refresh tokens manually on each API call.

💡 Hint

Consider how to keep your app reactive to login/logout without extra token management code.

Supabase client manages sessions internally and emits auth state changes. React apps should subscribe to these changes to update UI, avoiding manual token handling which can cause bugs and security risks.

🧠 Conceptual

expert

What happens if a Supabase session token expires and no refresh token is available?

Consider a scenario where a user's Supabase session token expires and the client does not have a valid refresh token. What is the expected behavior?

A The user is automatically logged out and must sign in again to obtain a new session token.

B The client silently requests a new token from Supabase without user interaction.

C The expired token is accepted for 24 hours to allow seamless user experience.

D The client switches to offline mode and queues requests until a new token is manually provided.

💡 Hint

Think about what happens when a token is no longer valid and cannot be refreshed.

If the session token expires and no refresh token is available, Supabase requires the user to sign in again to get a new valid session token, ensuring security.

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