Vendure and Cookies

[rohanrajpal]

Hey, I had an idea to make a thread for anyone who is having trouble with setting up cookies with Vendure.

@michaelbromley shared a pretty good GitHub gist which helps in setting up Nginx the right way to allow cookies
[1]: https://gist.github.com/nikmartin/5902176

I also found the following repo quite helpful in debugging cookie issues
https://github.com/benawad/how-to-debug-cookies#proxy

I also had a few questions

• if we are following [1], is the following cookie configuration fine?

cookieOptions: {
      secure: true,
      domain: ".example.com",
    },

• I tried to add app.set("trust proxy", 1); in the BeforeVendureBootStrap plugin, but came across the following issues:

// plugin.ts
import { INestApplication } from '@nestjs/common';
import { VendurePlugin } from '@vendure/core';

@VendurePlugin({})
export class ProxyPlugin {
  static beforeVendureBootstrap(app: INestApplication): void | Promise<void> {
    app.set("trust proxy", 1);
    //^^ Property 'set' does not exist on type 'INestApplication'.ts(2339)
  }
}

So what is the correct way to app.set("trust proxy", 1);?

[michaelbromley]

Regarding the app.set() issue, you can cast the app object to be NestExpressApplication (which is what it actually is):

(app as NestExpressApplication).set(...);

Reference: nestjs/nest#2293 (comment)

[rohanrajpal]

Thanks, Michael, this worked. I had another question, what do I have to do in Vendure to achieve the following configuration?

// 1. In your main App, setup up sessions:

app.enable('trust proxy'); //done via plugin
app.use(express.bodyParser()); // assuming vendure handles this
app.use(express.cookieParser()); // assuming vendure handles this
app.use(express.session({
   secret: 'Super Secret Password', // handled with the vendure config
   proxy: true, // how do I enable this?
   key: 'session.sid', // is this necessary to set?
   cookie: {secure: true}, // I guess this is same as the `secure` field in `cookieOptions`?
   store: new sessionStore()  // I guess we can ignore this as well?
}));

[rohanrajpal]

I think to enable the proxy I have to use a plugin as well. but the issue is where should I get the express variable from?

[michaelbromley]

Vendure internally uses the cookie-session middleware, you can see the source here:

vendure/packages/core/src/bootstrap.ts

Lines 58 to 67 in dc7b303

	if (config.authOptions.tokenMethod === 'cookie') {
	const { sessionSecret, cookieOptions } = config.authOptions;
	app.use(
	cookieSession({
	...cookieOptions,
	// TODO: Remove once the deprecated sessionSecret field is removed
	...(sessionSecret ? { secret: sessionSecret } : {}),
	}),
	);
	}

I'm not 100% sure about the relationship between cookieSession and cookieParser and session, i.e. whether "cookieSession" is a replacement for the other two. Sorry I can't help more on this, I have yet to dive deep into these issues myself.

Also bodyParser is applied automatically by Nestjs.

[rohanrajpal]

Oh I understand now. I just guess setting proxy:true is left in the config part, do you know anyone who could help me with that?

[rohanrajpal]

Forgot to reply, but I resolved the cookie issue! For anyone facing any issues, the above answer solves it.

[knoid]

Is there an updated answer to this? beforeVendureBootstrap doesn't seem to be working anymore.

[michaelbromley]

Hi @knoid, that hook was removed because it turned out you can use the built-in NestJS module lifecycle to do the same things.

For this case you should be able to inject the NestJS HttpAdapterHost into the onApplicationBootstrap hook of your plugin module.