ERROR Error: Uncaught (in promise): AuthSdkError: Unable to retrieve OAuth redirect params cookie

[lawchihon]

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

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

I'm submitting a:

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

Current behavior

Keep getting ERROR Error: Uncaught (in promise): AuthSdkError: Unable to retrieve OAuth redirect params cookie when redirect from okta login

Expected behavior

Login without error

Minimal reproduction of the problem with instructions

Call this.oktaAuth.loginRedirect()

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

Environment

• Package Version: 1.4.0
• Browser: Chrome
• OS: Mac
• Node version (node -v): v12.13.1
• Other:

[aarongranick-okta]

@lawchihon This is a known issue with the latest version of Chrome. We have fixes in the latest versions of our modules. If possible, update to [email protected]. To continue using [email protected] you should have the latest 2.x version of okta-auth-js installed (2.13.2). This can be done by removing your node_modules and any lock files (package-lock.json or yarn.lock) and then reinstalling.

[bordecal]

Even after upgrading to @okta/[email protected] and @okta/[email protected], we are still seeing this problem on iOS 12 (both Safari and Chrome). (The problem persists despite a lock file reset.)

[swiftone]

@bordecal - A few questions:

• Are you a separate instance from @lawchihon?
• You mentioned iOS, while the original issue mentions Mac (OSX). Are you encountering this on mobile only?
• Do you have iframes involved or are you just using the okta-angular SDK?

[bordecal]

@swiftone:

1. Yes
2. It's infallibly reproducible on iOS 12 and possibly early iOS 13 versions. It does seem to occur on OS X as well, but I don't know what proportion of those users are experiencing the problem. (I did a quick check myself and was not able to reproduce the problem on Safari on OS X.)
3. We're using the okta-angular and okta-signin-widget. The app is not hosted in an iframe. On the other hand, the index page does contain an iframe for Google Tag Manager (in an noscript tag, as described at https://support.google.com/tagmanager/answer/6103696#web).

[swiftone]

We suspect this is due to some incompatibilities in not-latest Safari version with the cookie SameSite changes done for Chrome.

We have created a ticket to research this, but anyone that can provide reproducible cases and specific version information can greatly help figure out what is going on.

Internal ref: OKTA-286866

[alexspence]

We are getting this error with okta-react in Chrome (80.0.3987.95) on IOS (Using a fresh incognito window). Using okta-react/3.0.0 with the workaround you suggested in #719 for our LoginCallback.

EDIT:

The error isn't exactly the same as reported. The LoginCallback component is printing out the error message: AuthSdkError: Unable to retrieve OAuth redirect params cookie

[aarongranick-okta]

@alexspence What version of IOS? Have you tried it in the XCode device emulator, and if so, does it reproduce there?

[alexspence]

IOS 12.4.1 - Can't run chrome on IOS SImulator - will try it on safari and report back.

[alexspence]

My coworker that is having the issue reports the issue does persist on Safari, I am not able to reproduce in safari in the simulator.

[alexspence]

@aarongranick-okta - is there any workarounds I can try or more information I can send to help with this? This is blocking us from going live with our Okta migration as a significant portion of our user base uses iphones.

[alexspence]

I was able to reproduce the issue with IOS 12.4 in xcode simulator

[alexspence]

Verified that upgrading to latest version of IOS solves this. We are just going to add a message to the error page to ensure they upgrade to the latest version of IOS.

[lawchihon]

@aarongranick-okta I upgraded to the latest 2.x version and it seems to less happen.
However, I found it will still happen if you didn't login right away. There's a time I got redirected to the login page and forgot to click login. After 10min when I go back to the page and click login again, it gave error.

[swiftone]

@lawchihon - There is an intentional time limitation on that login. If you go to the login page and wait too long, the resulting login will not be considered valid, particularly if you are using the PKCE flow (which has a more strict limitation).

Does this describe what you are seeing?

[lawchihon]

@swiftone I believe thats what Im seeing. If that's the case, is there anyway we can choose where to redirect for invalid login? Coz now it is kind of jumping back to okta page.

[swiftone]

Internal ref: OKTA-295177

[tek-bkarimi]

Is there any update on this? Using okta widget and getting this error on iOS version 12. It works on 13. Unfortunately we cannot ask our users to upgrade to new version of iOS. Is there any workaround for this?

Just so you know that we did upgrade to the latest version of modules but the problem still happening on iOS 12.

