OAuth - Error handling auth response. Error: invalid_grant

[D0berm4n]

Describe the bug
Sign in fails from time to time after redirect from hosted ui using vue-components

To Reproduce
Steps to reproduce the behavior:

1. Click on sign in with aws
2. Go to hosted ui
3. Sign in with hosted ui

Expected behavior
User is signed in

Code Snippet
Here is my Authenticator component

<template>
  <amplify-authenticator username-alias="email">
    <sign-in slot="sign-in" :signIn="federatedSignIn"></sign-in>
    <slot v-if="authenticated" v-bind:logout="logout"></slot>
  </amplify-authenticator>
</template>

<script>
  import { Auth, Hub } from 'aws-amplify';
  import SignIn from './SignIn';
  import { createNamespacedHelpers } from 'vuex';

  const { mapState, mapActions } = createNamespacedHelpers('auth');

  export default {
    name: 'Authenticator',
    components: { SignIn },
    computed: mapState([
      'authenticated',
      'user',
    ]),
    methods: {
      ...mapActions([
        'signIn',
        'signOut',
      ]),
      async federatedSignIn() {
        try {
          await Auth.federatedSignIn();
        } catch (error) {
          console.log('error signing in: ', error);
        }
      },
      async logout() {
        try {
          window.localStorage.setItem('amplify-signin-with-hostedUI', 'true');
          await Auth.signOut();
        } catch (error) {
          console.log('error signing out: ', error);
        }
      }
    },

    mounted() {
      Hub.listen('auth', ({ payload: { event, data } }) => {
        switch (event) {
          case 'signIn':
            this.signIn(data.attributes);
            break;
          case 'signOut':
            this.signOut();
            break;
        }
      });
    },
  };
</script>

Screenshots

What is Configured?

{
Auth: {
 mandatorySignIn: true,
 region: getEnvVariable('VUE_APP_COGNITO_REGION'),
 userPoolId: getEnvVariable('VUE_APP_COGNITO_USERPOOL_ID'),
 userPoolWebClientId: getEnvVariable('VUE_APP_COGNITO_USERPOOL_WEBCLIENT_ID'),
 oauth: {
   domain: getEnvVariable('VUE_APP_COGNITO_OAUTH_DOMAIN'),
   scope: ['email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
   redirectSignIn: getEnvVariable('VUE_APP_COGNITO_OAUTH_REDIRECT_URL'),
   redirectSignOut: `${getEnvVariable('VUE_APP_COGNITO_OAUTH_REDIRECT_URL')}/logout`,
   responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
 }
}
}

Environment

 System:
    OS: Windows 10 10.0.18362
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 6.23 GB / 15.95 GB
  Binaries:
    Node: 12.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @aws-amplify/ui-vue: ^0.2.2 => 0.2.2
    @fullhuman/postcss-purgecss: ^2.1.2 => 2.1.2
    @vue/cli-plugin-babel: ~4.3.0 => 4.3.1
    @vue/cli-plugin-eslint: ~4.3.0 => 4.3.1
    @vue/cli-plugin-router: ~4.3.0 => 4.3.1
    @vue/cli-plugin-unit-jest: ~4.3.0 => 4.3.1
    @vue/cli-plugin-vuex: ~4.3.0 => 4.3.1
    @vue/cli-service: ~4.3.0 => 4.3.1
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31
    autoprefixer: latest => 9.7.6
    aws-amplify: ^3.0.11 => 3.0.11
    axios: ^0.19.2 => 0.19.2
    babel-eslint: ^10.1.0 => 10.1.0
    core-js: ^3.6.4 => 3.6.5
    eslint: ^6.7.2 => 6.8.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    final-form: ^4.19.1 => 4.19.1
    lodash: latest => 4.17.15
    moment: ^2.25.3 => 2.25.3
    purgecss: ^2.1.2 => 2.1.2
    query-string: ^6.12.1 => 6.12.1
    sass: ^1.26.3 => 1.26.3
    sass-loader: ^8.0.2 => 8.0.2
    tailwindcss: ^1.2.0 => 1.2.0
    vue: ^2.6.11 => 2.6.11
    vue-drawer-layout: ^1.3.0 => 1.3.0
    vue-final-form: ^3.0.1 => 3.0.1
    vue-router: ^3.1.6 => 3.1.6
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-toasted: ^1.1.28 => 1.1.28
    vue2-daterange-picker: ^0.5.0 => 0.5.0
    vue2-filters: ^0.11.0 => 0.11.0
    vuetable-2: ^2.0.0-beta.4 => 2.0.0-beta.4
    vuex: ^3.1.3 => 3.1.3
    vuex-persist: ^2.2.0 => 2.2.0
  npmGlobalPackages:
    @vue/cli: 4.3.1
    gatsby-cli: 2.8.3

[Jun711]

@D0berm4n
There seems to be 2 token request. You probably configured Amplify twice. Check this #3185 (comment) out

[D0berm4n]

@D0berm4n
There seems to be 2 token request. You probably configured Amplify twice. Check this #3185 (comment) out

I am prety shure that it is configured once but it's true that there are 2 token requests.

[xmluozp]

In my case, I deleted my AmplifySignOut button, use Auth.signOut() instead, then everything came back to normal.

[sammartinez]

@D0berm4n Are you still looking for help on this use case? Please let us know.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[iGokulYadav]

@D0berm4n Are you still looking for help on this use case? Please let us know.

Yes Facing the same issue

[kses0002]

I am facing the same issue too. I've read a bunch of documentation and posts, but I still face the problem of my sign in sometimes failing

[giulioambrogi]

Facing this issue too on 7.5.5

[github-actions]

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.