How to create session storage remix

RemixHow-ToBeginner · 4 min read

How to Create Session Storage in Remix: Simple Guide

In Remix, create session storage by using createCookieSessionStorage from @remix-run/node. Define a session storage with cookie options, then use it to get, set, and commit session data in your loaders or actions.

📐

Syntax

Use createCookieSessionStorage to create session storage with cookie settings. Then use getSession, commitSession, and destroySession to manage session data.

createCookieSessionStorage({ cookie }): Creates session storage with cookie options.
getSession(request.headers.get('Cookie')): Reads session from request cookies.
commitSession(session): Saves session changes to a cookie header.
destroySession(session): Clears the session cookie.

typescript

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

const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: 'session',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: ['your-secret'],
    secure: process.env.NODE_ENV === 'production',
  },
});

// Usage in loaders or actions
const session = await sessionStorage.getSession(request.headers.get('Cookie'));
// Modify session
session.set('key', 'value');
const cookieHeader = await sessionStorage.commitSession(session);

💻

Example

This example shows a Remix action that sets a session value and returns a response with the session cookie set. It demonstrates creating session storage, reading the session, updating it, and committing the changes.

typescript

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

const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: 'mySession',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: ['super-secret-key'],
    secure: process.env.NODE_ENV === 'production',
  },
});

export const action = async ({ request }) => {
  const session = await sessionStorage.getSession(request.headers.get('Cookie'));
  session.set('user', 'Alice');
  return redirect('/', {
    headers: {
      'Set-Cookie': await sessionStorage.commitSession(session),
    },
  });
};

Output

HTTP response with Set-Cookie header setting 'mySession' cookie containing user=Alice

⚠️

Common Pitfalls

Not setting cookie secrets: Always provide a secrets array to sign cookies securely.

Forgetting to commit session: Changes to session data must be saved with commitSession and sent in response headers.

Using insecure cookies in production: Set secure: true in production to ensure cookies are sent only over HTTPS.

typescript

/* Wrong: No secrets and no commitSession */
const sessionStorageWrong = createCookieSessionStorage({
  cookie: { name: 'sess' }
});

// This will not sign cookies or save changes properly

/* Right: Provide secrets and commit session */
const sessionStorageRight = createCookieSessionStorage({
  cookie: {
    name: 'sess',
    secrets: ['secret'],
    secure: true,
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
  },
});

📊

Quick Reference

createCookieSessionStorage: Creates session storage with cookie options.
getSession: Reads session from request cookies.
commitSession: Saves session changes to response cookies.
destroySession: Clears session cookie.
Cookie options: name, secrets, httpOnly, secure, path, sameSite.

✅

Key Takeaways

Use createCookieSessionStorage with proper cookie options to create session storage in Remix.

Always provide secrets to sign cookies securely and protect session data.

Use getSession to read and commitSession to save session changes in loaders or actions.

Set secure: true for cookies in production to ensure HTTPS-only transmission.

Remember to send the Set-Cookie header with commitSession in your response.