Mocking a user session in tests

[filipemir]

Hey everyone. For our end-to-end tests, I have to mock user sessions (we store the user access token there, which is a JWT that is easy enough to mock). But I found that mocking the actual session string (the value stored in the session cookie) that Remix uses required digging through the source code a bit to backtrack exactly how Remix encodes the session. The code itself isn't tricky, but I worry that it will end up out of sync with Remix's implementation over time.

For these cases, I wonder whether it would be feasible and useful to expose a function that can receive a session payload, the secrets array (plus any additional configuration that might be required) and returns an encoded session string. Something like this:

/**
 * @param {*} value - A serializable value to encode in the cookie
 * @param {str[]} secrets - Secrets used to encode the cookie value
 * @returns str
 */
async function encodeSessionCookieValue(value, secrets) {}

In case it helps clarify my point, here's how I got it to work without such a function:

const cookieSignature = require("cookie-signature");

const sign = async (value, secret) => {
  return cookieSignature.sign(value, secret);
};

function btoa(b) {
  return Buffer.from(b, "binary").toString("base64");
}

function encodeData(value) {
  return btoa(JSON.stringify(value));
}

/**
 * Barebones re-implementation of the Remix cookie encoding, which
 * we use to mock a session cookie
 *
 * Src: https://github.com/remix-run/remix/blob/1fd70960e4d88740df5bf407a6ba2cd2b9549459/packages/remix-server-runtime/cookies.ts#L122
 *
 * @param {*} value - A serializable value to encode in the cookie
 * @param {str[]} secrets - Secrets used to encode the cookie value
 * @returns
 */
async function encodeSessionCookieValue(value, secrets) {
  let encoded = encodeData(value);

  if (secrets.length > 0) {
    encoded = await sign(encoded, secrets[0]);
  }

  return encoded;
}

const getMockUserSession = async () => {
  const sessionValue = {
     // Whatever payload needs to be encoded in the session
     // In our case this is a JWT but it could be any serializable value
  };

  return await encodeSessionCookieValue(sessionValue, [process.env.SESSION_SECRET]);
};

[sergiodxa]

Is there a reason why you can import the session storage you created in your app and use it to commit the session and get the cookie string?

[filipemir]

That's helpful, but it really only addresses the ReferenceError. With or without the globals, I am still unable to commit and retrieve the session data. As I indicate above, it appears to fail silently somewhere along the way:

const getMockUserSession = async () => {
  const session = await getSession();

  session.set("user", "[email protected]"); 

  const cookie = await commitSession(session);

  console.log(cookie); // This outputs an encoded cookie as expected
  console.log((await getSession()).data); // But this outputs an empty object, which indicates to me data isn't being committed to the session

  return cookie
}

[sergiodxa]

When you call getSession you need to pass the Cookie header (the value returned by commitSession or destroySession), without that it will always return an empty session object.

[filipemir]

🤦 Thanks, @sergiodxa. That was it.

For anyone else who stumbles into this, below is how I got it to work for us. Note that a lot of the work here is actually just encode a JWT access token, which is needed for how our app functions. Other apps may not need that step and can encode a simpler session. The outline should still be the same.

// cypress/helpers/user.js
const jwt = require("jsonwebtoken");
const { installGlobals } = require("@remix-run/node");
const { createCookieSessionStorage } = require("remix");
const { parse } = require("cookie");

installGlobals();

const { getSession, commitSession } = createCookieSessionStorage({
  // Config here must match what you use when creating
  // your app's session storage:
  cookie: {
    name: "_session",
    sameSite: "lax",
    path: "/",
    httpOnly: true,
    secrets: ["your-session-secret"],
    secure: false,
  },
});

const MOCK_USER = {
  name: "Biggie Smalls",
  email: "[email protected]",
  email_verified: true,
  picture: "https://www.biography.com/pics/biggie.jpg",
};

