Creating and destroying sessions in Remix - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you call destroySession in Remix?

Consider a Remix loader that calls destroySession on the user's session cookie. What is the expected behavior in the browser after this response?

Remix

import { destroySession, getSession } from '~/sessions';

export async function loader({ request }) {
  const session = await getSession(request.headers.get('Cookie'));
  return new Response(null, {
    headers: {
      'Set-Cookie': await destroySession(session)
    }
  });
}

A The session cookie is removed from the browser, effectively logging the user out.

B The server throws an error because sessions cannot be destroyed in loaders.

C A new session cookie is created with default values.

D The session cookie remains unchanged; the user stays logged in.

💡 Hint

Think about what destroying a session means for the cookie stored in the browser.

Calling destroySession returns a response that clears the session cookie in the browser, effectively logging the user out.

❓ state_output

intermediate

What is the session state after calling commitSession with no changes?

If you retrieve a session with getSession and then immediately call commitSession without modifying it, what will the response cookie contain?

Remix

import { getSession, commitSession } from '~/sessions';

export async function loader({ request }) {
  const session = await getSession(request.headers.get('Cookie'));
  return new Response('OK', {
    headers: {
      'Set-Cookie': await commitSession(session)
    }
  });
}

A The response will set the same session cookie as before, unchanged.

B The response will clear the session cookie, logging the user out.

C The response will set a new empty session cookie, resetting all data.

D The response will cause a runtime error because commitSession requires changes.

💡 Hint

Think about whether commitSession changes the cookie if the session data is unchanged.

If the session data is unchanged, commitSession returns the same cookie value, so the browser keeps the session as is.

📝 Syntax

advanced

Which option correctly destroys a session in an action function?

You want to destroy the user's session after a form submission in a Remix action. Which code snippet correctly does this?

Remix

import { destroySession, getSession } from '~/sessions';

export async function action({ request }) {
  const session = await getSession(request.headers.get('Cookie'));
  // Destroy session here
  return new Response('Logged out', {
    headers: {
      'Set-Cookie': await destroySession(session)
    }
  });
}

A 'Set-Cookie': await destroySession(request.headers.get('Cookie'))

B 'Set-Cookie': await commitSession(session, { maxAge: 0 })

C 'Set-Cookie': await destroySession(session)

D 'Set-Cookie': await commitSession(request.headers.get('Cookie'))

💡 Hint

destroySession expects a session object, not a cookie string.

destroySession requires the session object, not the raw cookie string. commitSession with maxAge 0 does not guarantee cookie removal.

🔧 Debug

advanced

Why does this session destroy code not clear the cookie?

This Remix loader tries to destroy the session but the cookie remains in the browser. What is the bug?

Remix

import { destroySession, getSession } from '~/sessions';

export async function loader({ request }) {
  const cookie = request.headers.get('Cookie');
  const session = await getSession(cookie);
  const setCookie = await destroySession(session);
  return new Response('Done', {
    headers: {
      'Set-Cookie': setCookie
    }
  });
}

A The response body must be JSON for destroySession to work.

B destroySession is called but its result is not returned or set in response headers.

C getSession is called with the wrong argument type causing session to be empty.

D destroySession cannot be used in loaders, only in actions.

💡 Hint

Check if the cookie header is updated in the response.

destroySession returns a cookie header string that must be set in the response headers to clear the cookie.

🧠 Conceptual

expert

What is the main difference between commitSession and destroySession in Remix?

Choose the best description of how commitSession and destroySession differ in managing user sessions.

A <code>commitSession</code> encrypts the session data; <code>destroySession</code> decrypts it.

B <code>commitSession</code> deletes the session cookie; <code>destroySession</code> updates the session cookie with new data.

C <code>commitSession</code> only works in loaders; <code>destroySession</code> only works in actions.

D <code>commitSession</code> saves changes to the session cookie; <code>destroySession</code> clears the session cookie to log out the user.

💡 Hint

Think about what happens to the cookie in each case.

commitSession writes the current session data to the cookie, while destroySession removes the cookie to end the session.

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