Cognito Hosted UI showing Invalid state error

[mikalai-okun]

Describe the bug We are using cognito hosted UI and Amplify Federated login to sign-up or sign-in our users with Intuit OpenID. It actually works great for users who already have a valid session in Intuit, cognito able to find or create a user, the issue arise when we don't have a session of Identity provider and user presented with login screen, after successful authorization cognito actually creates a user, but hosted UI showing the error: An error was encountered with the requested page. - Invalid State

To Reproduce Steps to reproduce the behavior:

1. Create OpenID provide in Cognito with Intuit
2. Create an APP
3. Link everything with your Client and create federatedLogin link.
4. Click on it, and see Identity auth screen, submit it.
5. See error.

Expected behavior After successful auth we shouldn't see error in hosted ui and redirect to client app.

Screenshots

What is Configured?

  Auth: {
    region: "us-east-1",
    userPoolId: "us-east-1_v*****Z",
    userPoolWebClientId: "606*******8a"
    aws_cognito_region: "us-east-1",
    aws_project_region: "us-east-1",
    aws_user_pools_id: "us-east-1_v*****Z",
    aws_user_pools_web_client_id: "606********8a",
    oauth: {
      domain: "stage-*****.auth.us-east-1.amazoncognito.com",
      scope: "openid,phone,email,profile,aws.cognito.signin.user.admin,com.intuit.quickbooks.accounting",
      redirectSignIn: "http://localhost:8000",
      redirectSignOut: "http://localhost:8000",
      responseType: "code"
  }

Environment

``` npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages ``` ``` System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz Memory: 294.64 MB / 8.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm Browsers: Chrome: 84.0.4147.85 Firefox: 77.0.1 Safari: 13.1.1 npmPackages: @olavoparno/jest-badges-readme: ^1.4.1 => 1.4.1 aws-amplify: ^1.3.3 => 1.3.3 aws-amplify-react: ^2.6.3 => 2.6.3 axios: ^0.19.2 => 0.19.2 enzyme: ^3.11.0 => 3.11.0 enzyme-adapter-react-16: ^1.15.2 => 1.15.2 eslint-config-airbnb: ^18.1.0 => 18.1.0 eslint-config-airbnb-base: ^13.1.0 => 13.2.0 eslint-config-prettier: ^6.10.1 => 6.10.1 eslint-plugin-flowtype: ^2.50.3 => 2.50.3 eslint-plugin-import: ^2.20.2 => 2.20.2 eslint-plugin-jsx-a11y: ^6.2.3 => 6.2.3 eslint-plugin-prettier: ^3.1.3 => 3.1.3 eslint-plugin-react: ^7.19.0 => 7.19.0 eslint-plugin-react-hooks: ^1.7.0 => 1.7.0 flow-bin: ^0.95.1 => 0.95.1 gulp: ^3.9.1 => 3.9.1 hellosign-embedded: ^2.7.2 => 2.7.2 js-cookie: ^2.2.1 => 2.2.1 lodash: ^4.17.11 => 4.17.15 moment: ^2.24.0 => 2.24.0 moment-timezone: ^0.5.28 => 0.5.28 node-sass: ^4.13.1 => 4.13.1 pre-commit: ^1.2.2 => 1.2.2 prettier: ^1.19.1 => 1.19.1 public-ip: ^3.2.0 => 3.2.0 puppeteer: ^1.13.0 => 1.20.0 react: ^16.13.1 => 16.13.1 react-csv: ^2.0.3 => 2.0.3 react-dom: ^16.13.1 => 16.13.1 react-dropzone: ^10.2.2 => 10.2.2 react-intl: ^3.12.1 => 3.12.1 react-pdf: ^4.0.5 => 4.1.0 react-plaid-link: ^1.5.1 => 1.5.1 react-redux: ^6.0.1 => 6.0.1 react-router-dom: ^5.1.2 => 5.1.2 react-scripts: 3.0.0 => 3.0.0 react-slick: ^0.25.2 => 0.25.2 react-uuid: ^1.0.2 => 1.0.2 redux: ^4.0.5 => 4.0.5 redux-devtools-extension: ^2.13.8 => 2.13.8 redux-mock-store: ^1.5.4 => 1.5.4 redux-thunk: ^2.3.0 => 2.3.0 rollbar: ^2.15.0 => 2.15.0 semantic-ui: ^2.4.2 => 2.4.2 semantic-ui-calendar-react: ^0.15.3 => 0.15.3 semantic-ui-react: ^0.86.0 => 0.86.0 slick-carousel: ^1.8.1 => 1.8.1 styled-components: ^4.4.1 => 4.4.1 typescript: ^3.8.3 => 3.8.3 npmGlobalPackages: @aws-amplify/cli: 4.21.3 expo-cli: 3.17.16 gulp: 4.0.2 npm: 6.11.3 ```

[sammartinez]

@mikalai-okun I do see that you are using version 1 of aws-amplify and we are currently on version 3. Is there a reason for not using the latest? Please let us know.

[mikalai-okun]

@sammartinez no specific reason, we will try to upgrade and check if this fixed a problem. Thank you.

[sammartinez]

@mikalai-okun Sounds good, let us know !

[mikalai-okun]

@sammartinez after update to:

"aws-amplify": "^3.0.20",
"aws-amplify-react": "^4.1.19",

I started to get error about invalid scope. I'm setting it in config like: openid,phone,email,profile

[amhinson]

@mikalai-okun Could you also post a code snippet of your Auth.federatedSignIn() usage?

[mikalai-okun]

@amhinson sure, here it is:

import React from 'react';
import { Auth } from 'aws-amplify';
import { Image, Divider, Button } from 'semantic-ui-react';
import IntuitLogo from '../../Ui/assets/intuit-logo.svg';

const SignInIntuit = (props) => (
  <div>
    <Divider horizontal className='custom-divider'>
      <sub className='light-font-color custom-divider-sub'>OR</sub>
    </Divider>
    <center>
      <div className='u-mt shadow-bt'>
        <Button onClick={() => Auth.federatedSignIn({provider: 'Intuit'})} basic color='grey' className='custom-intuit-button u-m0'>
          <Image src={IntuitLogo} className='custom-intuit-logo float-left' />
          {props.button}
        </Button>
      </div>
    </center>
  </div>
);

export default SignInIntuit;

[amhinson]

I'm going to work on replicating this, but I have a couple of observations/questions/comments:

---

Can you confirm that you have the OIDC Identity provider enabled in the Cognito User Pool console?

App Integration > App Client Settings Enabled Identity Providers There might be 2 app clients here, so check that both are selected

---

What is Configured?

Auth: {
 region: "us-east-1",
 userPoolId: "us-east-1_v*****Z",
 userPoolWebClientId: "606*******8a"
 aws_cognito_region: "us-east-1",
 aws_project_region: "us-east-1",
 aws_user_pools_id: "us-east-1_v*****Z",
 aws_user_pools_web_client_id: "606********8a",
 oauth: {
   domain: "stage-*****.auth.us-east-1.amazoncognito.com",
   scope: "openid,phone,email,profile,aws.cognito.signin.user.admin,com.intuit.quickbooks.accounting",
   redirectSignIn: "http://localhost:8000",
   redirectSignOut: "http://localhost:8000",
   responseType: "code"
}

The scopes you have in your config are different than what you're mentioning here:

I started to get error about invalid scope. I'm setting it in config like: openid,phone,email,profile

EDIT: The scope should also be an array. Could you try changing your config scopes to scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin']?

[mikalai-okun]

@amhinson sure, please see the screenshot

Also updated scope to an array, still the same issues with invalid scope.

[mikalai-okun]

UPD: resolved issues with Scopes, but still having the original issue with Invalid state with "aws-amplify": "^3.0.20"

[amhinson]

I see you have "Implicit grant" selected as an allowed OAuth Flow. Are you using that? If not, could you try only selecting "Authorization code grant" to see if anything changes in the behavior you're seeing?

[mikalai-okun]

@amhinson Tried both - same results.

[amhinson]

Hmm interesting. Well I don't have an answer yet, but I did find this similar question on Intuit's developer website. Perhaps it could be helpful to reach out to their team as well to help debug.

[mikalai-okun]

This is my questions :) we posted it there as well. It would be the most useful if we can identify the Cognito is actually showing invalid state.

I started comparing the state passed initially, then what was in Intuit and the resulting state, looks like when its landing on cognito we are it cutted almost in half, do you know if there a character limit of how large state value can be?

[amhinson]

Are you using a customState with federatedSignIn by chance? The example you posted above doesn't have it, but I just wanted to check first.

[mikalai-okun]

No, we don't, just regular federatedSignIn, only providing provider name.

<Button onClick={() => Auth.federatedSignIn({provider: 'Intuit'})} ...

[mikalai-okun]

@amhinson I just get a response from Intuit support team, looks like they have limits on how long state could be.

Tried to set a customState, as, but did not work. my version of amplifyjs: 3.0.20

<Button onClick={() => Auth.federatedSignIn({provider: 'Intuit', customState: 'thisismycustomstate'})} basic color='grey' className='custom-intuit-button u-m0'> Test</Button>

Can you please assist on how to overwrite default state creation?

[amhinson]

It looks like the custom state just get tacked on to the end of the generated state, so that unfortunately doesn't help in this situation. https://github.com/aws-amplify/amplify-js/blob/128527c6834bafe37b2f4c6c5fca9029b03a7e3d/packages/auth/src/OAuth/OAuth.ts#L82

However, I am not sure why the state is changing after the first request. You can see in the first URL of the screenshot you posted that the initial state is only 32 characters, but then it is different in the subsequent URLs.

[mikalai-okun]

@amhinson I'm not sure either, but it's not in my control, I raised this issue to the provide and unfortunately the only response I got - we should use smaller size state value.

Should I be raising a PR to allow entirely custom state?

[fjolin-intuit]

@amhinson Intuit limits the size of redirect URLs for security reasons. Would you be able to improve on the customState feature to help reduce the character count? Or is there an upper limit that can be defined?

[zhengligs]

Just wanted to say that we're seeing exactly same problem.

[zhengligs]

I dig a little deeper. There was some misunderstanding on custom state.

There are two auth flows here:

1. App -> Cognito
2. Cognito -> Intuit

We (as Cognito users) can control the custom state in flow 1. I believe the code @amhinson refers to is in flow 1. The default state is only 32 characters. So we don't have problem and don't need custom state actually.

The problematic state is in flow 2. When Cognito sends the authorization request to Intuit, it includes a state that is more than 1000 characters long. That causes Intuit to complain in its OAuth step 2 here: https://developer.intuit.com/app/developer/qbo/docs/develop/authentication-and-authorization/oauth-2.0#step-2-redirect-to-intuits-oauth-2-0-server

Once Cognito got the authorization code in this step, it actually can bypass the step in (near) future request, so we don't see the problem immediately again.

I think to fix this, Cognito should allow us to customize the length of state that it sends to OIDC provider.

We are currently blocked by this. Any chance to bump it up in priority is much appreciated.

[mikalai-okun]

@zhengligs Intuit pushed the fix to allow larger state, it fixed for us. I hope it will work for your implementation as well. Another option - fork and modify repo, while/if amplify will make this an option.

[amhinson]

Oh thats great news @mikalai-okun! Glad things are working for you now. Can you verify if you're still seeing the behavior @zhengligs?

The change for this wouldn't be in the Amplify library, unfortunately, since it is in the Cognito service, as you mentioned in your flow.

[zhengligs]

Yes, indeed, it works fine now. Thanks @mikalai-okun @amhinson

[amhinson]

Ok good to hear! Closing this for now, but open up a new issue if there are others problems in the future.

[zhengligs]

Hey, looks like the bug comes back again. Any idea? @fjolin-intuit Last time we only tested sandbox, but now as we're using production, the bug shows up again. Is it still good for you? @mikalai-okun

[mikalai-okun]

We are using this in production for a while now, no report has been submitted and I personally never encountered this bug after the fix. Our stack - ReactJS with Amplify and Cognito, do you use the same?

Have you tried to debug this in a Cognito hosted UI, opening a network tab, and watching all requests? What exact error you are seeing?

I would recommend copying the initial state issues with Auth request and the state you received on the code exchange from Intuit. If it's not the same, reach out to Intuit support, they may be able to help. If I'm not mistaken, the fix for us was something regarded to nginx settings, it's fair to assume some servers may not have this yet, or some part of infrastructure not on the versions etc.

[zhengligs]

We are using a different front end to connect to Cognito.

The problem, though, is the old problem you discovered: Intuit returns a state that is cut off.

In our case, Cognito sends over state of 1868 characters long:

state=ZXlKMWMyVnlVRzl2YkVsa0lqb2lkWE10WldGemRDMHhYMjVVYURBeGEyRTVSU0lzSW5CeWIzWnBaR1Z5VG1GdFpTSTZJa2x1ZEhWcGRDSXNJbU5zYVdWdWRFbGtJam9pTmpNMWRUTndZMlpxYnpOaWJEZG1ZakJ3TVdjMU1qWTVZbXdpTENKeVpXUnBjbVZqZEZWU1NTSTZJbWgwZEhCek9pOHZjMk55YVhCMExtZHZiMmRzWlM1amIyMHZiV0ZqY205ekwyUXZNV3g2VlVwNmJtZFZZV1kwYjAxalFVUm9kbGxqU3pnMmJsY3hNMVpGYzBkek5XZ3pOVXMyYUUxWFgzUkZOV3hOZW5ReGVIVmZRVFV5TDNWelpYSmpZV3hzWW1GamF5SXNJbkpsYzNCdmJuTmxWSGx3WlNJNkltTnZaR1VpTENKd2NtOTJhV1JsY2xSNWNHVWlPaUpQU1VSRElpd2ljMk52Y0dWeklqcGJJbUYzY3k1amIyZHVhWFJ2TG5OcFoyNXBiaTUxYzJWeUxtRmtiV2x1SWl3aWIzQmxibWxrSWwwc0luTjBZWFJsSWpvaVFVUkZjRU00ZDJZMlRqRTBaV0ZVYzFwRlkyVTFTa0ZtV1dSSExXb3lYMHd4ZFdoNFNFWjZhbXhmTlZkVFdHZFRSVmxQY1ZkcE5XazRUbE5CUlZGVVJIQnVXRFZPTVRWcWJtRnNOWHBoYkdsZllVbzNNMEZSTVZkak1qZHFSM2R0ZEZOS2NVeHlSamxXVVZsbGRXaFZYMkZ5UlZKc01GRk1TVWRDUVdwc1NHZzRhR3BNYzFsamRVVnBjMFJPVGxZMVV6QnplUzFJZHpKR2FsQXlRMUowZW04dFR6bEpNVzVqWlZGNFQycEtWVWxhWmxRdGEzbE5OSG8yWTFoaGNXWlpaVFZoVEdOcFgzWmFWVUpqVFU5a2FFVm5aVFpLY0ZORmMwcFdNSHBVVm5sVE0zaDFibVJEWkhCWFdFeEtTVFoxWHpOQ09IVlliWEZGZW5WcE1Vd3hXVXBYUVU5MGQyRkhabE01Y1NJc0ltTnZaR1ZEYUdGc2JHVnVaMlVpT201MWJHd3NJbU52WkdWRGFHRnNiR1Z1WjJWTlpYUm9iMlFpT201MWJHd3NJbTV2Ym1ObElqb2lVQzE0T0dsTVZXdzVORjlzWTFSSWMyWlFhMWxWU1VOVFVUaG1NbVk0TmxWQ1RHOHlUVVI1ZDBWblZFZDBWV1ZTVTAxbE5Wa3RTR05uWDNSak1tRjFUM2wyZFROTE5rZzRSbTVYU3pWb1NUQnhNRXAyY25aQ2FWSlBUWGxpYWpNMlFYSkhiRlJmWTJ4VlJtUm5lazlFWVdad1ZuVnNVR2x2Y3pacFpWQmxSRWxTYld4amFrcEphRjk0WTI5UWNUUnBTbFJPUTJodVZGUTBOekpCWTFWWFpITlZPVFZyUkVKdllXZFJJaXdpYzJWeWRtVnlTRzl6ZEZCdmNuUWlPaUpuYzJGdGNHeHBabmxsT1RFeVlUYzVOaTFsT1RFeVlUYzVOaTFrWlhZdVlYVjBhQzUxY3kxbFlYTjBMVEV1WVcxaGVtOXVZMjluYm1sMGJ5NWpiMjBpTENKamNtVmhkR2x2YmxScGJXVlRaV052Ym1Seklqb3hOakF6T0RRME5ETTNMQ0p6WlhOemFXOXVJanB1ZFd4c0xDSjFjMlZ5UVhSMGNtbGlkWFJsY3lJNmJuVnNiQ3dpYVhOVGRHRjBaVVp2Y2t4cGJtdHBibWRUWlhOemFXOXVJanBtWVd4elpYMD06Q3BsRFVaOHNnODRWSXBFaXYwN1hETDY5Rm9QcFdFN1ZpemM0cFJvTFdyZz06Mw%3D%3D

When Intuit returns it, it has only the first 1744 characters:

state=ZXlKMWMyVnlVRzl2YkVsa0lqb2lkWE10WldGemRDMHhYMjVVYURBeGEyRTVSU0lzSW5CeWIzWnBaR1Z5VG1GdFpTSTZJa2x1ZEhWcGRDSXNJbU5zYVdWdWRFbGtJam9pTmpNMWRUTndZMlpxYnpOaWJEZG1ZakJ3TVdjMU1qWTVZbXdpTENKeVpXUnBjbVZqZEZWU1NTSTZJbWgwZEhCek9pOHZjMk55YVhCMExtZHZiMmRzWlM1amIyMHZiV0ZqY205ekwyUXZNV3g2VlVwNmJtZFZZV1kwYjAxalFVUm9kbGxqU3pnMmJsY3hNMVpGYzBkek5XZ3pOVXMyYUUxWFgzUkZOV3hOZW5ReGVIVmZRVFV5TDNWelpYSmpZV3hzWW1GamF5SXNJbkpsYzNCdmJuTmxWSGx3WlNJNkltTnZaR1VpTENKd2NtOTJhV1JsY2xSNWNHVWlPaUpQU1VSRElpd2ljMk52Y0dWeklqcGJJbUYzY3k1amIyZHVhWFJ2TG5OcFoyNXBiaTUxYzJWeUxtRmtiV2x1SWl3aWIzQmxibWxrSWwwc0luTjBZWFJsSWpvaVFVUkZjRU00ZDJZMlRqRTBaV0ZVYzFwRlkyVTFTa0ZtV1dSSExXb3lYMHd4ZFdoNFNFWjZhbXhmTlZkVFdHZFRSVmxQY1ZkcE5XazRUbE5CUlZGVVJIQnVXRFZPTVRWcWJtRnNOWHBoYkdsZllVbzNNMEZSTVZkak1qZHFSM2R0ZEZOS2NVeHlSamxXVVZsbGRXaFZYMkZ5UlZKc01GRk1TVWRDUVdwc1NHZzRhR3BNYzFsamRVVnBjMFJPVGxZMVV6QnplUzFJZHpKR2FsQXlRMUowZW04dFR6bEpNVzVqWlZGNFQycEtWVWxhWmxRdGEzbE5OSG8yWTFoaGNXWlpaVFZoVEdOcFgzWmFWVUpqVFU5a2FFVm5aVFpLY0ZORmMwcFdNSHBVVm5sVE0zaDFibVJEWkhCWFdFeEtTVFoxWHpOQ09IVlliWEZGZW5WcE1Vd3hXVXBYUVU5MGQyRkhabE01Y1NJc0ltTnZaR1ZEYUdGc2JHVnVaMlVpT201MWJHd3NJbU52WkdWRGFHRnNiR1Z1WjJWTlpYUm9iMlFpT201MWJHd3NJbTV2Ym1ObElqb2lVQzE0T0dsTVZXdzVORjlzWTFSSWMyWlFhMWxWU1VOVFVUaG1NbVk0TmxWQ1RHOHlUVVI1ZDBWblZFZDBWV1ZTVTAxbE5Wa3RTR05uWDNSak1tRjFUM2wyZFROTE5rZzRSbTVYU3pWb1NUQnhNRXAyY25aQ2FWSlBUWGxpYWpNMlFYSkhiRlJmWTJ4VlJtUm5lazlFWVdad1ZuVnNVR2x2Y3pacFpWQmxSRWxTYld4amFrcEphRjk0WTI5UWNUUnBTbFJPUTJodVZGUTBOekpCWTFWWFpITlZPVFZyUkVKdllXZFJJaXdpYzJWeWRtVnlTRzl6ZEZCdmNuUWlPaUpuYzJGdGNHeHBabmxsT1RFeVlUYzVOaTFsT1RFeVlUYzVOaTFrWlhZdVlYVjBhQzUxY3kxbFlYTjBMVEV1WVcxaGVtOXVZMjluYm1sMGJ5NWpiMjBpTENKamNtVmhkR2x2YmxScGJXVlRaV052Ym1Seklqb3hOakF6T0RRME5ETTNMQ0p6WlhOemFXOXVJanB1ZFd4c0xDSjFjMlZ5UVhSMGNtbGlkWFJsY3lJNmJuVnNiQ3dp

The state has been moved around inside Intuit, from https://appcenter.intuit.com/connect/oauth2 to https://dev-devx-prd-usw2-appsdotcom-reverse-proxy.idg-sgmnt-prod-usw2.iks.a.intuit.com/connect/oauth2 and then to https://appcenter.intuit.com/app/connect/oauth2, without loss of information.

However, after the user is verified, this Initiator sends the incomplete state to https://appcenter.intuit.com/app/connect/oauth2, which then sends to Cognito:

Then when we do the authentication immediately after, that Initiator is not involved, and the correct state is sent back.

So we think the bug is still on the Intuit side. @fjolin-intuit

[mikalai-okun]

@zhengligs is there any way you can force to have a shorter state in your front-end? for Cognito the sate is optional, as I guess, you will need to reach out to Intuit to increase the value they can return.

[zhengligs]

Unfortunately we don't have control of state token length of that front-end and a state token is mandatary there. We've tried to generate the state token there with different arguments. But that doesn't seem to impact how long the state token Cognito will generate. Unless we omit the state token there, Cognito will generate a state that is much shorter (only ~1200 characters). However, it doesn't work for us because for that front end, the state token is a must because it encrypts the callback function to be called. We've tried all sorts of tricks but Cognito doesn't seem to generate shorter state tokens for us.

We've opened a ticket on Intuit's website. Hopefully they can investigate as soon as possible.

[fjolin-intuit]

@mikalai-okun @zhengligs After discussing this with our gateway team last time - they came to the conclusion that 2k would be our max character count for redirect URL but asked that this not be raised again. Can we get someone from Cognito to comment on your suggested solution from yesterday and on September 21st?

The problematic state is in flow 2. When Cognito sends the authorization request to Intuit, it includes a state that is more than 1000 characters long.

This is now 2K limit.

[zhengligs]

We just did a weirdest thing to make the front end we use generate a shorter state token, which in turn makes Cognito generate a shorter state token. And because of that we are fine now. Thanks @mikalai-okun @fjolin-intuit !

[slavco86]

@zhengligs please tell how you managed to make Cognito generate a shorter token?

[aneesrehman]

We just did a weirdest thing to make the front end we use generate a shorter state token, which in turn makes Cognito generate a shorter state token. And because of that we are fine now. Thanks @mikalai-okun @fjolin-intuit !

Can we have some more explanation on this one?

[zhengligs]

Didn't know others still run into this.

So probably a combination of these two things worked out for us:

1. We make our Amazon Cognito domain name as short as possible.
2. Make the callback function name as short as possible(one character basically).

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.