[aarongranick-okta]

@tek-bkarimi It's possible this issue is related to "secure" cookies. By default, this option is enabled, but it can be disabled by setting:

cookies: {
  secure: false
}

in the config passed to the AuthJS constructor, as described here: https://github.com/okta/okta-auth-js#additional-options

[DarrenAllen]

Hitting this issue as well in our app. @aarongranick-okta according to the docs, disabling secure cookies

is not recommended for production applications.

Has there been any progress in identifying this issue and finding a fix? We also cannot ask our users to update to iOS 13, since many of them use iPhone 6. We use okta-react

[swiftone]

We are unable to reproduce this bug, and it is difficult to know which iOS/safari bug may be responsible. If any users are still seeing this issue, please try with the latest version of okta-react/okta-angular and let us know if it is still a problem an any reproduction details.

[m-lehti]

@swiftone We're experiencing this issue as well in our app. We're using @okta/[email protected] and @okta/[email protected] and have gotten this error when testing on an iPhone 6s Plus iOS 12.1 simulator and an iPad Air 2 iOS 12.4 simulator running in xTools operating the built in safari in regular and private modes. 



There is no okta-pkce-storage or okta-token-storage in sessionStorage on our callback route in private browsers where the error is seen and using tokenManager to manually set storage seems to have no effect.

[aarongranick-okta]

@m-lehti We believe that any issues with the OAuth redirect params cookie were fixed in 3.2.5. In fact, we have changed the error message so if the message still says "cookie" that indicates that an older version is being used. okta-react has an internal dependency on okta-auth-js so even if you have installed another version alongside it, it will use the version within its own node_modules folder. Try doing a clean install of node_modules and also remove any package-json.lock files if they exist. The version of okta-auth-js in node_modules/@okta/okta-react/node_modules/@okta/okta-auth-js should be 3.2.5

[m-lehti]

@aarongranick-okta Thanks for taking a look.

To clarify from the points you've made:

• We've removed the entire node_modules folder including the folder structure mentioned node_modules/@okta/okta-react/node_modules/@okta/okta-auth-js and after running npm install the version of okta-auth-js inside of node_modules/@okta/okta-react/node_modules/@okta/okta-auth-js is 3.2.5
• We're still experiencing an error but as noted it is "Unable to retrieve OAuth redirect params from storage" instead of including "cookie" specifically.

[aarongranick-okta]

@m-lehti Are you including the okta signin widget in your app or are you redirecting to Okta for signin?

[m-lehti]

@aarongranick-okta We are redirecting to Okta for signin with the <Security> component provided by okta-react.

[aarongranick-okta]

@m-lehti The data is set here: https://github.com/okta/okta-auth-js/blob/3.2/packages/okta-auth-js/lib/token.js#L632
There should be an item named okta-oauth-redirect-params in session storage written right before the redirect. https://github.com/okta/okta-auth-js/blob/3.2/packages/okta-auth-js/lib/token.js#L658

I know it is difficult to debug within an emulator, but it would be helpful to know where it is failing. We have logic to use cookies if sessionStorage is not available. But we would expect these cookies to have an issue on IOS 12 with the sameSite setting, which is one reason we are favoring sessionStorage. If sessionStorage is disabled for some reason, it could be falling back to cookies.

We do allow customizing the sameSite / secure flags on cookies although this is generally not recommended because it may cause other problems: https://github.com/okta/okta-auth-js/blob/3.2/README.md#additional-options If there is no avoiding cookies, you might try different values. If you set secure to false, it will use insecure cookies even on HTTPS connection. If you set sameSite to "lax" it will use that value even if the cookies are secure.

[m-lehti]

@aarongranick-okta , I've taken a look at the lines you've tagged and noted after removing node_modules and running npm install that okta-react no longer has a nested install of okta-auth-js in okta-react/node_modules/@okta, but instead does have an install of configuration-validation. okta-react lists okta-auth-js@^3.2.3 in package-lock.json as an item in requires but not in dependencies.

I haven't been able to check the sessionStorage status during/before the redirect: I can share my findings for what the data looks like on the callback route if that helps:

Token state comparison on callback screen:

iPhone 6 Plus Safari Regular tab - working
Cookies

• okta-oauth-nonce
  • value: string (token)
• okta-oauth-state
  • value: string (token)

LocalStorage

• okta-cache-storage
  • value: object (contains strings)
