signInWithRedirect always fails with signInWithRedirect_failure (Using Cognito)

[elatour2000]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

# Put output below this line

Describe the bug

We have configured a website to using cognito with aws-amplity version 5 and we had that working fine. When I upgraded to 6 and tried to do the same thing it fails.

aws-amplify version 5:
Using the Auth library we could login with:

Auth.federatedSignIn();
and logout with:
Auth.signOut();

and we used the Hub to see the response messages:
Hub.listen('auth', ({ payload: { event } }) => {...}

We used the aws.export.ts file for the configuration:

import { environment } from './environment';

const awsmobile = {
    aws_project_region: environment.aws.region,
    aws_cognito_region: environment.aws.region,
    aws_user_pools_id: environment.aws.poolid,
    aws_user_pools_web_client_id: environment.aws.webclientid,
    oauth: {
        domain: environment.aws.domain,
        scope: [
            'email',
            'openid',
            'aws.cognito.signin.user.admin'
        ],
        redirectSignIn: environment.aws.redirectSignIn,
        redirectSignOut: environment.aws.redirectSignOut,
        responseType: 'code'
    }
};

export default awsmobile;

and we loaded the configuration:

import Amplify from 'aws-amplify';
import amplify from './environments/aws.exports';
Amplify.configure(amplify);

Next we upgraded to aws-amplify 6 (6.0.20) and have the following:

We needed to update the login method to: signInWithRedirect(); and the logout method to: signOut()

https://docs.amplify.aws/javascript/tools/libraries/configure-categories/

We updated the configuration file to JSON:

const aws_amplify_config = {
  Auth: {
    Cognito: {
      userPoolClientId: environment.aws.webclientid,
      userPoolId: environment.aws.poolid,
      region: environment.aws.region,
      loginWith: {
        oauth: {
          domain: environment.aws.domain,
          scopes: ['openid email aws.cognito.signin.user.admin '],
          redirectSignIn: [environment.aws.redirectSignIn],
          redirectSignOut: [environment.aws.redirectSignOut],
          responseType: 'code',
        },
        email: true,
      }
    }
  }
};

And we had to load the configurations like this:

// Configure Amplify
const cognito = new CustomCognitoCredentialsProvider();
Amplify.configure(aws_amplify_config as ResourcesConfig,
    {
    Auth: {
      // Supply the custom credentials provider to Amplify
      credentialsProvider: cognito
    },
  });

We created a new class for the CustomCognitoCredentialsProvider based on this code: https://docs.amplify.aws/javascript/build-a-backend/auth/advanced-workflows/#identity-pool-federation

We used the Hub to catch all of the messages. When the login is called we are redirected to the correct cognito page and when we try and login we get the following error reported in the Hub:

signInWithRedirect_failure

So clearly the redirectSignIn option of the configuration seems to be working, but I feel like another part of the configuration may be missing given the error code that we get back.

Npm version: 10.5.0
Node Version: v21.7.1

Expected behavior

I expect the redirect call to be able to launch the cognito page and I should be able to login and be redirected with a token to my application.

Reproduction steps

1. install Npm version: 10.5.0, Node Version: v21.7.1, aws-amplify 6 (6.0.20)
2. Configure AWS Cognito with a User Pool
3. Try and login with the following method: signInWithRedirect()
4. Setup a Hub to listen for the response to the sign in and you will get a signInWithRedirect_failure

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

const aws_amplify_config = {
Auth: {
Cognito: {
userPoolClientId: environment.aws.webclientid,
userPoolId: environment.aws.poolid,
region: environment.aws.region,
loginWith: {
oauth: {
domain: environment.aws.domain,
scopes: ['openid email aws.cognito.signin.user.admin '],
redirectSignIn: [environment.aws.redirectSignIn],
redirectSignOut: [environment.aws.redirectSignOut],
responseType: 'code',
},
email: true,
}
}
}
};

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[nadetastic]

Hi @elatour2000 thank you for opening this issue - one question i have is to better understand why you are passing the cognito credentials provider. By default, since you are already using cogntio, you shouldn't need to do this. The credentials provider is useful for when you as doing some customizations.

Could you try just passing the ResourceConfig without the credentials provider (especially if you don't need it) to see if you have an issue?

[elatour2000]

That worked! Thank you very much for your help. I'll close this issue.