Using iron-session with Next.js 12 middlewares

[LuckeeDev]

Update from maintainer: If you want to use iron-session in middlewares then follow this solution: https://github.com/vvo/iron-session/issues/419#issuecomment-983020558

---

Hey there! First of all, thanks for the amazing work you do on this library. I'm in the process of converting a Nextjs app to Next 12 and I would like to use middlewares, one of the new features. Are middlewares already supported by iron-session? Is there any workaround to make them work in the meantime?

[vvo]

Hey @LuckeeDev thanks for the kinds words. I must say, I have no idea if middlewares are already supported by iron-session.

I am also curious: can you provide some context on your use-case for iron-session in middlewares?

I believe there might be an issue around the way the token is being generated, somewhere in the code/dependencies of iron-session there's some usage of "eval" and eval is not available in middlewares on Vercel I believe.

[LuckeeDev]

Can you provide some context on your use-case for iron-session in middlewares?

I was thinking of using it for authentication. With Vercel's edge functions, this would be an optimal solution for securing SSG pages, because I could statically generate some articles, check session data with a _middleware.ts file and let only authenticated users access them.

I believe there might be an issue around the way the token is being generated, somewhere in the code/dependencies of iron-session there's some usage of "eval" and eval is not available in middlewares on Vercel I believe.

Yes, I saw they have a pretty strict runtime. I will experiment a bit and let you know if I find something interesting!

[whiterice-bryce]

I had the same idea of using it to blog authenticated pages but didn't really manage to get anywhere with it. Did you have any progress @LuckeeDev ?

[LuckeeDev]

Unfortunately, I have not been able to find a solution with iron-session, but I tried some workarounds with jose and @tsndr/cloudflare-worker-jwt. These libraries are made to work in a strict-runtime environment like those offered by Vercel middlewares and Cloudflare workers, so I was able to decrypt and verify the session without iron-session inside the middlewares. I can share some code if I manage to find it.

[LuckeeDev]

The next step might be to add a function to iron-session that is compatible with middlewares, what do you think @vvo?

I would be available to help on this.

[vvo]

Hey @OArnarsson you might be interested by this discussion also.

@LuckeeDev One thing I do not understand is WHY is there any use of eval in the code of iron-session. Logs from @OArnarsson shows:

    // wait  - compiling /api/user (server only)...
    // warn  - ./node_modules/events/events.js
    // `eval` not allowed in Middleware pages/api/_middleware
    // ./node_modules/readable-stream/lib/_stream_writable.js

readable-stream may be imported when trying to access crypto features that were transpiled to the browser. But I couldn't really pinpoint why this module is being used in iron-session.

@LuckeeDev Can you explain a bit more what would the changes include to handle decrypting iron-session tokens in middleware? Thanks

[vvo]

I've added a comment here: https://github.com/vercel/next.js/issues/30674#issuecomment-981177003

[LuckeeDev]

Can you explain a bit more what would the changes include to handle decrypting iron-session tokens in middleware?

Yes sure @vvo. I tried with @tsndr/cloudflare-worker-jwt and it's quite simple. This example shows how to handle jwt verification and decoding. We could add a method called withIronSessionMiddleware that gets the cookie from the request and verifies the session like shown below.

import jwt from '@tsndr/cloudflare-worker-jwt';

...
const cookie = req.cookies[COOKIE_NAME];

const isValid = await jwt.verify(cookie, COOKIE_SECRET);

if (!isValid) {
  throw('Session is invalid');
}

const payload = jwt.decode(cookie);
...

The payload could then be injected into the req.session object for easy use inside the middleware.

[vvo]

@LuckeeDev Thanks, I am still puzzled a bit because iron-session tokens are not JWT tokens so I am not sure how jwt.verify would work in this case?

If that's not feasible then our only way would be to track down which module we use is using eval and replace it with a better solution.

[vvo]

