CODEWITHSUNDEEP
angularoauth-2.0amazon-cognitoaws-amplify
Arjun Sunil Kumar
Arjun Sunil Kumar

Reputation: 1838

Bad Request is returned when Amplify is configured for hosted UI in Angular 6

Was going through the documentation of Amplify, to configure AWS Cognito hosted UI in Angular 6. Getting 400 Bad request after login.

Below is the info:

  1. In main.ts AWS Amplify was configured.
Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: 'us-east-1_XXXX',
    userPoolWebClientId: 'CLIENT_ID',
    oauth: {
      domain: 'IDP.auth.us-east-1.amazoncognito.com',
      scope: ['openid'],
      redirectSignIn:  'http://localhost:4200/',
      redirectSignOut: 'http://localhost:4200/',
      responseType: 'code', 
      options: {
        AdvancedSecurityDataCollectionFlag: true
      }
    }
  }
});
  1. In the app-component.ts:
 import { Auth} from 'aws-amplify';

 onLoginClick() {
    Auth.federatedSignIn();
 }
  1. Chrome console logs.

screen 1

screen 2

  1. Network Tab.

Network Tab

Upvotes: 1

Views: 2359

Answers (1)

Arjun Sunil Kumar
Arjun Sunil Kumar

Reputation: 1838

Finally found the solution.

  1. We need to create User Pool without generating client_secret.

User Pool

  1. Updated package.json
    "aws-amplify": "1.1.28",
    "@aws-amplify/ui": "1.0.19",
  1. Disabled analytics:
Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: 'us-east-1_XXXX',
    userPoolWebClientId: 'client_id',
    oauth: {
      domain: 'idp.auth.us-east-1.amazoncognito.com',
      scope: ['openid'],
      redirectSignIn:  'http://localhost:4200/',
      redirectSignOut: 'http://localhost:4200/',
      responseType: 'code',
      options: {
        AdvancedSecurityDataCollectionFlag: true
      }
    }
  },
  Analytics:{
    disabled:true
  }
});

Output: Output

Upvotes: 2

Related Questions