React app with Cognito User pool: Not authorized to access API

Question

I started with a new React project with AWS Amplify (using the Authenicator from the aws-amplify-react library), added an API and Auth with API Key and Cognito user pool. I'm able to log in with a user from my Cognito user pool and query and mutate my items in DynamoDB over the GraphQL API in the React client.   
  
Until this point, everything was authorized by the API Key which should only allow read access for unauthenticated users. To restrict access to regsitered users, I added the following @Auth annotations in the model:

```
type Event @model 
  @auth(
    rules: [
      { allow: owner, operations: [create, update, delete], ownerField: "username" },
      { allow: public }
    ]
  )
  @key( 
...
```

When I now try to create a new item (an event in the my app), I get this error:  
**Not Authorized to access createEvent on type Mutation**  
  
Even though I'm logged in with a user from Cognito, the API is accessed with the API key. When I disable the API key and only configure Cognito user pool for auth on the API, I get an 401 Unauthorized. When calling the GraphQL mutations, my credentials are not provided. Also the owner field is not set. Did I miss something in my settings?

Answer

I found a solution by setting the following parameter on each request:

```
authMode: "AMAZON_COGNITO_USER_POOLS"
```

In retrospect, it seems logical to set the authMode on a query or mutation if you have multiple auth options configured. However, many tutorials and documentation only cover how to add authentication to the project and configure the @model with @auth. The fact that the auth mode has to be specified for every query or mutation is often not described in detail.

React app with Cognito User pool: Not authorized to access API

Relevant content