Error logging in with IE11 after upgrading from Angular 8 to Angular 10

[polklabs]

I'm submitting this issue for the package(s):

• jwt-verifier
• okta-angular
• oidc-middleware
• okta-react
• okta-react-native

I'm submitting a:

• Bug report
• Feature request
• Other (Describe below)

Current behavior

When logging in with the okta-signin-widget in IE11 the following error occures
AuthSdkError: Could not load PKCE codeVerifier from storage. This may indicate the auth flow has already completed or multiple auth flows are executing concurrently.

Auth flow works perfectly on other browsers

Okta login also stopped working during the intermediate upgrade from version 8 to version 9

Expected behavior

Okta login was working in Angular 8 and should continue working in Version 9 and Version 10
okta.handleAuthentication() should complete without error on IE11

No Okta related code has been changed during the upgrade from V8 to V10

Unable to debug since the IE console closes when redirecting to oktapreview and back and console logs are not saved when console is not open

Minimal reproduction of the problem with instructions

Extra information about the use case/user story you are trying to implement

Sign in widget config

{
    baseUrl: environment.oktaBaseUrl,
    clientId: environment.otkaClientId,
    redirectUri: environment.oktaRedirectUri,
    brandName: '',
    authParams: {
      pkce: true,
      responseMode: 'query',
      issuer: environment.oktaIssuer,
      display: 'page',
      scopes: ['openid', 'profile', 'email']
    },
    tokenManager: {
      secure: true,
      storage: 'cookie',
      expireEarlySeconds: 300
    },
    testing: {
      disableHttpsCheck: environment.production === false
    },
    features: {
      selfServiceUnlock: true
    }
}

App.module Okta config

const oktaConfig = {
  clientId: environment.otkaClientId,
  issuer: environment.oktaIssuer,
  redirectUri: environment.oktaRedirectUri,
  scopes: ['openid', 'profile', 'email'],
  tokenManager: {
    secure: true,
    storage: 'cookie',
    expireEarlySeconds: 300
  },
  testing: {
    disableHttpsCheck: environment.production === false
  },
  onAuthRequired,
  onSessionExpired
};

In the login component i'm checking if the user has an active session and calling
this.oktaAuth.loginRedirect(this.loginHelperService.getRedirectUrl(), { sessionToken: sessionInfo.id });
Otherwise i'm showing the login widget

Environment

• Angular CLI: 10.1.4
• Browser: IE11
• OS: Windows 10
• Node version (node -v): 12.19.0
• typescript: 4.0.3

Polyfills:

• webcrypto-shim: ^0.1.5
• text-encoding: ^0.7.0

Working Okta package versions:

• @okta/okta-angular: ^2.1.0,
• @okta/okta-auth-js: ^3.2.2,
• @okta/okta-signin-widget: ^4.2.1,

Package versions after update:

• @okta/okta-angular: ^2.2.1
• @okta/okta-auth-js: ^3.2.5
• @okta/okta-signin-widget: ^4.5.0

using @latest versions also does not fix the issue

[swiftone]

@polklabs - Thanks for the report. While we investigate, please check this comment from a similar issue to see if it is related: #706 (comment)

[swiftone]

Internal ref: OKTA-336180

[aarongranick-okta]

@polklabs We recommend avoiding logic based on the sessionToken. The widget should either redirect to Okta then to your callback handler, or retrieve tokens directly. This is an example of receiving tokens using the widget without a redirect: okta/samples-js-react@c841d6b#diff-7961237a7da3d48dc2505ec2526496d9R49 Note that currently you must not set the "pkce" or "display" option in the authParams in order to avoid redirect.

Logic based on active session may also cause issues if you are using the api /sessions/me, it will not work if 3rd party cookies have been blocked in the browser.

If there is an active session you can get tokens by redirect, suppressing any possibility of showing the widget on the Okta side, by setting prompt: "none" in the redirect options. Your code should be prepared to handle a possible "error" parameter returned in the callback. The reference for options to loginRedirect is here: https://github.com/okta/okta-auth-js#authorize-options

A couple other things about your config:

tokenManager.storage = "cookie" is generally not encouraged. Are you sharing tokens with backend code? There may be a better way to do this.

tokenManager.expireEarlySeconds is strongly discouraged for production use. It is meant only for reproducing errors with token expiration, to avoid waiting real-time. It can cause many issues in production including infinite loops on the client which may lead to rate-limiting by the Okta servers.

We do not recommend using the onSessionExpired option, it has been deprecated and will be removed in the next version. It may very well be the source of this error you are seeing.

[polklabs]

@aarongranick-okta Using getWithoutPrompt when an active session works great.
I also removed 'pkce' and 'display' from the authParams which allow me to handle login on the login page without dealing with the callback route.

I had set tokenManager.storage = "cookie" because in a previous version it didn't seem to be storing the tokens correctly in IE

Now there is an issue with logging out of the site in IE11. Chrome works as expected, but in IE authClient.session.get() returns a status of 'ACTIVE' even after calling OktaAuthService.logout('/logout').
Is there another call that needs to be made? Or something else that may need to be cleared from storage?