Cookie-based session management in Astro - Step-by-Step Execution

Concept Flow - Cookie-based session management

User sends HTTP request

↓

Server checks for session cookie

↓

Cookie found?

No→Create new session ID

↓

Set session cookie in response

↓

Retrieve session data

↓

Process request with session

↓

Send response with cookie if new

↓

User receives response

↓

Browser stores/updates cookie

↓

Next request includes session cookie

This flow shows how a server uses cookies to track user sessions by checking, creating, and sending session cookies with each request and response.

Execution Sample

Astro

export async function onRequest({ request, cookies }) {
  let sessionData = cookies.get('session')?.value || '';
  let session = {};
  if (sessionData) {
    try {
      session = JSON.parse(atob(sessionData));
    } catch {
      session = {};
    }
  }
  let changed = false;
  if (!('user' in session)) {
    session.user = 'guest';
    changed = true;
  }
  if (changed) {
    const encoded = btoa(JSON.stringify(session));
    cookies.set('session', encoded, {
      path: '/',
      httpOnly: true
    });
  }
  return new Response('Hello ' + session.user);
}

This code checks for a session cookie, sets a default user if missing, and sends back a response with the session cookie.

Execution Table

Step	Action	Session Cookie Present?	Session Data Before	Session Data After	Response Header Set-Cookie	Output
1	Receive request	No	{}	{}	No	N/A
2	Check session cookie	No	{}	{}	No	N/A
3	Create new session	No	{}	{ user: 'guest' }	Yes (new session cookie)	N/A
4	Prepare response	No	{ user: 'guest' }	{ user: 'guest' }	Yes (new session cookie)	Hello guest
5	Send response	No	{ user: 'guest' }	{ user: 'guest' }	Yes (new session cookie)	Hello guest
6	Browser stores cookie	Yes (new session cookie)	{ user: 'guest' }	{ user: 'guest' }	N/A	N/A
7	Next request with cookie	Yes	{ user: 'guest' }	{ user: 'guest' }	No change	Hello guest
8	Check session cookie	Yes	{ user: 'guest' }	{ user: 'guest' }	No change	N/A
9	Retrieve session data	Yes	{ user: 'guest' }	{ user: 'guest' }	No change	N/A
10	Prepare response	Yes	{ user: 'guest' }	{ user: 'guest' }	No change	Hello guest
11	Send response	Yes	{ user: 'guest' }	{ user: 'guest' }	No change	Hello guest
12	Session continues	Yes	{ user: 'guest' }	{ user: 'guest' }	No change	Hello guest

💡 Execution stops after sending response; session cookie persists for next requests.

Variable Tracker

Variable	Start	After Step 3	After Step 7	Final
session cookie	None	Set with new session cookie	Sent with request	Sent with request
session data	{}	{ user: 'guest' }	{ user: 'guest' }	{ user: 'guest' }
response header Set-Cookie	None	Set with new session cookie	No change	No change

Key Moments - 3 Insights

Why does the server create a new session when no cookie is found?

Because the execution_table rows 1-3 show no session cookie present, so the server creates a new session ID and sets default data to track the user.

Why is the Set-Cookie header not changed on subsequent requests?

Rows 7-12 show the session cookie is already present, so the server does not resend or change the cookie unless session data changes.

How does the browser know to send the session cookie on the next request?

Row 6 shows the browser stores the cookie from the response, so it automatically includes it in future requests as per HTTP cookie rules.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What happens to the session data?

A Session data is cleared

B A new session is created with user set to 'guest'

C Session data remains empty

D Session cookie is deleted

💡 Hint

Check the 'Session Data After' column at step 3 in the execution_table

At which step does the browser store the session cookie?

A Step 6

B Step 4

C Step 2

D Step 9

💡 Hint

Look for the row mentioning 'Browser stores cookie' in the execution_table

If the session cookie was missing on step 7, what would happen next?

A The server would delete the session

B The server would keep the old session data

C The server would create a new session again

D The server would send an error

💡 Hint

Refer to steps 1-3 where no cookie causes a new session creation

Concept Snapshot

Cookie-based session management:
- Server checks for session cookie on each request
- If missing, creates new session ID and sets cookie
- Session data stored server-side or encoded in cookie
- Response includes Set-Cookie header when session is new or updated
- Browser stores cookie and sends it with future requests
- Enables tracking user state across multiple requests

Full Transcript

Cookie-based session management works by the server checking incoming requests for a session cookie. If the cookie is missing, the server creates a new session ID and sets default session data, then sends a Set-Cookie header in the response. The browser stores this cookie and includes it in future requests. When the cookie is present, the server retrieves the session data and processes the request accordingly without resetting the cookie. This allows the server to remember user information across multiple visits. The execution table shows each step from receiving the request, checking the cookie, creating or retrieving session data, preparing the response, and the browser storing the cookie for the next request.

Practice

1. What is the main purpose of using cookies in cookie-based session management in Astro?

easy

A. To run server-side code faster

B. To store small pieces of data in the browser to remember user sessions

C. To style the webpage dynamically

D. To increase the size of the webpage

Solution

1. Step 1: Understand what cookies do

   Cookies store small data on the user's browser to keep track of information like sessions.

