Have a SPA configured with Authorization Code Flow with PKCE in Okta. Communicating to that using Okta angular library version 2.0.0 from an Angular 9 (9.0.7) app. The app works fine in Chrome. But in IE 11 on Windows 10 Enterprise, the token endpoint returns a 403 error after the user logs in. Have added all the required shims / polyfills (text-encoding and webcrypto-shim) for encoding support and others based on Angular’s documentation and other internet searches.
Have been trying to troubleshoot this for several days now. Has anyone else run into this issue? Any help / guidance would be greatly appreciated.
Create a new SPA app and check the “implicit flow” box under grant types allowed. You can have authorization code flow + PKCE and implicit flow supported by the same app. You’ll just need to say pkce: false in your app for implicit flow to work.
Ok, we just tried this out Matt. Looks like there is no more token endpoint being called. So Okta is calling our custom callback, the first thing we do in that is to call OkatAuthService’s handleAuthentication method. We have a breakpoint inside that method and it is erring out on the first line const res = await this.oktaAuth.token.parseFromUrl(); with the below error -
TypeError: Object doesn't support property or method 'slice'
at Anonymous function (http://localhost:4200/vendor.js:74770:55128)
at ZoneDelegate.prototype.invoke (http://localhost:4200/polyfills-es5.js:15259:17)
at onInvoke (http://localhost:4200/vendor.js:42202:17)
at ZoneDelegate.prototype.invoke (http://localhost:4200/polyfills-es5.js:15259:17)
at Zone.prototype.run (http://localhost:4200/polyfills-es5.js:15018:21)
at Anonymous function (http://localhost:4200/polyfills-es5.js:15766:21)
at ZoneDelegate.prototype.invokeTask (http://localhost:4200/polyfills-es5.js:15294:17)
at onInvokeTask (http://localhost:4200/vendor.js:42190:17)
at ZoneDelegate.prototype.invokeTask (http://localhost:4200/polyfills-es5.js:15294:17)
at Zone.prototype.runTask (http://localhost:4200/polyfills-es5.js:15063:25)
at resolvePromise (http://localhost:4200/polyfills-es5.js:15707:33)
at Anonymous function (htt",
Symbol()_8.j8u534f2a45: undefined,
Symbol(INITIAL_VALUE)_j.j8u534f29xn: undefined,
Symbol(rxSubscriber)_i.j8u534f29xn: undefined,
task: { },
zone: { }
}
Not being able to trace further. Appreciate your time and help.
By the way, getting the exact same error when running the okta-hosted login app from Okta’s samples repo at https://github.com/okta/samples-js-angular.git. Had to make following changes in that code to make it at least come up in IE -
add webcrypto-shim js
target es5 browser
Set (window as any).__Zone_enable_cross_context_check = true; per Angular documentation.
Removing webcrypto-shim makes the sample app come up in IE 11! Phew!
So looks like we need to turn the Implicit grant type on and set PKCE to false when use IE. Is that the right conclusion, @mraible? Thank you for your attention to this issue.
BTW, the zone flag is needed to eliminate the annoying error in the console - SCRIPT5011: Can't execute code from a freed script. Not sure if it affects the actual functionality.
Yes, I believe using implicit flow for IE11 is the correct way to go. Ideally, you wouldn’t have to support IE11, but I realize that’s not a luxury that everyone has.
If you need to support IE 11, I would recommend using implicit flow. If you can stop supporting IE 11, you should be able to use Auth Code flow + PKCE.
Appreciate your time and help.