WebPack,OIDC and Client Side Rendering -WebStorageStateStore #1080

New Issue

fergalmoran · 2025-08-09T17:18:47Z

fergalmoran commented

2025-08-09 17:18:47 +00:00

Originally created by @DoubleExposure on 1/28/2017

In my appcompnent.ts file, I am trying to authenticate my user by calling the following on page load:

export class AppComponent implements OnInit {

    constructor( private authService: AuthService) { }

    ngOnInit() {
        this.authService.startSigninMainWindow();

    }

I expect this to route me to the IdentityServer login page.
In my auth.service.ts file, I am loading WebStorageStateStore like below.
import { UserManager, Log, MetadataService, User, WebStorageStateStore} from 'oidc-client';

In auth.service.ts I have a const called settings. This is where I set the WebStorageStateStore.

.... filterProtocolClaims: true,
loadUserInfo: true,
userStore: new WebStorageStateStore({ store: window.localStorage })
}

I get an error saying window is not defined. How do I resolve this? Webpack seems to be trying to render this serverside when there is no window object serverside. What is the recommended way to work around the serverside rendering and the conflict with a nonexistent window object?

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined
at Object.<anonymous> (main-server.js:617:65)

Any suggestions as to a work around? Does anyone know how to turn off serverside prerendering for this component? Can I tell Webpack to ignore this component somehow since the OIDC javascript library is clientside only and needs the window object?

*Originally created by @DoubleExposure on 1/28/2017* In my appcompnent.ts file, I am trying to authenticate my user by calling the following on page load: ``` export class AppComponent implements OnInit { constructor( private authService: AuthService) { } ngOnInit() { this.authService.startSigninMainWindow(); } ``` I expect this to route me to the IdentityServer login page. In my auth.service.ts file, I am loading WebStorageStateStore like below. `import { UserManager, Log, MetadataService, User, WebStorageStateStore} from 'oidc-client';` In auth.service.ts I have a const called settings. This is where I set the WebStorageStateStore. ``` ``` .... filterProtocolClaims: true, loadUserInfo: true, userStore: new WebStorageStateStore({ store: window.localStorage }) } I get an error saying window is not defined. How do I resolve this? Webpack seems to be trying to render this serverside when there is no window object serverside. What is the recommended way to work around the serverside rendering and the conflict with a nonexistent window object? An unhandled exception occurred while processing the request. ``` Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined at Object.<anonymous> (main-server.js:617:65) ``` Any suggestions as to a work around? Does anyone know how to turn off serverside prerendering for this component? Can I tell Webpack to ignore this component somehow since the OIDC javascript library is clientside only and needs the window object?

fergalmoran closed this issue

2025-08-09 17:18:47 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1080