2. Step 2: Identify the role in session management

   Cookies help remember who the user is between page visits by storing session IDs or tokens.

3. Final Answer:

   To store small pieces of data in the browser to remember user sessions -> Option B

4. Quick Check:

   Cookies = store session data [OK]

Hint: Cookies remember user info in browser for sessions [OK]

Common Mistakes:

• Thinking cookies speed up server code
• Confusing cookies with styling tools
• Believing cookies increase webpage size

2. Which of the following is the correct way to set a cookie named sessionId with value abc123 in Astro?

easy

A. setCookie('sessionId', 'abc123')

B. setCookie('sessionId', abc123)

C. setCookie(sessionId, 'abc123')

D. setCookie('sessionId' = 'abc123')

Solution

1. Step 1: Check function usage

   Astro's setCookie takes the cookie name as a string and the value as a string.

2. Step 2: Validate syntax correctness

   setCookie('sessionId', 'abc123') correctly passes both arguments as strings, matching the expected syntax.

3. Final Answer:

   setCookie('sessionId', 'abc123') -> Option A

4. Quick Check:

   Correct string arguments = setCookie('sessionId', 'abc123') [OK]

Hint: Use quotes around both name and value strings [OK]

Common Mistakes:

• Omitting quotes around value
• Using variable without quotes for name
• Using assignment syntax inside function call

3. Given this Astro server code snippet:

import { setCookie, getCookies } from 'astro:cookies';

export async function get({ request }) {
  const cookies = getCookies(request);
  if (!cookies.user) {
    return new Response('No user cookie', { status: 401 });
  }
  setCookie('lastVisit', new Date().toISOString());
  return new Response(`Welcome back, ${cookies.user}!`);
}

What will be the response if the request has a cookie user=Alice?

medium

A. Error: setCookie requires response object

B. Welcome back, Alice!

C. No user cookie

D. Welcome back, undefined!

Solution

1. Step 1: Check cookie presence

   The code gets cookies from request and checks if cookies.user exists. With user=Alice, it passes the check.

2. Step 2: Identify the error in setCookie

   setCookie('lastVisit', new Date().toISOString()) lacks the required first Response argument, causing a runtime error before returning the greeting.

3. Final Answer:

   Error: setCookie requires response object -> Option A

4. Quick Check:

   setCookie(response, name, value) [OK]

Hint: setCookie requires Response as first argument [OK]

Common Mistakes:

• Overlooking incorrect setCookie usage
• Assuming greeting returns despite error
• Misreading cookie presence logic

4. Identify the error in this Astro code snippet for setting a secure cookie:

import { setCookie } from 'astro:cookies';

export async function post({ request }) {
  setCookie('session', 'xyz', { secure: true });
  return new Response('Session set');
}

medium

A. Missing await before setCookie

B. The cookie name cannot be 'session'

C. The secure option is invalid in Astro

D. setCookie must be called with the response object to attach cookie

Solution

1. Step 1: Understand setCookie usage

   In Astro, to set a cookie on the response, you must attach it to the response headers, not just call setCookie alone.

2. Step 2: Identify missing response handling

   The code calls setCookie but does not attach the cookie to the response, so the cookie won't be sent.

3. Final Answer:

   setCookie must be called with the response object to attach cookie -> Option D

4. Quick Check:

   Cookie needs response headers [OK]

Hint: Attach cookies to response headers to set them [OK]

Common Mistakes:

• Calling setCookie without response context
• Thinking secure option is unsupported
• Forgetting to return response with cookie

5. You want to create a cookie-based session in Astro that expires in 1 hour and is only sent over HTTPS. Which of the following code snippets correctly sets this cookie?

hard

A. setCookie('sessionId', 'abc123', { maxAge: 3600, secure: false })

B. setCookie('sessionId', 'abc123', { expires: new Date(Date.now() + 3600), secure: false })

C. setCookie('sessionId', 'abc123', { maxAge: 3600, secure: true, httpOnly: true })

D. setCookie('sessionId', 'abc123', { maxAge: 3600, secure: false, path: '/' })

Solution

1. Step 1: Check expiration setting

   To expire in 1 hour, use maxAge: 3600 (seconds). One option uses it correctly with secure: true; another uses incorrect expires value.

2. Step 2: Verify secure and httpOnly flags

   Secure must be true to send only over HTTPS. HttpOnly helps protect cookie from scripts.

3. Step 3: Compare options

   Options with secure: false or incorrect expires fail. The snippet with maxAge: 3600, secure: true, httpOnly: true satisfies expiration, HTTPS-only, and adds security.

4. Final Answer:

   setCookie('sessionId', 'abc123', { maxAge: 3600, secure: true, httpOnly: true }) -> Option C

5. Quick Check:

   Expire 1hr + secure + httpOnly = setCookie('sessionId', 'abc123', { maxAge: 3600, secure: true, httpOnly: true }) [OK]

Hint: Use maxAge in seconds, secure and httpOnly true [OK]

Common Mistakes:

• Using expires with wrong Date format
• Setting secure to false for HTTPS-only cookie
• Forgetting httpOnly for security