amplify-js: Cognito Hosted UI showing Invalid state error

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:

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

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

Screenshots Invalid State screen

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 36 (10 by maintainers)

Most upvoted comments

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 !

zhengligs on Oct 29, 2020

@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.

fjolin-intuit on Oct 29, 2020