MSAL for Angular not working in IE 11

[ghost]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• Chrome version XX
• Firefox version XX
• [ x] IE version 11
• Edge version XX
• Safari version XX

Library version

Library version: 0.1.1



## Current behavior

I followed your MSAL for Angular tutorial and it works perfectly in Chrome. When I navigate to https://localhost:4200/ in IE 11 the application simply will not load. I'm getting a 'SCRIPT1002: Syntax Error'.

From looking at the IE 11 Debugger, I can see that it doesn't like the BroadcastService class. See screenshots attached.

[nehaagrawal]

@BenBullock1992 IE support was only added for MSAL.js and not for angular wrappers. It's a known issue and we are working on the fix. We will release it soon.

[ghost]

@nehaagrawal - Thank you for letting me know. Do you have an ETA and/or possible workaround?

[ghost]

Thanks @nehaagrawal! If I can help in any way, please let me know 😀👍

[ghost]

@nehaagrawal, did you make any progress on this?

[ghost]

@nehaagrawal - any update on this please?

[rjmiezin]

Just wondering if there is any update on this issue as well?

[Weschk]

@nehaagrawal any progress on this issue?

[nehaagrawal]

@BenBullock1992 @Weschk I was on leave and just checking back this issue. I apologize for the delay. I will get back to you on this soon.

[bwronin]

@nehaagrawal Any update on this?

[sbanerjee302]

@nehaagrawal Any updates or ETA for this issue ?

[taivu]

please, and thank you for your time.

[217Wilder-User1]

I'm having the same issue. ETA would be great.
Unfortunately, I didn't realize this issue existed and created a stackoverflow question here:

https://stackoverflow.com/questions/53196989/fixing-syntax-error-in-internet-explorer-11-angular-6-project

Could this be a build error with webpack and es5?

[ddbardsley]

Hi @nehaagrawal. Is there an ETA of when a fix will be provided? If it is not soon then we will have to search for another alternative. Please let us know.

[DeanB2015]

I think I found the issue. The fix is currently working for me. There maybe a better fix, but it works NOW!
Problem:
The dist folder(@Azure\msal-angular\dist) in NPM package @azure/msal-angular is compiled incorrectly for IE11.

Fix:
Recompile the ts files (https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular) and add to your projects node_modules\@azure\msal-angular\dist

Steps

1. clone and npm install https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular
2. npm run build:modules and change to tsc && tsc -m es2015 --outDir lib-es6
3. copy the newly created files from lib-es6
4. paste lib-es6 files to your angular projects node_modules\@azure\msal-angular\dist
   npm start your angular project. Thumbs up if it works for you.

[ddbardsley]

Hi @DeanB2015...Thank you for the instructions that you provided...it did work for IE 11 but it does not work for Microsoft Edge (see attached image that I captured).

Also, do you know when a new release will be available to us so that we do not have to copy the contents of the lib-es6 to the node-modules@azure\msal-angular\dist folder?

[DeanB2015]

@ddbardsley What version of Edge are you using?
Mine = Microsoft Edge 41.16299.726.0 Microsoft EdgeHTML 16.16299
What version of Angular are you using? Mine = "@angular/http": "~7.0.0",
What version endpoint are you using V1 or V2? https://docs.microsoft.com/en-us/azure/active-directory/develop/azure-ad-endpoint-comparison
What type of account are you using? Work, School, Guest, personal? I'm using Work.

[ddbardsley]

@DeanB2015 Here is the information that you requested:

Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134
"@angular/http": "7.0.0"
V1
Work

[ddbardsley]

@DeanB2015 Do you know when a new release will be available to us so that we do not have to copy the contents of the lib-es6 to the node-modules@azure\msal-angular\dist folder?

[DeanB2015]

@ddbardsley I too am getting an error using Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134 and es2015 dist files.

I created a basic Angular 7 project to test @azure/msal-angular. https://github.com/217Wilder/msal_onenote_api_azure_lab. Unfortunately, this is not an Angular issue. The problem is with the way the msal framework has been written. not great when I see found 10 vulnerabilities (1 low, 5 moderate, 2 high, 2 critical) on NPM install.

[DeanB2015]

@ddbardsley I don't know when a release will be available.

@navyasric & @nehaagrawal Thoughts on possible updates to the MSAL framework? Any help is greatly appreciated.

[leonixyz]

Any news on this?

Why is this issue being marked as an enhancement?

If, as explained by @DeanB2015, the module is not compiled correctly, it means that this is a bug not an enhancement.

Any idea of how to use the workaround on an automated pipeline?

[tstaals]

We need to have this fixed as well, the workaround is not really suited for our build pipeline

[ddbardsley]

@navyasric & @nehaagrawal please provide all of us with an update as to when an updated release will be provided to fix the inability to use the IE browser with your currently released version.

[mohsinma]

@navyasric & @nehaagrawal We are also running into the same issue. An update on this issue would be highly appreciated.

[patriziofilloramo]

@navyasric @nehaagrawal
you may have labeled the issue incorrectly.

We are also waiting for this fix, any update would be very appreciated.
Thanks for your support!

[arunprasathv]

@vbucchar I fixed this issue by making rest call from angular by myself and got rid of graph library.

[sgentile]

@jasonnutter what version of msal needs to be installed to use this with @azure/[email protected] ?

[jasonnutter]

The beta is only compatible with version 0.2.2 of msal (which is included as a dependency). It is on our roadmap to update it to use msal 1.0.

[vbucchar]

@vbucchar I fixed this issue by making rest call from angular by myself and got rid of graph library.

I'd really prefer not to do this, but I guess if that's the only work-around I'll have to.