// Dummy private RSA key, generated just for the tests.
// To generate a new one (and a companion public key,
// should you need it): https://cryptotools.net/rsagen
const PRIVATE_KEY = `-----BEGIN RSA PRIVATE KEY-----
MIICWwIBAAKBgFRI9+diHxfD9VN9XRC0gOKO7oUXqyrGk4Ck857VXVVvWhaf+3m+
cYsUVTrY5vfSRKmPRJEow3FMZvLZCzbPSARz4VVcH6+Hfe0tQpFG83Vjy6kwpV4A
Zbx78KZUoVdafo4UNKLDlztdbiWbgZ4JDB7dzfvssXPHSZcPcaYFVRNnAgMBAAEC
gYAeSxem91JblVfgiSdg8K9+PocmGOqxdivfyemyBdgE8/+6MAgPqs5egZFclEb3
fYCmPNMVJUSRvTcnQ7FPItMsNBS9xjCbnpASvCi85peOxUSbiSWKOSjNxqODN5DR
/BKZkbGgN1cTLQiyt7uz0SvdKKIOJRJe+5SeSA298i978QJBAKbE0DLvtBM5bNHa
CkM/TfGzZNeBRoZsdgXH8k3lq/Jq3eZFTHoFCZ/FWx3F5vX8gk3IrJXZfVLJcssZ
C8vVEb8CQQCBYe0KKl2PM8hr4+Q3Zg/wkE7knIz0Mm6EUS2K5o9u2jBExE+XzA0G
5sDQU63OJjmD9GmNSZ8ecJR2eEtHaBhZAkEAhj+HbomiB5vBqwkAG/RY9Yo5UnZh
5JJpS+wSdXy+t24p5VXB47QsdC52U/hdHYZBCwbRT+v9w+gg/bfS1CpYlwJAfJPM
yI/4XA1xOqlIsircyDY7MJaohe0VSuRbJLZRf1wpQ91+Adxg4rdHCpC39poJoUuy
Ym9z/bxKxzOW0F+jqQJASn0ScE7XipaSBTNQeDZrLDgKJIB9U5sauI3MQ5sJCzwC
0osiUy94cnPS/HFHYXl4dnIrO+kgYqCI/uYg4eyz+A==
-----END RSA PRIVATE KEY-----`;

/**
 * Encodes user information in a mock JWT, so that we can mock a session in the tests
 */
const getMockAccessToken = ({ permissions, issuedAt, expiresIn }) => {
  const payload = {
    sub: "auth0|123",
    permissions,
    // Insert any other claims your token needs here
  };

  if (issuedAt) payload.iat = issuedAt;

  return jwt.sign(payload, PRIVATE_KEY, {
    algorithm: "RS256",
    audience: "/some_audience",
    expiresIn,
    issuer: `https://{{your-apps-domain}}/`,
  });
};

/**
 * Returns the value to store in the session cookie when we want to emulate a user
 * session within our tests.
 */
const getMockUserSession = async ({
  user = MOCK_USER,
  permissions = [],
  issuedAt,
  expiresIn = "24h",
} = {}) => {
  const session = await getSession();

  // The values you'll set in the session are specific to how you uses sessions.
  // In our case, we are using remix-auth-auth0 and storing the user's displayName,
  // email, and accessToken. So our session looks like this:
  session.set("strategy", "auth0");
  session.set("user", {
    displayName: user.name,
    email: user.email,
    accessToken: getMockAccessToken({ permissions, issuedAt, expiresIn }),
  });

  const cookie = await commitSession(session);

  return parse(cookie)._session;
};

module.exports = {
  MOCK_USER,
  getMockUserSession,
};

We then defined a task that allows us to retrieve a session string with the needed permissions:

// cypress/plugins/index.js
/// <reference types="cypress" />
const { getMockUserSession } = require("../helpers/user.js");

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
  on("task", {
    getSessionValue({ user, permissions, issuedAt } = {}) {
      return getMockUserSession({ user, permissions, issuedAt });
    },
  });
};

And then used that task in a cypress command that sets the session cookie:

// cypress/support/commands.js
Cypress.Commands.add("initSession", ({ permissions, issuedAt } = {}) => {
  Cypress.log({
    name: "initSession",
  });

  cy.visit("/login");

  cy.task("getSessionValue", { permissions, issuedAt }).then((sessionValue) => {
    cy.setCookie("_session", sessionValue, {
      httpOnly: true,
      path: "/",
      sameSite: "Lax",
      secure: false,
    });
  });
});

Usage in a test:

// cypress/integration/test.js
describe("Auth", () => {
  it("User with read-write permissions can visit pages", () => {
    cy.initSession({
      permissions: ["read", "write"],
    });
    
    cy.visit("/restricted_page");

   // your assertions here
 });
});

[MichFont]

Adding link to the discord to tie in vitest example: https://discord.com/channels/770287896669978684/1007653067975573516

[Abhishekonramp]

Adding link to the discord to tie in vitest example: https://discord.com/channels/770287896669978684/1007653067975573516

channel not opening by any chance you still got it?