Microsoft-authentication-library-for-js: cacheLocation for Angular Universal

[jrmcdona]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

"@azure/msal-angular": "1.0.0-beta.5",
"msal": "1.2.2",

Description

We are setting up Angular Universal. But run into this error.

ClientConfigurationError: The value for the cacheLocation is not supported. Given location: localStorage
at ClientConfigurationError.AuthError [as constructor] (C:src\Windows.Insider.Web\dist\insider\server\main.js:164819:28)
at ClientConfigurationError.ClientAuthError [as constructor] (C:src\Windows.Insider.Web\dist\insider\server\main.js:164953:28)
at new ClientConfigurationError (C:src\Windows.Insider.Web\dist\insider\server\main.js:165141:28)
at Function../node_modules/msal/lib-commonjs/error/ClientConfigurationError.js.ClientConfigurationError.createStorageNotSupportedError (C:src\Windows.Insider.Web\dist\insider\server\main.js:165150:16)
at AuthCache.BrowserStorage (C:src\Windows.Insider.Web\dist\insider\server\main.js:164693:71)
at new AuthCache (C:src\Windows.Insider.Web\dist\insider\server\main.js:164467:28)
at new UserAgentApplication (C:src\Windows.Insider.Web\dist\insider\server\main.js:162153:29)
at new MsalService (C:src\Windows.Insider.Web\dist\insider\server\main.js:113768:9)
at Object.MsalService_Factory [as factory] (C:src\Windows.Insider.Web\dist\insider\server\main.js:113923:61)
at R3Injector.hydrate (C:src\Windows.Insider.Web\dist\insider\server\main.js:62423:63)

Has anyone had success on using MSAL Angular 9 with Universal? I also tried sessionStorage but it gets the same error.

[jasonnutter]

@jrmcdona You are server-side rendering your application, correct? At this time, we don't properly support server-side rendered applications, due to the heavy reliance on the window. This is something I think we want to support in the future, though.

[jrmcdona]

@jasonnutter Yes I am try to use SSR. Since we have two marketing website on Angular 9, we need the SEO in a big way! Do you think it would actually work or will it definitely not work if I keep trying to mess with it. These are Microsoft marketing sites from two of the product groups.

[jasonnutter]

@jrmcdona As a workaround, you could try using msal directly (instead of MSAL Angular), and make sure it isn't included in server-side render paths (i.e. defer loading it until the browser).

[jrmcdona]

Let us give that a shot.

[jasonnutter]

@jrmcdona Great, let me know how it goes. This is definitely a scenario we want to better support, unfortunately, it hasn't been a high priority lately.

[jrmcdona]

@jasonnutter this seems like it will be real struggle. I am trying to prevent anything that uses msal-browser package to be removed from bootstrapping the app. I have an MSAL Helper service which is loading msal-angular, and if that service gets imported at all during boot-up it throws errors. I am not sure how to not import that service during boot up but I am trying.

C:\src\Windows.Insider.Web\dist\insider\server\main.js:120407
        if (window.fetch) {

      ^

ReferenceError: window is not defined
    at Function../node_modules/@azure/msal-browser/dist/index.js.BrowserUtils.getBrowserNetworkClient (C:\src\Windows.Insider.Web\dist\insider\server\main.js:120407:9)
    at Object../node_modules/@azure/msal-browser/dist/index.js (C:\src\Windows.Insider.Web\dist\insider\server\main.js:120480:154)
    at __webpack_require__ (C:\src\Windows.Insider.Web\dist\insider\server\main.js:20:30)
    at Object../src/app/core/auth/msalHelper.service.ts (C:\src\Windows.Insider.Web\dist\insider\server\main.js:196831:14)
    at __webpack_require__ (C:\src\Windows.Insider.Web\dist\insider\server\main.js:20:30)
    at Object../src/app/core/uhf/uhf.service.ts (C:\src\Windows.Insider.Web\dist\insider\server\main.js:198293:30)
    at __webpack_require__ (C:\src\Windows.Insider.Web\dist\insider\server\main.js:20:30)
    at Object../src/app/app.component.ts (C:\src\Windows.Insider.Web\dist\insider\server\main.js:193200:23)
    at __webpack_require__ (C:\src\Windows.Insider.Web\dist\insider\server\main.js:20:30)
    at Object../src/app/app.server.module.ts (C:\src\Windows.Insider.Web\dist\insider\server\main.js:193965:25)

[jasonnutter]

@jrmcdona Have you tried the CDN hosted version of the library? That may make it easier to have it only execute client-side.

https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core#via-latest-microsoft-cdn-version

[jrmcdona]

@jasonnutter this looks like MSAL 1.x CDN files?

I need MSAL 2.x.

Sorry I can see I didn't make that clear. I was directed to move to Auth Code flow instead of implicit flow so I can get wids claim.

[jasonnutter]

@pkanher617 Can you add the MSAL.js v2 CDN links?

[jrmcdona]

I found them here:

it is at the bottom of this page https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-javascript-auth-code#more-information

[github-actions[bot]]

This issue has not seen activity in 14 days. It may be closed if it remains stale.

[debugmodedotnet]

any one resolved it ?

[jrmcdona]

@debugmodedotnet they are supporting SSR in newer releases.

[debugmodedotnet]

anyone having any sample where msal.js is used for angular universal? I