• okta-pkce-storage
  • value: object (which is empty after callback functions have run)
• okta-token-storage
  • value: object (contains relevant access tokens)

SessionStorage

• okta-pkce-storage
  • value: object (which is empty after callback functions have run)
     

iPhone 6 Plus Safari Private tab - experiencing error
Cookies

• okta-oauth-nonce
  • value: string (token)
• okta-oauth-state
  • value: string (token)

LocalStorage

• okta-cache-storage
  • value: object (contains strings)
• okta-pkce-storage
  • value: object (which is empty after callback functions have run)
• okta-token-storage
  • value: object (contains relevant access tokens)

SessionStorage

• no values present
• okta-pkce-storage - is missing

 
iPad Air 2 Safari Regular tab - working
Cookies

• okta-oauth-nonce
  • value: string (token)
• okta-oauth-state
  • value: string (token)

LocalStorage

• okta-cache-storage
  • value: object (contains strings)
• okta-pkce-storage
  • value: object (which is empty after callback functions have run)
• okta-token-storage
  • value: object (contains relevant access tokens)

SessionStorage

• okta-pkce-storage
  • value: object (which is empty after callback functions have run)
• okta-token-storage
  • value: object (contains relevant access tokens)

 
iPad Air 2 Safari Private tab - experiencing error
Cookies

• okta-oauth-nonce
  • value: string (token)
• okta-oauth-state
  • value: string (token)

LocalStorage

• okta-cache-storage
  • value: object (contains strings)
• okta-pkce-storage
  • value: object (which is empty after callback functions have run)
• okta-token-storage - is missing
   

SessionStorage

• no values present

For further diagnosing I've looked at the instructions for setting up okta-auth-js SDK locally (https://github.com/okta/okta-auth-js/blob/3.2/README.md#building-the-sdk) and linking it to our project to make debug related changes (mainly to see what's being assigned / is available on the affected lines of token.js); would that be the best way to figure out what's going wrong and if so are there any gotchas for yarn linking a local sdk package to the node_modules of another package?

[alsoicode]

I have exactly the same issue using:

@okta/okta-angular: 2.2.1
@okta/okta-signin-widget: 4.5.1

in Angular 10.1.3

I've tried removing and re-installing node_modules and also tried implementing my own component to handle the redirect, but I still get the same error.

[aarongranick-okta]

@m-lehti @alsoicode We are aware of an issue affecting iOS 12 and are working on a solution. Can you confirm that the error you are seeing is happening only on iOS 12?

[alsoicode]

This error is happening on OS X. I'm using Big Sur Beta 11.0 and Chrome 6.0.4240.80, but other browsers are exhibiting the same behavior.

[aarongranick-okta]

@alsoicode When a login redirect is handled (by handleAuthentication() in okta-angular), the cookie will be removed. So one possible source of this error is multiple calls to handleAuthentication(). Since you are on a desktop OS, perhaps you can set a debug breakpoint inside handleAuthentication to see if it is being called more than once on the login callback route. Adding the source-map-loader plugin to your webpack config will help with debugging through Okta sources.

[alsoicode]

@aarongranick-okta Hmm. I'm using the OktaCallbackComponent to handle the redirect. It was working fine yesterday, and today it isn't. I've since switched back to using the Okta-provided component vs my custom component, but nothing seems to help this problem.

[alsoicode]

@aarongranick-okta OK, I think I've isolated the issue on my side to a race condition when supplying the Okta config via a service.

[m-lehti]

@aarongranick-okta, to confirm your question our team is only experiencing the issue on iPadOS 12.4 and iOS 12.1: on desktop as well as newer mobile devices the error isn't seen and the app functions as expected.

[alsoicode]

@aarongranick-okta Problem solved. It was due to a race condition while retrieving the Okta config that I've fixed. Thanks for the help.

[aarongranick-okta]

@alsoicode Great! Glad you were able to fix it!

[mig82]

I'm facing this exact same error name: "AuthSdkError", message: "Unable to retrieve OAuth redirect params cookie" with the plain Okta SignIn widget version 4.4.4 from the CDN. This is not an Angular app.
Here's my code. https://quantum-demos1.s3.eu-central-1.amazonaws.com/okta/glitch.me-app.html
I'm facing this problem on Chrome 60.0.3112.113, Firefox 81.0.2 and Safari 12.1.2
Any clue what I might be doing wrong?

