AWS Amplify React GET request error - missing authentication token

Question

I am using AWS Amplify in my react app to call my API hosted in API Gateway with AWS_IAM authorization. When I set authorization to NONE, everything works fine in my react app.

However, when I set authorization to AWS_IAM and execute my API using API.get() from Amplify like the code below:

const notes = await API.get('notes', '/notes', init);

I get an error message like:

{
    "message": "Missing Authentication Token",
    "err": "missing auth"
}

So I tried to use aws-api-gateway-cli-test to test my API gateway. Through the script, I was able to get a valid credential, get authenticated and correct response. I have also tried the POSTMAN with my admin credentials and it worked as well.

After doing some research, I saw people referring this to CORS issue. I have double checked my API gateway settings and confirmed that I have enabled CORS. The same issue persists.

Through the debugging feature of aws-amplify, I was able to see the signing process in my Chrome inspector. The signing process was performed properly with some accessKey and secretKey. I pulled those keys out of the inspector into my POSTMAN and tried to get.

These credentials are not valid and I received the following error message:

{
    "message": "The security token included in the request is invalid.",
    "err:": "default"
}

Update: I forgot to copy session token into POSTMAN. Now with all credentials generated by my app I am able to get correct result from my API in POSTMAN. Just not in my app.

At this point, it is pretty obvious to me that it is an auth problem. However, I have been using aws-amplify for sign-in and get process. Pretty sure the signing process is done by amplifying behind the scenes.

I have spent 3 days on this problem and basically tried everything... Any ideas on why it doesn't work?

P.S. A lot of people have suggested that typos in the invoke URL could lead to this issue. I have double checked and there is no typo. Below is my amplify configure code:

Amplify.configure({
    Auth: {
        mandatorySignIn: true,
        region: config.cognito.REGION,
        userPoolId: config.cognito.USER_POOL_ID,
        identityPoolId: config.cognito.IDENTITY_POOL_ID,
        userPoolWebClientId: config.cognito.APP_CLIENT_ID
    },
    Storage: {
        region: config.s3.REGION,
        bucket: config.s3.BUCKET,
        identityPoolId: config.cognito.IDENTITY_POOL_ID
    },
    API: {
    endpoints: [
        {
            name: "notes",
            endpoint: config.apiGateway.URL,
            region: config.apiGateway.REGION
        }
    ]
    }
});

Ministerial

Cognito pools need a Identity pool to specify what AWS resources are accessible for users with temporary credentials obtained from the Cognito Identity Pool. This Identity pool must have your user pool as an Authenticated Identity with a Policy that allows it to invoke API Gateway. Can you confirm this is set up correctly? - It sounds like it is.. just want to check :) – Catchup

@Catchup Thanks for your comment and my set up was good. I have just resolved my problem. I have had Authorization for OPTIONS method under Resources in API Gateway to be AWS_IAM. However when my browser send a request it will send one to OPTIONS first to check for certain headers without the credentials in this request. Since I set OPTIONS with IAM authorization, the OPTIONS method then checked against IAM with this request without my credentials. This is why I received "Missing Authentication Token". – Ministerial

Answer 1

Just resolved my problem - I have had Authorization settings for OPTIONS method to be AWS_IAM under Resources in API Gateway. However when my browser send a request it will send one to OPTIONS first to check for certain headers without the credentials in this request.

Since I set OPTIONS with IAM authorization, the OPTIONS method then checked against IAM with this request without my credentials. This is why I received "Missing Authentication Token".

Ministerial

what is the solution ? – Roundhead

Answer 2

The problem was this in my case:

import { Auth } from 'aws-amplify';
import { API } from 'aws-amplify';

I know, I now it's banal. This why I should't code when I am exausted.

Lemures