Oidc-client-js: oidc-client SSR issue "window is not defined"

[stg609]

When I tried to use the oidc-client (1.5.4) with the Microsoft Asp.net Core React and Redux template in VS 2007, it raises an exception said "window is not defined". And, the exception message like below is not such obvious.

An unhandled exception occurred while processing the request.
NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined
at Object.exports.__esModule (C:\xxx\ClientApp\dist\main-server.js:937:212)
at __webpack_require__ (C:\xxx\ClientApp\dist\main-server.js:20:30)
at Object. (C:\xxx\ClientApp\dist\main-server.js:634:70)
at __webpack_require__ (C:\xxx\ClientApp\dist\main-server.js:20:30)
at Object. (C:\xxx\ClientApp\dist\main-server.js:309:75)
...

It's very easy to reproduce. Simply add below code in the Home.tsx will trigger the issue:

   //there's no need to invoke this function
    onLogin()
    {
        const mgr = new Oidc.UserManager(config);
        mgr.signinRedirect();
    }

I know the issue is because oidc-client is not for server side rendering, however most of my projects require SSR. So I think it will be better if the oidc-client can support SSR.

Anyway, it costs me about 1 day to figure it out.

The following code uses the window object directly cause the issue:

//node_modules\oidc-client\lib\oidc-client.js
(function webpackUniversalModuleDefinition(root, factory) {
    ...omitted
})(**window**, function() {
...

My temporary solution to this issue is to replace window with (typeof window === 'undefined'?undefined:window) in node_modules\oidc-client\lib\oidc-client.min.js

[brockallen]

Is this JS running on the server?

[stg609]

Yes, I think so.
As the Asp.net Core React and Redux template is using SSR, the Home.tsx will be rendered on the server side firstly. Also, as you can see the Home.tsx requires the "oidc-client" module to be imported before rendering, that will cause the issue.

[brockallen]

Yes, I think so.

that explains it then.

[Webritter]

is there any solution for this?

[JuanGarciaCarmona]

I had everything working but it crashed just after deploying it. Let's say that SSR is nearly mandatory if you want to have multiple languages within you Angular App... @brockallen , is there any solution / workaround for this?
(I start my own search for a solution right now...)

Thanks in advance.

[brockallen]

I don't have an answer for you... the whole SSR architecture when it relates to using this library is hard for me to understand.

[JuanGarciaCarmona]

Thanks for so quick answer.

You are right, SSR and oidc-client shouldn't be connected... That made me think that maybe some other people have had similar issues with other 'browser-oriented' libraries when applying SSR with Angular universal (my concrete case)... And I've found this:

https://github.com/angular/universal/issues/830

I'll try that approach and let you know.

KR,

[cymen]

https://github.com/IdentityModel/oidc-client-js/pull/714 is working well for us to resolve this issue.

[prachikhadke]

@cymen are you using oidc-client library with SSR? #714 is not working for me for oidc-client with SSR. And the stack trace looks different for me. @brockallen @stg609 any suggestions?

ReferenceError: window is not defined at Object.<anonymous> (<PATHTOAPP>/node_modules/oidc-client/lib/oidc-client.min.js:1:257) at Module._compile (module.js:643:30) at Module._compile (<PATHTOAPP>/node_modules/pirates/lib/index.js:83:24) at Module._extensions..js (module.js:654:10) at Object.newLoader [as .js] (<PATHTOAPP>/node_modules/pirates/lib/index.js:88:7) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Module.require (module.js:587:17) at require (internal/module.js:11:18)