amplify-cli: Multiple authorization type with Amplify CLI problems? Getting 401 error when calling angular API mutation to create a record with a logged-in user, using authentication API with @auth {allow: owner}

Describe the bug I am getting a 401 error when using a type with @auth { allow: owner } and trying to create a new record for that type, via a mutation, by using the Angular API service auto-generated code.

To Reproduce Here is the entire schema that produced this error (the relevant type to look at is type PrivateTrack as the error is caused when calling the generated angular service function CreatePrivateTrack, but I am providing the entire schema for reference):

type Search
  @model(subscriptions: null)
  @auth(
    rules: [
      { allow: public, provider: iam, operations: [create, update, read] }
    ]
  )
  @key(fields: ["normalizedQuery"])
{
  normalizedQuery: String!
  titles: String!
  nTimes: Float!
  nTimesInLast24h: Int!
  updatedAt: AWSTimestamp!
  titlesUpdatedAt: AWSTimestamp!
}

type PrivateTrack
  @model
  @auth(rules: [{ allow: owner } ])
{    
  id: ID!
  path: String!
}

type PublicTrack
  @model
  @auth(
    rules: [
      { allow: owner },
      { allow: public, provider: iam, operations: [read] }
    ]
  )
{
  id: ID!
  path: String!
}

Steps to reproduce the behavior:

1. Using the above schema, I did:

   amplify delete
   amplify init
   amplify add api (adding IAM and Cognito user pools here)
   amplify push
   

Then I always needed a manual step – to check the checkbox in Cognito, for the created Identity pool, that allows it to have UnAuthorized access. I always have to do that manual step…

Here’s a transcript of the above sequence of operations (before the manual step described above):

(2037) dorontal@thing5: amplify init
... 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.
...
(2038) dorontal@thing5: amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: tracktunes
? Choose the default authorization type for the API IAM
? Do you want to configure advanced settings for the GraphQL API Yes, I want to make some additional changes.
? Configure additional auth types? Yes
? Choose the additional authorization types you want to configure for the API Amazon Cognito User Pool
Cognito UserPool configuration
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito. 

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? Yes, I want to make some additional changes.
 Warning: you will not be able to edit these selections. 
 What attributes are required for signing up? Email
 Do you want to enable any of the following capabilities? Email Verification Link with Redirect
? Enter the URL that your users will be redirected to upon account confirmation: https://explore.tracktunes.org/#/app/registration-redirect
? Enter the subject for your custom account confirmation email: Welcome to Tracktunes music collaboration!
? Enter the body text for your custom account confirmation email (this will appear before the link URL): Please click the link below to confirm (and complete) your registration:
Succesfully added the Lambda function locally
? Do you want to edit your verification-link function now? No
Successfully added auth resource
? Configure conflict detection? No
? Do you have an annotated GraphQL schema? Yes
? Provide your schema file path: schema.graphql

GraphQL schema compiled successfully.
...
(2039) dorontal@thing5: amplify push
...
# everything succeeded in the push, without a single complaint

1. I then can use the generated (angular) API service code to successfully
   • Sign up a new user into the newly created user pool
   • Send the email confirmation and confirm / complete the new user’s sign-up process
   • Log in with the newly confirmed user’s email and password (this is an email-only setup) Everything works perfectly up to here.
   • Use the generated code (in an angular API service) to create a new entry via the mutation function call CreatePrivateTrack, I get a 401 “Unauthorized Error” response.

Expected behavior

I expected not to get a 401 error, since this is the only user and since the user is enabled and confirmed and sincce { allow: owner } was used in the schema, this user should be permitted to create a PrivateTrack record via the above function call.

Code Snippet

1. When I try to use the code to create a new entry for a new track, via the mutation call CreatePrivateTrack I get a 401 error. Here’s the function call that generates this 401 error:

   this.awsAPI.CreatePrivateTrack({ path: 'test-path' }).then((res: any) => {
       console.log('successfully created a private track!', res);
   });
   
   

   And here is the console error in the browser:

   core.js:6014 ERROR Error: Uncaught (in promise): Object: {"data":{},"errors":[{"message":"Request failed with status code 401"}]}
   

   In other words, getting a 401 error, even though I did verify in the Cognito Console that this user, with the username that was supplied in the function call matches the username and that this user is enabled and that this user’s account status says ‘CONFIRMED’.

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

What is Configured? If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.

  See above.

