Cookie-based session management in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a cookie named 'sessionId' with value 'abc123'.

Astro

response.headers.set('Set-Cookie', 'sessionId=[1]; Path=/; HttpOnly')

Drag options to blanks, or click blank then click option'

Asession_token

Babc123

CuserToken

DcookieValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong cookie value string.

Forgetting to include 'HttpOnly' for security.

The cookie value must be 'abc123' to correctly set the session ID.

2fill in blank

medium

Complete the code to read the 'sessionId' cookie from the request headers.

Astro

const cookies = request.headers.get('cookie') || '';
const sessionId = cookies.split('; ').find(c => c.startsWith('[1]='))?.split('=')[1];

Drag options to blanks, or click blank then click option'

Atoken

Bauth

CuserId

DsessionId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong cookie name like 'token' or 'auth'.

Not handling missing cookies safely.

The cookie name to find is 'sessionId' to get the correct session value.

3fill in blank

hard

Fix the error in the code to correctly clear the 'sessionId' cookie.

Astro

response.headers.set('Set-Cookie', 'sessionId=[1]; Path=/; HttpOnly; Max-Age=0')

Drag options to blanks, or click blank then click option'

A""

Bdeleted

Cnull

Dexpired

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'null' or 'deleted' as cookie values which do not clear the cookie.

Omitting Max-Age=0 which is required to expire the cookie.

Setting the cookie value to an empty string '' with Max-Age=0 clears the cookie.

4fill in blank

hard

Fill both blanks to create a cookie with 'Secure' and 'SameSite=Strict' attributes.

Astro

response.headers.set('Set-Cookie', 'sessionId=abc123; Path=/; [1]; [2]')

Drag options to blanks, or click blank then click option'

ASecure

BHttpOnly

CSameSite=Strict

DMax-Age=3600

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'HttpOnly' with 'Secure'.

Using 'Max-Age' instead of 'SameSite' for cross-site control.

Adding 'Secure' ensures cookie is sent over HTTPS only, and 'SameSite=Strict' prevents cross-site sending.

5fill in blank

hard

Fill all three blanks to create a cookie with a dynamic session ID, HttpOnly, and a 1-hour expiry.

Astro

response.headers.set('Set-Cookie', 'sessionId=[1]; Path=/; [2]; [3]')

Drag options to blanks, or click blank then click option'

AuserSession.id

BHttpOnly

CMax-Age=3600

DSecure

Attempts:

3 left

💡 Hint

Common Mistakes

Using a static string instead of the dynamic session ID variable.

Forgetting 'HttpOnly' or setting wrong expiry time.

The session ID is dynamic from 'userSession.id', with 'HttpOnly' for security and 'Max-Age=3600' for 1-hour expiry.

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