Oidc-client-js: window is undefined

[raymondsze]

This error occurs even I didn't use the module, but import it.
I am using next.js with oidc-client-js.
The problem is next.js shares the code on both server-side and client-side.

Even I did like that

if (process.browser) {
  this.userManager = new UserManager(options); 
}

The window is undefined error is prompt.

Is there any reason why not we do lazy checking on the window object?

[raymondsze]

More complete usecase.

import { UserManager, OidcClientSettings } from 'oidc-client';

export class PageContext {
  userManager?: UserManager;
  constructor(options: OidcClientSettings) {
    if (process.browser) {
      this.userManager = new UserManager(options); 
    }
  }
}

[brockallen]

you'd not load/use this library server-side

[blerimj]

@raymondsze Did you find to work with SSR and oidc-client?

[prachikhadke]

@brockallen Will SSR with oidc-client ever be supported?

[brockallen]

If you're doing SSR, then I'd think you'd use a cookie to secure your APIs. Perhaps I'm wrong.

[raymondsze]

@brockallen The main issue is not SSR. For example, I am using Next.js (with typescript) but I would like to use implicit flow. I don't use anything related to window on the server side, but I have to require the oidc client like this import ... from 'oidc-client' at the top of file.
The workaround is use require('oidc-client') instead but lose the typescript type checking in IDE.

So my question is is it possible to let the error throw only when I new the UserManager?

[brockallen]

I don't understand why you're using oidc-client-js is you're doing server-side protocol work flows.

[prachikhadke]

I ended up using Fetch API to generate authorize, and logout requests for OIDC Connect. And it's working well for me. Not necessary to use an oidc library as long as you use the proper config and follow the spec.

[brockallen]

Yes, also there are plenty of node-based oidc client libraries designed for server-side (meaning server-rendered) apps.

[raymondsze]

@brockallen nextjs support export static web, it's logic is to initialize the server and do realtime fetching to generate plenty of htmls.

So it end up only have client side code. What I mostly use is to import the typescript type and place on top of file. In typescript, class could be referenced as type as well, the problem is when i do import the User Manager, the implementation of User Manager is imported as well, but I havnt new it anywhere on server side which mean oidc client may have side effect even I didn't call anything inside it.

it may also affect the webpack tree shaking on the usage detection. Lets say if I havent use anything in oidc client but import it, webpack may remove the import smartly. So should I exepect the side effect intoduced by oidc client there but webpack automatically removed it?

I dont think oidc client have modification on the window object.
The fix is just move the window reference to the function block instead of global scope.
I have make a pull request for this fix but may have potentially import.

I found out the window is undefiend thrown in webpack universal build, which related to "umd" module. The idea is to change the current lib build from umd to commonjs. If we are in node environment (with or without webpack (which it should not be supported)), we don't have to use 'umd' module, it should be user's responsibility to handle it (including bundling and minification, so we could just babel the code instead of using webpack(doing this will also enhance the debugging (now the error is thrown from the oidc-client.min.js which is hard to trace. But it require more line changes, so I haven't do it but to let you know the idea).

For user in pure browser environment, package.json did have a field called "browser" to guide the reference.

Actually I dont feel it make sense it throw window is undefined if I havent call any function inside oidc client.

[iXmonvi33]

Can anyone share how solve that problem ? oidc + next.js ?