[sgentile]

@jasonnutter So above you show calling 'isIE' - the compiler throws errors when attempting to call a function as you have shown.

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'isIE' was called.

export function isIE() {
  const ua = window.navigator.userAgent;
  const msie = ua.indexOf("MSIE ") > -1;
  const msie11 = ua.indexOf("Trident/") > -1;

  // If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
  // const isEdge = ua.indexOf("Edge/") > -1;

  console.log('isIE', msie, msie11);
  return msie || msie11;
}

...

MsalModule.forRoot({
      storeAuthStateInCookie: isIE()
    })

[jasonnutter]

@sgentile Yeah, that was my mistake, I'll update shortly.

(We may also decide to put that check into the library itself, so that you don't have to.)

[sgentile]

I was going to suggest that...

[sgentile]

My biggest issue right now is trying to debug in IE11. I get in an infinite loop with this error .

Token Renewal Failed | Token renewal operation failed due to timeout

Only happens in IE11 and localhost. But I can't even test my app with IE11 at this point...

Error is . '"AADSTS50058: A silent sign-in request was sent but none of the currently signed in user(s) match the requested login hint.'

[sgentile]

Solved my own issue for those interested... had to add https://login.microsoftonline.com to trusted sites in IE... what a PITA

[chr1soscl]

@jasonnutter
Hi Jason,
I am using the popup to authenticate my user, like this:
MsalModule.forRoot({
clientID: 'myclientID',
authority: 'myAuthority',
popUp: true,
consentScopes: ["user.read"]
})
with the library version:
"@azure/msal-angular": "^0.1.2"
the popup is working fine, but with the beta version, the popup is not coming up.

[jasonnutter]

@chr1soscl Are there errors in the console? Which browser?

[jasonnutter]

@sgentile Yeah, that's a known issue, unfortunately.

[chr1soscl]

@jasonnutter no errors in the console, it simply redirects me to the landing page without login popup and I am getting a token and user information, seems like it is authenticating. Browser is Chrome.

[arunprasathv]

@jasonnutter ok.. can i upgrade this library now or is there any more issues to be fixed yet.

[jasonnutter]

@chr1soscl I think I was able to reproduce the issue you were seeing (the guard not prompting for login), will have a fix soon.

[jasonnutter]

If you were having issues with the guard not prompting for login, please try version 0.1.4-beta.2, which should fix that bug, and let us know if that fixes what you were seeing.

We'll release 0.1.4 later this week if there are no other issues, thanks!

[chr1soscl]

@chr1soscl I think I was able to reproduce the issue you were seeing (the guard not prompting for login), will have a fix soon.

Hi @jasonnutter now I am getting the popups properly in Chrome, I am able to login normal, in IE when I try to login, it opens the app page in the popup and then it opens a new popup to login again and if I login it continues opening new popups in a loop.

[jasonnutter]

@chr1soscl It is a known issue that popups do not work properly with our library for IE11, so our guidance is to use the redirect flow when users are on IE (set popUp to false programmatically). You should also set storeAuthStateInCookie (introduced in beta) to true. Example: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/angular-es5-ie11/lib/msal-angular/samples/MSALAngularDemoApp/src/app/app.module.ts#L45-L48

[stownend]

Hi @jasonnutter , I have just upgraded my MSAL-angular app to "0.1.4-beta.2". I have also set the storeAuthStateInCookie correctly and am already using the redirect flow (not popups). I have also set the build target to es5. I have also added the following to TrustedSites (my app URL, login.microsoftonline.com and even the url of my web api). Whilst I now have the site displaying in IE11 (and Edge) - I still get the looping authentication issue. I only see the login once so I think it is related to the Iframe. Interestingly if you kill the browser (IE or Edge) once logged in and after the looping redirects to login BUT before the looping error shows then restart the browser – your credentials are still cached so don’t get redirected to the login and the looping does not begin. From there you can use the site as intended. That’s how I was able to test the other functionality in IE.

Have you any suggestions? This is so close now. I am developing an app for organisations whose policies still mandate IE or Edge and ban Chrome, FF etc. Not being able to use MSAL in a modern Angular app is really causing issues.

Thanks for the good work so far.

[jasonnutter]

@stownend Thanks for that info, I'll take a look.

[jasonnutter]

@stownend I'm having trouble reproducing the behavior you describe. Do you have a sample project you can share? If you don't want to post it publicly you can email me at [email protected], thanks!

[stevehougom]

I installed the [email protected] and that seems to work from localhost4200: but when I deploy the build version to our staging app service in azure it wont login it just keeps redirecting back to the ms login page. Not sure why it works locally but redirects in azure.

[jasonnutter]

@stevehougom Do you have storeAuthStateInCookie set to true for IE? e.g. #414 (comment)

[stevehougom]

I just added the following and its working now! const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window. navigator.userAgent.indexOf("Trident/") > -1; cacheLocation : "localStorage", storeAuthStateInCookie: isIE Thanks Jason!

…

On Thu, Sep 5, 2019 at 3:16 PM Jason Nutter ***@***.***> wrote: @stevehougom <https://github.com/stevehougom> Do you have storeAuthStateInCookie set to true for IE? e.g. #414 (comment) <#414 (comment)> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#414?email_source=notifications&email_token=AMGVI5U6OJZA4TWX2U5XSRTQIFSJPA5CNFSM4FSNLT32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6ATYZY#issuecomment-528563303>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMGVI5VPUAQZXPTAPJCXASLQIFSJPANCNFSM4FSNLT3Q> .

[jasonnutter]

Version 0.1.4 has been published as a stable release on npm. If you see any further issues, please open a new issue. Thanks!