Creating and destroying sessions in Remix - Visual Walkthrough

Concept Flow - Creating and destroying sessions

User sends request

↓

Check for existing session

↓

Use session

↓

Process request

↓

If logout requested?

↓

Destroy session

↓

Send response

This flow shows how a Remix app checks for a session, creates one if missing, processes the request, and destroys the session if logout is requested.

Execution Sample

Remix

import { createCookieSessionStorage, json } from '@remix-run/node';

const storage = createCookieSessionStorage({
  cookie: { name: 'session', secrets: ['s3cret'] }
});

export async function loader({ request }) {
  let session = await storage.getSession(request.headers.get('Cookie'));
  // ... use session
  return json({ ok: true }, {
    headers: { 'Set-Cookie': await storage.commitSession(session) }
  });
}

export async function action({ request }) {
  let session = await storage.getSession(request.headers.get('Cookie'));
  if (request.method === 'POST') {
    session = null;
  }
  return new Response('Logged out', {
    headers: { 'Set-Cookie': await storage.commitSession(session) }
  });
}

This code creates a session storage, reads the session from request cookies, and destroys the session on POST (logout).

Execution Table

Step	Action	Session Exists?	Session State	Response Header Set-Cookie
1	Receive request with no cookie	No	Create new empty session	Set-Cookie with new session ID
2	Process loader function	Yes	Session available for reading/writing	No change
3	Receive POST logout request	Yes	Destroy session	Set-Cookie with expired session
4	Send response	N/A	Session destroyed or kept	Set-Cookie sent accordingly
5	Request without session cookie again	No	Create new session	Set-Cookie with new session ID

💡 Execution stops after response is sent with appropriate Set-Cookie header to create or destroy session.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
session	undefined	new empty session	session with data	session destroyed	session destroyed	new empty session

Key Moments - 3 Insights

Why do we check if a session exists before creating a new one?

Because if a session already exists (see Step 2 in execution_table), we want to use it to keep user data. Creating a new session every time would lose that data.

What happens when we call session.destroy()?

Calling session.destroy() marks the session to be removed. The response then sets a cookie that expires the session (see Step 3), effectively logging the user out.

Why do we send a Set-Cookie header in the response?

The Set-Cookie header tells the browser to store or remove the session cookie. Without it, the browser wouldn't know to keep or delete the session.

Visual Quiz - 3 Questions

Look at the execution_table, what is the session state after Step 1?

A Session destroyed

B New empty session created

C Session with data

D Session undefined

💡 Hint

Check the 'Session State' column in Step 1 of execution_table.

At which step does the session get destroyed?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look for 'Destroy session' in the 'Action' column of execution_table.

If the request never includes a session cookie, what happens at Step 5?

A Session is destroyed

B Session remains unchanged

C New session is created

D Error occurs

💡 Hint

See 'Session Exists?' and 'Session State' columns at Step 5 in execution_table.

Concept Snapshot

Creating and destroying sessions in Remix:
- Use createCookieSessionStorage to manage sessions.
- Read session from request cookies.
- Create new session if none exists.
- Destroy session by calling session.destroy() and sending Set-Cookie header.
- Always send Set-Cookie header to update browser cookie.
- Sessions keep user data across requests until destroyed.

Full Transcript

In Remix, sessions are managed using cookie-based storage. When a request arrives, the app checks if a session cookie exists. If not, it creates a new empty session. The session is used to store user data during the request. When the user logs out, the session is destroyed by calling session.destroy(), and the response sends a Set-Cookie header that expires the cookie. This process ensures the browser knows to remove the session cookie. Each step updates the session state and the response headers accordingly, maintaining user session data or clearing it on logout.

Practice

1. What is the main purpose of sessions in Remix Framework?

easy

A. To optimize image loading on the website

B. To style the user interface dynamically

C. To handle database migrations automatically

D. To remember user data across different pages using cookies

Solution

1. Step 1: Understand what sessions do

   Sessions store user data so it can be accessed on multiple pages.

2. Step 2: Identify the correct purpose

   Remembering user data across pages is exactly what sessions do using cookies.

3. Final Answer:

   To remember user data across different pages using cookies -> Option D

4. Quick Check:

   Sessions = Remember user data [OK]

Hint: Sessions store user info across pages using cookies [OK]

Common Mistakes:

• Confusing sessions with styling or database tasks
• Thinking sessions optimize images
• Assuming sessions run migrations