Hey there, I have "good news". I found the exact line that is failing right now. First, you have to use Next.js@canary which has the latest developments in term of middleware error reporting (Next.js 12.0.4 works but errors are not so good).

Once you do that you'll see an error which is "bad hmac value" this comes down to https://github.com/hapijs/iron/blob/d26fa2e06483a90ee81597815394155529cda798/lib/index.js#L311 which references Crypto.fixedTimeComparison which does not exists in Next.js middlewares:

I think there might be a chance this gets resolved in the future inside Next.js directly, we will see. I don't think there's a need to dig into more advanced solutions as it all boils down to having this small methods in Next.js middlewares.

Thanks all!!

Ref: https://twitter.com/vvoyer/status/1465788190086864899

[vvo]

Update: you can solve this right now without any changes in Next.js. You only need Next.js 12.0.4 (current version).

Add this:

// lib/session.ts or in _middleware.ts
import Crypto from "crypto";

Crypto.timingSafeEqual = function timingSafeEqual(a, b) {
  if (!Buffer.isBuffer(a)) {
    throw new TypeError("First argument must be a buffer");
  }
  if (!Buffer.isBuffer(b)) {
    throw new TypeError("Second argument must be a buffer");
  }
  if (a.length !== b.length) {
    throw new TypeError("Input buffers must have the same length");
  }
  var len = a.length;
  var out = 0;
  var i = -1;
  while (++i < len) {
    out |= a[i] ^ b[i];
  }
  return out === 0;
};

// rest of the file goes here

This will add the necessary method. At some point it will be inside Next.js.

[LuckeeDev]

@vvo wow! This is very good news. Let's hope someone at Next will reach out to you. Feel free to keep us updated if anything changes!

[LuckeeDev]

Update: you can solve this right now without any changes in Next.js. You only need Next.js 12.0.4 (current version).

Thank you!

[vvo]

After reading more content, I am unsure timingSafeEqual will be added to Next.js soon because it's not part of the Webcrypto spec (https://github.com/w3c/webcrypto/issues/270).

Let's wait a little bit and if there's no easy path then we'll just do something very dirt like inlining timingSafeEqual directly inside the module if it doesn't exists.

[timonkbd]

@LuckeeDev @vvo Thanks for this issue and the workaround. With this I am already able to lookup session data inside of middlewares. But at some point it would still be great to have something like withIronSessionMiddleware so that we can also modify the session data with req.session.save(). This would be especially helpful for refreshing OAuth tokens before visiting a page and thus avoiding expiration errors.

[OArnarsson]

