Security token is invalid when calling API using AWS Amplify & Cognito

Question

I'm trying to install AWS Amplify in an existing angular project. I'm using Cognito User Pool with Cognito Federated Identity. I'm able to login but when I tried to call my API I got the message {"message":"The security token included in the request is invalid."} with a 403 Forbidden status code.

My API is deployed on API Gateway using the Serverless Framework with this setup. I have cors enabled and the authorizer set as aws_iam.

// serverless.yml
frameworkVersion: ">=1.28.0 <2.0.0"

provider:
  name: aws
  runtime: go1.x

// --- omitted

functions:
  get_devices:
    handler: bin/get_devices
    events:
      - http:
          path: devices
          method: get
          cors: true
          authorizer: aws_iam

Amplify is configured in the file main.ts

// main.ts
const { userPoolId, identityPoolId, userPoolWebClientId, endpoint } = environment;
Amplify.configure({
    Auth: {
        region: 'us-east-1',
        identityPoolId,
        userPoolId,
        userPoolWebClientId
    },
    API: {
        endpoints: [
            {
                name: 'API',
                endpoint,
            },
        ]
    }
});

I call my API using the following code

@Injectable()
export class DevicesService {
    private api: APIClass;

    constructor(private http: HttpClient,
                private httpUtils: HttpUtilsService) {
        this.api = API;
    }

    findDevices(queryParams: QueryParamsModel): Observable<QueryResultsModel> {
        const promise = this.api.get('myAPI', '/devices', {});
        return from(promise).pipe(
            map((devices) => {
                console.log(devices);
                return devices;
            })
        );
    }
}

I have the following request headers

Host: id.execute-api.us-east-1.amazonaws.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0
Accept: application/json, text/plain
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:4200/dashboard/(devices)
x-amz-date: 20190410T171055Z
Authorization: AWS4-HMAC-SHA256 Credential=undefined/20190410/us-east-1/execute-api/aws4_request, SignedHeaders=host;x-amz-date, Signature=920b1f832c6dfessssss8c3a0a0783848740dde68eaec95d3b35935
Origin: http://localhost:4200

And the following response headers

HTTP/2.0 403 Forbidden
content-type: application/json
content-length: 68
date: Wed, 10 Apr 2019 17:10:56 GMT
x-amzn-requestid: 9ab88ba9-5bb3-11e9-8467-e798767662220e
x-amzn-errortype: UnrecognizedClientException
x-amz-apigw-id: 67768JJDGGUYZ_SQ=
x-cache: Error from cloudfront
via: 1.1 5721f7035c3fc934bd3f96dbb04ba1e5.cloudfront.net (CloudFront)
x-amz-cf-id: hFy34Mv1OJBJF47UCT3wg0APyGYl0I4tgqw-K2ZeA==
X-Firefox-Spdy: h2

I hope someone will be able to help me with that. Thank you.

There is a `Credential=undefined/` if that helps you – Tobin Apr 10 '19 at 17:32 — Tobin, Apr 10 '19 at 17:32
@Tobin Not really but it's a good place to start. – severin.julien Apr 11 '19 at 07:30 — severin.julien, Apr 11 '19 at 07:30

score 1 · Accepted Answer · answered Apr 12 '19 at 17:54

I have finally found the solution to this issue after days of searching.

First step was to set the log level of amplify to at least DEBUG, so you can see what was going on.

The problem is that Amplify wasn't able get the credentials saved in local-storage when calling the API because of the following issue.

[DEBUG] 48:49.870 AuthClass - getting session failed TypeError: Cannot read property 'Stream' of undefined
    at Object.computeSha256 (util.js:705)
    at Request.COMPUTE_SHA256 (event_listeners.js:142)
    at Request.callListeners (sequential_executor.js:105)
    at Request.emit (sequential_executor.js:81)
    at Request.emit (request.js:683)
    at Request.transition (request.js:22)
    at AcceptorStateMachine.runTo (state_machine.js:14)
    at state_machine.js:26
    at Request.<anonymous> (request.js:38)
    at Request.<anonymous> (request.js:685)

In that case Amplify just call the API without any signing, so that the cause of the 403 Forbidden.

The solution was to put the polyfill to window not in polyfill.ts but in index.html like so:

<script>
    if (global === undefined) {
        var global = window;
    }

    // If you need debug message from amplify
    window['LOG_LEVEL'] = 'DEBUG';
</script>

At last it's working.

Security token is invalid when calling API using AWS Amplify & Cognito

1 Answers1