2. Which of the following is the correct way to create a session storage in Remix?

easy

A. const sessionStorage = createCookieSessionStorage({ cookie: { name: 'session' } });

B. const sessionStorage = new SessionStorage('session');

C. const sessionStorage = createSessionStorage('session');

D. const sessionStorage = cookieSessionStorage('session');

Solution

1. Step 1: Recall Remix session creation syntax

   Remix uses createCookieSessionStorage with a cookie config object.

2. Step 2: Match the correct syntax

   const sessionStorage = createCookieSessionStorage({ cookie: { name: 'session' } }); matches the exact Remix pattern for creating session storage.

3. Final Answer:

   const sessionStorage = createCookieSessionStorage({ cookie: { name: 'session' } }); -> Option A

4. Quick Check:

   Use createCookieSessionStorage with cookie config [OK]

Hint: Use createCookieSessionStorage with cookie options [OK]

Common Mistakes:

• Using incorrect function names like createSessionStorage
• Trying to instantiate with new keyword
• Using cookieSessionStorage which doesn't exist

3. Given this code snippet, what will be the result of calling destroySession(session) in Remix?

const session = await sessionStorage.getSession(request.headers.get('Cookie'));
const response = new Response('Logged out');
return redirect('/login', {
  headers: {
    'Set-Cookie': await sessionStorage.destroySession(session)
  }
});

medium

A. It keeps the session active but redirects to /login

B. It throws an error because destroySession requires no arguments

C. It clears the session cookie and redirects the user to /login

D. It creates a new session and redirects to /login

Solution

1. Step 1: Understand destroySession behavior

   destroySession removes the session cookie to log the user out.

2. Step 2: Analyze the redirect with Set-Cookie header

   The response sets the cookie header to destroy the session and redirects to /login.

3. Final Answer:

   It clears the session cookie and redirects the user to /login -> Option C

4. Quick Check:

   destroySession clears cookie + redirect = It clears the session cookie and redirects the user to /login [OK]

Hint: destroySession clears cookie and redirects user [OK]

Common Mistakes:

• Thinking destroySession takes no arguments
• Assuming session remains active after destroySession
• Confusing destroySession with creating a new session

4. Identify the error in this Remix session destruction code:

const session = await sessionStorage.getSession(request.headers.get('Cookie'));
return redirect('/logout', {
  headers: {
    'Set-Cookie': sessionStorage.destroySession(session)
  }
});

medium

A. Missing await before sessionStorage.destroySession

B. Incorrect header name; should be 'Cookie' instead of 'Set-Cookie'

C. destroySession should not receive any arguments

D. redirect cannot have headers in Remix

Solution

1. Step 1: Check async function usage

   destroySession returns a promise, so it must be awaited to get the cookie string.

2. Step 2: Verify header usage and arguments

   Header 'Set-Cookie' is correct and destroySession requires the session argument.

3. Final Answer:

   Missing await before sessionStorage.destroySession -> Option A

4. Quick Check:

   Async destroySession needs await [OK]

Hint: Always await async session methods like destroySession [OK]

Common Mistakes:

• Forgetting to await async session methods
• Using wrong header names for cookies
• Passing wrong arguments to destroySession

5. You want to log out a user and clear their session securely in Remix. Which sequence of steps correctly achieves this?

1. Get the current session from the request cookie.
2. Destroy the session to clear cookie data.
3. Redirect the user to the login page with the destroyed session cookie set.
4. Create a new session with empty data before redirecting.

hard

A. All steps 1, 2, 3, and 4 must be done to log out properly

B. Steps 1, 2, and 3 only; creating a new session is unnecessary

C. Steps 2 and 3 only; getting current session is not needed

D. Steps 1 and 4 only; destroying session is optional

Solution

1. Step 1: Understand session destruction process

   Getting the current session is needed to destroy it properly.

2. Step 2: Recognize that creating a new empty session is unnecessary

   Destroying the session clears the cookie; no new session is needed for logout.

3. Step 3: Confirm redirect with destroyed session cookie

   Redirecting with the destroyed session cookie logs the user out securely.

4. Final Answer:

   Steps 1, 2, and 3 only; creating a new session is unnecessary -> Option B

5. Quick Check:

   Destroy session + redirect = logout [OK]

Hint: Destroy session and redirect; no need to create new session [OK]

Common Mistakes:

• Creating a new empty session after destroying
• Skipping getting the current session
• Not redirecting after destroying session