[shuowu]

@mig82 can you try the latest version (5.0) and use showSignInToGetTokens to retrieve tokens without a redirect.

widget
  .showSignInToGetTokens(..)
  .then(
    tokens => widget.authClient.tokenManager.setTokens(tokens)
  )

[mig82]

Thank you for the assistance, @shuowu .
After moving up to 5.0.0 as you suggest I get this new error in the console.

authorize?client_id=...&code_challenge=TU4Q...&code_challenge_method=S256&nonce=h36Qw...&prompt=none&redirect_uri=https%3A%2F%2F127.0.0.1%3A9989%2FOidcDemo%2Fkdw&response_mode=okta_post_message&response_type=code&sessionToken=20111N...&state=1hX9xD6...&scope=openid email:1
Unrecognized Content-Security-Policy directive 'report-to'.

Looking at the response headers of the /authorize call I found this:

report-to:{"group":"csp-report","max_age":31536000,"endpoints":[{"url":"https://okta.report-uri.com/r/d/csp/reportOnly"}],"include_subdomains":true}

and this (I've tried to prettify it for ease of reading):

content-security-policy-report-only:
	default-src 'self' *.oktacdn.com dev-359971.oktapreview.com;
	connect-src 'self' *.oktacdn.com *.mixpanel.com *.mapbox.com app.pendo.io data.pendo.io pendo-static-5634101834153984.storage.googleapis.com dev-359971.oktapreview.com dev-359971-admin.oktapreview.com dev-359971.kerberos.oktapreview.com https://oinmanager.okta.com data:;
	script-src 'unsafe-inline' 'unsafe-eval' 'self' *.oktacdn.com;
	style-src 'unsafe-inline' 'self' *.oktacdn.com app.pendo.io cdn.pendo.io pendo-static-5634101834153984.storage.googleapis.com;
	frame-src 'self' login.okta.com dev-359971.oktapreview.com dev-359971-admin.oktapreview.com;
	img-src 'self' *.oktacdn.com dev-359971.oktapreview.com *.tiles.mapbox.com *.mapbox.com app.pendo.io data.pendo.io cdn.pendo.io pendo-static-5634101834153984.storage.googleapis.com data: blob:;
	font-src data: 'self' *.oktacdn.com fonts.gstatic.com;
	report-uri https://okta.report-uri.com/r/d/csp/reportOnly;
	report-to csp-report

Notice the report-to directive at the bottom. I'm not too familiar with the syntax for these headers. Do you see anything out of the ordinary? Reading this thread, perhaps some colons are out of place?

[shuowu]

@mig82 Can you update the code in https://quantum-demos1.s3.eu-central-1.amazonaws.com/okta/glitch.me-app.html and I'll try if I can reproduce the issue.

[mig82]

@shuowu I got it to work using 5.0.0 and showSignInToGetTokens.

Seems a number of things were wrong. First, my Okta app was configured as a Web app (with client_id and client_secret) and then attempting to log in with the client_id only. Thing is I started testing Okta with a server-side web application, and then moved to attempting to use the SingIn widget in an SPA.

I had to create a new Okta app because it's not possible to enable the same one to be used in both ways. Perhaps an enhancement to consider?

Also, I've found it very confusing that parameters can be used in either the instance declaration of OktaSignIn or the invocation of showSignInAndRedirect or showSignInToGetTokens, and some samples show one thing, and some others show something else. Some include some parameters —like the issuer— and some don't. And this is not very well explained in the docs. Or perhaps the library just need to be simplified. For example, if you made these functions into static ones, —i.e. OktaSignIn.showSignInToGetTokens — then there would be a single place to add all of this stuff. Just a thought.

At some point I also got this error:

"The issuer [https://dev-359971.oktapreview.com/oauth2/default] does not match [https://dev-359971.oktapreview.com//oauth2/default]"

As you can see, these two URL's are essentially the same, except one of them has a double slash character. I'd suggest you could make your JS library smart enough to remove these involuntary double slash characters.

Thank you very much for the assistance.

[aarongranick-okta]

@mig82 Thank you for the valuable feedback! We will definitely take this in consideration as we work to improve the developer experience with the signin widget and our other SDKs.

[aarongranick-okta]

There were many possible causes of this error and we believe we have fixed / compensated for most cases. If you are still experiencing this issue with current versions of our SDK, please let us know.