@vvo thanks for the workaround using Crypto.timingSafeEqual, works like a charm. One caveat I've noticed is that when using _middleware.ts you don't seem to have any way of passing down props to the pages, like you can in e.g. getServerSideProps which is a bit of a bummer (please correct me if I'm wrong). That however is way out of scope here and only up to NextJS to take further. Thanks again for the great library and support 💪

[orteliusorthon]

Hi there,

The workaround described in this issue seems to break for me in nextjs version 12.0.5+. It appears that starting from version 12.0.5 the crypto import in "node_modules/@hapi/cryptiles/lib/index.js" no longer resolves to the same object as the equivalent import in my _middleware.js file (or anywhere else in the nextjs app for that matter). The resulting objects even appear to have differing functions and properties on them.

Perhaps someone more qualified could help shed some light on the issue?

[OArnarsson]

@orteliusorthon I've updated my reproduction repo with NextJS 12.0.7 and it always returns {} from unsealData, regardless of Crypto.timingSafeEqual definitions in the middleware.

@vvo do you have any idea what might be a solution going forward?

Link to reproduction repo: https://github.com/OArnarsson/with-iron-session-middleware

[vvo]

@OArnarsson I have no idea yet how to solve this, sorry all. Hope you can find one and we can implement it.

I wonder why it has changed though, maybe something in the release notes of next.js could help. Maybe there's a way in the build of iron-session to force Crypto.timingSafeEqual to be defined. You could try to update your node_modules/iron-session and put the workaround inside its dist files directly. If this solves it then we have a way forward.

[falleco]

I was able to use the unsealData function (based on @OArnarsson example repo) and correctly decoded the cookie content in a nextjs middleware applying @vvo suggestion directly to the @hapi/iron with https://www.npmjs.com/package/patch-package.

I know it is not pretty, but it is an workaround to keep it going while we understand better alteratives.

Here is my patch file:

diff --git a/node_modules/@hapi/iron/lib/index.js b/node_modules/@hapi/iron/lib/index.js
index c17d35a..e45980d 100755
--- a/node_modules/@hapi/iron/lib/index.js
+++ b/node_modules/@hapi/iron/lib/index.js
@@ -8,6 +8,25 @@ const Bourne = require('@hapi/bourne');
 const Cryptiles = require('@hapi/cryptiles');
 const Hoek = require('@hapi/hoek');

+Crypto.timingSafeEqual = function timingSafeEqual(a, b) {
+    if (!Buffer.isBuffer(a)) {
+      throw new TypeError("First argument must be a buffer");
+    }
+    if (!Buffer.isBuffer(b)) {
+      throw new TypeError("Second argument must be a buffer");
+    }
+    if (a.length !== b.length) {
+      throw new TypeError("Input buffers must have the same length");
+    }
+    var len = a.length;
+    var out = 0;
+    var i = -1;
+    while (++i < len) {
+      out |= a[i] ^ b[i];
+    }
+    return out === 0;
+};
+

 const internals = {}; 

[vvo]

I think the next step for anyone really willing to solve this would be to check within the @hapi/iron repository if they would take such a PR

[timonkbd]

With the latest version of Next.js (v12.0.10) there is a new error coming up when using unsealData within a _middleware.ts file:

error - unhandledRejection: TypeError: process.nextTick is not a function

[purwadarozatun]

I had same issue with @timonweber , but i find out the problem is in hapi js function so i make file form https://github.com/hapijs/iron/blob/master/lib/index.js and update some function

this my update

internals.pbkdf2 = function (...args) {

    return new Promise((resolve, reject) => {

        const next = (err, result) => {

            if (err) {
                return reject(Boom.boomify(err));
            }

            resolve(result);
        };

        args.push(next);

        resolve( Crypto.pbkdf2Sync(...args));
    });
};

and change

if (!Cryptiles.fixedTimeComparison(mac.digest, hmac)) {
to  
if (!mac.digest == hmac) {

its not best practice but i cant update in hapijs , mybe @vvo can add those fix , this is full off my hapi js

'use strict';

const Crypto = require('crypto');

const B64 = require('@hapi/b64');
const Boom = require('@hapi/boom');
const Bourne = require('@hapi/bourne');
const Cryptiles = require('@hapi/cryptiles');
const Hoek = require('@hapi/hoek');

const internals = {};

exports.defaults = {
    encryption: {
        saltBits: 256,
        algorithm: 'aes-256-cbc',
        iterations: 1,
        minPasswordlength: 32
    },

    integrity: {
        saltBits: 256,
        algorithm: 'sha256',
        iterations: 1,
        minPasswordlength: 32
    },

    ttl: 0,                                             // Milliseconds, 0 means forever
    timestampSkewSec: 60,                               // Seconds of permitted clock skew for incoming expirations
    localtimeOffsetMsec: 0                              // Local clock time offset express in a number of milliseconds (positive or negative)
};

// Algorithm configuration

exports.algorithms = {
    'aes-128-ctr': { keyBits: 128, ivBits: 128 },
    'aes-256-cbc': { keyBits: 256, ivBits: 128 },
    'sha256': { keyBits: 256 }
};

// MAC normalization format version

exports.macFormatVersion = '2';                         // Prevent comparison of mac values generated with different normalized string formats

exports.macPrefix = 'Fe26.' + exports.macFormatVersion;

// Generate a unique encryption key

/*
    const options =  {
        saltBits: 256,                                  // Ignored if salt is set
        salt: '4d8nr9q384nr9q384nr93q8nruq9348run',
        algorithm: 'aes-128-ctr',
        iterations: 10000,
        iv: 'sdfsdfsdfsdfscdrgercgesrcgsercg',          // Optional
        minPasswordlength: 32
    };
*/

exports.generateKey = async function (password, options) {

    if (!password) {
        throw new Boom.Boom('Empty password');
    }

    if (!options ||
        typeof options !== 'object') {

        throw new Boom.Boom('Bad options');
    }

    const algorithm = exports.algorithms[options.algorithm];
    if (!algorithm) {
        throw new Boom.Boom('Unknown algorithm: ' + options.algorithm);
    }

    const result = {};

    if (Buffer.isBuffer(password)) {
        if (password.length < algorithm.keyBits / 8) {
            throw new Boom.Boom('Key buffer (password) too small');
        }

        result.key = password;
        result.salt = '';
    }
    else {
        if (password.length < options.minPasswordlength) {
            throw new Boom.Boom('Password string too short (min ' + options.minPasswordlength + ' characters required)');
        }

        let salt = options.salt;
        if (!salt) {
            if (!options.saltBits) {
                throw new Boom.Boom('Missing salt and saltBits options');
            }

            const randomSalt = Cryptiles.randomBits(options.saltBits);
            salt = randomSalt.toString('hex');
        }

        const derivedKey = await internals.pbkdf2(password, salt, options.iterations, algorithm.keyBits / 8, 'sha1');

        result.key = derivedKey;
        result.salt = salt;
    }
    if (options.iv) {
        result.iv = options.iv;
    }
    else if (algorithm.ivBits) {
        result.iv = Cryptiles.randomBits(algorithm.ivBits);
    }

    return result;
};

// Encrypt data
// options: see exports.generateKey()

exports.encrypt = async function (password, options, data) {

    const key = await exports.generateKey(password, options);
    const cipher = Crypto.createCipheriv(options.algorithm, key.key, key.iv);
    const encrypted = Buffer.concat([cipher.update(data, 'utf8'), cipher.final()]);

    return { encrypted, key };
};

// Decrypt data
// options: see exports.generateKey()

exports.decrypt = async function (password, options, data) {

    const key = await exports.generateKey(password, options);
    const decipher = Crypto.createDecipheriv(options.algorithm, key.key, key.iv);
    let dec = decipher.update(data, null, 'utf8');
    dec = dec + decipher.final('utf8');

    return dec;
};

// HMAC using a password
// options: see exports.generateKey()

exports.hmacWithPassword = async function (password, options, data) {
    const key = await exports.generateKey(password, options);
    const hmac = Crypto.createHmac(options.algorithm, key.key).update(data);
    const digest = hmac.digest('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/\=/g, '');

    return {
        digest,
        salt: key.salt
    };
};

// Normalizes a password parameter into a { id, encryption, integrity } object
// password: string, buffer or object with { id, secret } or { id, encryption, integrity }

internals.normalizePassword = function (password) {

    if (password &&
        typeof password === 'object' &&
        !Buffer.isBuffer(password)) {

        return {
            id: password.id,
            encryption: password.secret || password.encryption,
            integrity: password.secret || password.integrity
        };
    }

    return {
        encryption: password,
        integrity: password
    };
};

// Encrypt and HMAC an object
// password: string, buffer or object with { id, secret } or { id, encryption, integrity }
// options: see exports.defaults

exports.seal = async function (object, password, options) {

    options = Object.assign({}, options);       // Shallow cloned to prevent changes during async operations

    const now = Date.now() + (options.localtimeOffsetMsec || 0);                 // Measure now before any other processing

    // Serialize object

    const objectString = internals.stringify(object);

    // Obtain password

    let passwordId = '';
    password = internals.normalizePassword(password);
    if (password.id) {
        if (!/^\w+$/.test(password.id)) {
            throw new Boom.Boom('Invalid password id');
        }

        passwordId = password.id;
    }

    // Encrypt object string

    const { encrypted, key } = await exports.encrypt(password.encryption, options.encryption, objectString);

    // Base64url the encrypted value

    const encryptedB64 = B64.base64urlEncode(encrypted);
    const iv = B64.base64urlEncode(key.iv);
    const expiration = (options.ttl ? now + options.ttl : '');
    const macBaseString = exports.macPrefix + '*' + passwordId + '*' + key.salt + '*' + iv + '*' + encryptedB64 + '*' + expiration;

    // Mac the combined values

    const mac = await exports.hmacWithPassword(password.integrity, options.integrity, macBaseString);

    // Put it all together

    // prefix*[password-id]*encryption-salt*encryption-iv*encrypted*[expiration]*hmac-salt*hmac
    // Allowed URI query name/value characters: *-. \d \w

    const sealed = macBaseString + '*' + mac.salt + '*' + mac.digest;
    return sealed;
};

// Decrypt and validate sealed string
// password: string, buffer or object with { id: secret } or { id: { encryption, integrity } }
// options: see exports.defaults

exports.unseal = async function (sealed, password, options) {

    options = Object.assign({}, options);                                       // Shallow cloned to prevent changes during async operations

    const now = Date.now() + (options.localtimeOffsetMsec || 0);                // Measure now before any other processing

    // Break string into components

    const parts = sealed.split('*');
    if (parts.length !== 8) {
        throw new Boom.Boom('Incorrect number of sealed components');
    }

    const macPrefix = parts[0];
    const passwordId = parts[1];
    const encryptionSalt = parts[2];
    const encryptionIv = parts[3];
    const encryptedB64 = parts[4];
    const expiration = parts[5];
    const hmacSalt = parts[6];
    const hmac = parts[7];
    const macBaseString = macPrefix + '*' + passwordId + '*' + encryptionSalt + '*' + encryptionIv + '*' + encryptedB64 + '*' + expiration;

    // Check prefix

    if (macPrefix !== exports.macPrefix) {
        throw new Boom.Boom('Wrong mac prefix');
    }

    // Check expiration

    if (expiration) {
        if (!expiration.match(/^\d+$/)) {
            throw new Boom.Boom('Invalid expiration');
        }

        const exp = parseInt(expiration, 10);
        if (exp <= (now - (options.timestampSkewSec * 1000))) {
            throw new Boom.Boom('Expired seal');
        }
    }

    // Obtain password

    if (!password) {
        throw new Boom.Boom('Empty password');
    }

    if (typeof password === 'object' &&
        !Buffer.isBuffer(password)) {

        password = password[passwordId || 'default'];
        if (!password) {
            throw new Boom.Boom('Cannot find password: ' + passwordId);
        }
    }

    password = internals.normalizePassword(password);

    // Check hmac

    const macOptions = Hoek.clone(options.integrity);
    macOptions.salt = hmacSalt;
    const mac = await exports.hmacWithPassword(password.integrity, macOptions, macBaseString);
    if (!mac.digest == hmac) {
        throw new Boom.Boom('Bad hmac value');
    }

    // Decrypt

    try {
        var encrypted = B64.base64urlDecode(encryptedB64, 'buffer');
    }
    catch (err) {
        throw Boom.boomify(err);
    }
    const decryptOptions = Hoek.clone(options.encryption);
    decryptOptions.salt = encryptionSalt;

    try {
        decryptOptions.iv = B64.base64urlDecode(encryptionIv, 'buffer');
    }
    catch (err) {
        throw Boom.boomify(err);
    }

    const decrypted = await exports.decrypt(password.encryption, decryptOptions, encrypted);

    // Parse JSON

    try {
        return Bourne.parse(decrypted);
    }
    catch (err) {
        throw new Boom.Boom('Failed parsing sealed object JSON: ' + err.message);
    }
};

internals.stringify = function (object) {

    try {
        return JSON.stringify(object);
    }
    catch (err) {
        throw new Boom.Boom('Failed to stringify object: ' + err.message);
    }
};

internals.pbkdf2 = function (...args) {

    return new Promise((resolve, reject) => {

        const next = (err, result) => {

            if (err) {
                return reject(Boom.boomify(err));
            }

            resolve(result);
        };

        args.push(next);

        resolve( Crypto.pbkdf2Sync(...args));
    });
};

[jere-co]

error - unhandledRejection: TypeError: process.nextTick is not a function

Any proper solution for this?

[donavon]

This one-liner works for me locally (I haven't tried it on Vercel or anything). No looping and no variable declarations. I'm using Next.js 12.1.0.

import Crypto from "crypto";

Crypto.timingSafeEqual = (buf1, buf2) => Buffer.compare(buf1, buf2) === 0;

Buffer.compare will throw if either argument is not a Buffer so no need to check like in @vvo's example.

> Buffer.compare(1, 2)
Uncaught:
TypeError [ERR_INVALID_ARG_TYPE]: The "buf1" argument must be an instance of Buffer or Uint8Array. Received type number (1)
    at __node_internal_captureLargerStackTrace (node:internal/errors:464:5)
    at new NodeError (node:internal/errors:371:5)
    at Function.compare (node:buffer:515:11) {
  code: 'ERR_INVALID_ARG_TYPE'
}

[dylancl]

Hi, is there any news on this? Or will this not be fixed until @hapi/iron gets updated?

[vvo]

No news, anyone can fix this, it requires:

• fixing @hapi/iron
• updating the library here

I have unfortunately no bandwidth nor incentive to fix this (I am not using middlewares myself)

[JamieGrimwood]

Can this be sorted? It is annoying to have to have authentication on each page rather than just the middleware check if the user is authenticated on all routes that is in the folder. Or to check if someone is an Admin or not.

[brc-dd]

On newer Next.js versions there are other errors like module stream/buffer/crypto/... not available on edge runtimes (ex: #508). It is hard to fix this as it needs making @hapi/iron and its dependencies browser compatible. I suggest rewriting the @hapi/iron module. I have successfully written it to use the SubtleCrypto API, but it needs some work like using @peculiar/webcrypto on Node.js environments and adding TS declarations.

[vvo]

@brc-dd Fun thing, I am in the process of forking hapi/iron tu use @peculiar/webcrypto but I must say this is some hard subject for me. If you're skilled in webcrypto I'd be happy to update iron-session using your fork.

I'll publish something if you want to have a look.

[vvo]

@brc-dd you can see my progress here: https://github.com/vvo/iron-webcrypto

I must say, I tried to replace and mimick the previous behavior but couldn't manage to create a version that seal() and unseal(). Maybe you'll find a way. Thanks.

[brc-dd]

@vvo Here is my implementation: https://github.com/brc-dd/next-middleware-iron/blob/main/pages/_middleware.js There are things to refine and the API needs proper testing and vulnerability analysis, but it appears to be working fine in my initial tests.

[brc-dd]

@vvo Check out: brc-dd/iron-webcrypto. I have copied tests from the original @hapi/iron with minor edits, and they all seem to pass. I have also tested it locally (the package is not published yet) with iron-session, and your tests also appear to be passing.

Also, I need someone to once review the code. It will be helpful to identify any issues before publishing.

[khangahs]

Hey, I must say I really need a full guide / example to use with NextJS middleware.js. For example, how to fetch api with useSWR in the middleware since I'm using Static Generation (SG). What is the best way to optimize the code with the middleware? Thank you.