Amplify-js: Cognito authorization code grant flow does not work

[arthi-j]

Describe the bug
Using the authorization code grant flow with Cognito results in an invalid_grant error. The call to the /token end point is made twice. The first call goes through successfully while the second fails because it is missing the code_verifier attribute. This fails the authentication. In our case, we are using an OIDC federated identity provider.

A similar issue has been raised in the past - 3592

To Reproduce
Steps to reproduce the behavior:

Running on:
"aws-amplify": "^3.0.19",
"react": "^16.13.1"

Create an Amplify project that integrates with Cognito. Set up federation to an OIDC provider from Cognito and test the OAuth authorization code grant flow.

Expected behavior
A single call to Cognito's /token endpoint.

Code Snippet
Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

Screenshots
If applicable, add screenshots to help explain your problem.

What is Configured?

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 106.66 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Firefox: 68.8.0
    Safari: 13.1.2
  npmPackages:
    @apollo/react-hooks: ^3.1.5 => 3.1.5 
    @aws-amplify/auth: ^3.3.0 => 3.3.0 
    @aws-amplify/ui-react: ^0.2.10 => 0.2.10 
    @aws-cdk/aws-iam: ^1.50.0 => 1.50.0 
    @aws-cdk/core: ^1.50.0 => 1.50.0 
    @date-io/date-fns: ^2.6.2 => 2.6.2 
    @graphql-codegen/cli: 1.16.3 => 1.16.3 
    @graphql-codegen/typescript: 1.16.3 => 1.16.3 
    @graphql-codegen/typescript-operations: 1.16.3 => 1.16.3 
    @graphql-codegen/typescript-react-apollo: 1.16.3 => 1.16.3 
    @material-ui/core: ^4.11.0 => 4.11.0 
    @material-ui/icons: ^4.9.1 => 4.9.1 
    @material-ui/lab: ^4.0.0-alpha.56 => 4.0.0-alpha.56 
    @material-ui/pickers: ^3.2.10 => 3.2.10 
    @material-ui/system: ^4.9.14 => 4.9.14 
    @testing-library/jest-dom: ^4.2.4 => 4.2.4 
    @testing-library/react: ^9.3.2 => 9.5.0 
    @testing-library/user-event: ^7.1.2 => 7.2.1 
    @types/file-saver: ^2.0.1 => 2.0.1 
    @types/jest: ^24.0.0 => 24.9.1 
    @types/jwt-decode: ^2.2.1 => 2.2.1 
    @types/lodash: ^4.14.157 => 4.14.157 
    @types/luxon: ^1.24.1 => 1.24.1 
    @types/node: ^12.0.0 => 12.12.48 
    @types/react: ^16.9.41 => 16.9.41 
    @types/react-dom: ^16.9.8 => 16.9.8 
    @types/react-router-dom: ^5.1.5 => 5.1.5 
    apollo-cache-inmemory: ^1.6.6 => 1.6.6 
    apollo-client: ^2.6.10 => 2.6.10 
    apollo-link: ^1.2.14 => 1.2.14 
    apollo-link-error: ^1.1.13 => 1.1.13 
    apollo-link-http: ^1.5.17 => 1.5.17 
    apollo-link-schema: ^1.2.5 => 1.2.5 
    aws-amplify: ^3.0.19 => 3.0.19 
    aws-appsync-auth-link: ^2.0.2 => 2.0.2 
    aws-appsync-subscription-link: ^2.2.0 => 2.2.0 
    date-fns: ^2.14.0 => 2.14.0 
    file-saver: ^2.0.2 => 2.0.2 
    graphql: ^14.7.0 => 14.7.0 
    graphql-tag: ^2.10.3 => 2.10.3 
    graphql-tools: ^5.0.0 => 5.0.0 
    graphql.macro: ^1.4.2 => 1.4.2 
    html-docx-js-typescript: ^0.1.5 => 0.1.5 
    html-to-image: ^0.1.1 => 0.1.1 
    husky: ^4.2.5 => 4.2.5 
    jwt-decode: ^2.2.0 => 2.2.0 
    lint-staged: ^10.2.11 => 10.2.11 
    luxon: ^1.24.1 => 1.24.1 
    prettier: 2.0.5 => 2.0.5 
    query-string: ^6.13.1 => 6.13.1 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-hook-form: ^6.0.2 => 6.0.2 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-scripts: 3.4.1 => 3.4.1 
    tableau-api: ^2.2.3 => 2.2.3 
    tableau-react: ^1.2.2 => 1.2.2 
    ts-toolbelt: ^6.9.9 => 6.9.9 
    typescript: ~3.7.2 => 3.7.5 
  npmGlobalPackages:
    @aws-amplify/cli: 4.24.1
    aws-cdk: 1.49.1
    cordova: 6.5.0
    npm: 6.4.1
    serverless: 1.14.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
This PR was supposed to have fixed the issue when it was originally raised

[CompleteScone]

I'm seeing a very similar issue with authenticating through an OIDC provider, but only with the Microsoft Edge browser (non-Beta version). I'm not able to reproduce the issue in Chrome, Edge Beta (Chromium version), or Safari. Looking at differences in request bodies, the Edge call is missing the code_verifier attribute.
Interestingly, if I authenticate via the Cognito User Pool it successfully passes the code_verifier attribute in Edge.
Also, switching to use responseType: 'token' works, but responseType: 'code' doesn't.

I'm running:
"@aws-amplify/auth": "~3.3.1",

[reven33]

Hi Arthi,

Could you figure out what is the root cause for missing code_verifier when calling token endpoint? I meet the same issue but cannot find a solution to fix. I would really appreciate if any help or clue

[richiewebgate]

bump.. any progress on this one?

[hyprstack]

Having the exact same issue with a react app on chrome! Trying to authenticate with google. Sometimes it works and sometimes it doesn't. It's always sending two POST requests to the token endpoint where the first succeeds and the second fails when it works. When it doesn't work, both requests fail. In the failing requests the code_verifier is missing from the request body.