• Which resources do you have configured?

  • Here is my aws-exports file:

  const awsmobile = {
      "aws_project_region": "us-east-1",
      "aws_cognito_identity_pool_id": "us-east-1:5050e9e0-ba3e-42af-9ecc-5b164935d0e8",
      "aws_cognito_region": "us-east-1",
      "aws_user_pools_id": "us-east-1_O678oxx1g",
      "aws_user_pools_web_client_id": "7pu8d730imn7bi114fsep1s5q7",
      "oauth": {},
      "aws_appsync_graphqlEndpoint": "https://r5hrmpqtbvephaic43zl2rm5uu.appsync-api.us-east-1.amazonaws.com/graphql",
      "aws_appsync_region": "us-east-1",
      "aws_appsync_authenticationType": "AWS_IAM"
  };
  

• If applicable, please provide your manual configuration example:

  No manual configuration was used.

• If applicable, provide more configuration data, for example for Amazon Cognito, run aws cognito-idp describe-user-pool --user-pool-id us-west-2_xxxxxx (Be sure to remove any sensitive data) I ran the above command, it is not useful here.

Environment

<Please run the following command inside your project and copy/paste the output into the codeblock:>

(2041) dorontal@thing5: npx envinfo --system --binaries --browsers --npmPackages
npx: installed 1 in 0.983s

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 4.11 GB / 11.56 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 12.0.0 - /usr/local/bin/node
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 68.7.0esr
  npmPackages:
    @angular-devkit/build-angular: ~0.803.20 => 0.803.26 
    @angular/cli: ~8.3.23 => 8.3.26 
    @angular/common: ~8.2.14 => 8.2.14 
    @angular/compiler: ~8.2.14 => 8.2.14 
    @angular/compiler-cli: ~8.2.14 => 8.2.14 
    @angular/core: ~8.2.14 => 8.2.14 
    @angular/forms: ~8.2.14 => 8.2.14 
    @angular/language-service: ~8.2.14 => 8.2.14 
    @angular/platform-browser: ~8.2.14 => 8.2.14 
    @angular/platform-browser-dynamic: ~8.2.14 => 8.2.14 
    @angular/router: ~8.2.14 => 8.2.14 
    @aws-amplify/api: ^3.1.7 => 3.1.7 
    @aws-amplify/pubsub: ^3.0.8 => 3.0.8 
    @ionic-native/core: ^5.0.7 => 5.24.0 
    @ionic-native/splash-screen: ^5.0.0 => 5.24.0 
    @ionic-native/status-bar: ^5.0.0 => 5.24.0 
    @ionic/angular: ^5.0.0 => 5.0.7 
    @ionic/angular-toolkit: ^2.1.1 => 2.2.0 
    @types/jasmine: ^3.5.6 => 3.5.10 
    @types/jasminewd2: ^2.0.8 => 2.0.8 
    @types/node: ^13.7.4 => 13.13.2 
    aws-amplify: ^3.0.8 => 3.0.8 
    aws-amplify-angular: ^5.0.8 => 5.0.8 
    codelyzer: ^5.0.0 => 5.2.2 
    core-js: ^2.5.4 => 2.6.11 
    eslint: ^6.8.0 => 6.8.0 
    jasmine-core: ~3.4.0 => 3.4.0 
    jasmine-spec-reporter: ~4.2.1 => 4.2.1 
    karma: ^4.4.1 => 4.4.1 
    karma-chrome-launcher: ~2.2.0 => 2.2.0 
    karma-coverage-istanbul-reporter: ~2.0.1 => 2.0.6 
    karma-jasmine: ~2.0.1 => 2.0.1 
    karma-jasmine-html-reporter: ^1.4.0 => 1.5.3 
    protractor: ~5.4.0 => 5.4.4 
    rxjs: ~6.5.1 => 6.5.5 
    ts-node: ~7.0.0 => 7.0.1 
    tslib: ^1.9.0 => 1.11.1 
    tslint: ~5.15.0 => 5.15.0 
    typescript: ~3.4.3 => 3.4.5 
    zone.js: ~0.9.1 => 0.9.1 
  npmGlobalPackages:
    @aws-amplify/cli: 4.18.1
    @ionic/cli: 6.6.0
    npm: 6.14.4

Smartphone (please complete the following information):

Not a smartphone - running in Chromium browser on desktop with the following version information Version 80.0.3987.162 (Developer Build) built on Debian 10.3, running on Debian 10.3 (64-bit)