title: Missing Headers aws-amplify + angular 5.x
body: <p>I'm building a project using <a href="https://angular.io/" rel="nofollow noreferrer">angular 5.x</a> and <a href="https://github.com/aws/aws-amplify" rel="nofollow noreferrer">aws-amplify</a>. I successfully managed to sign-up, confirm and sign-in my users via <a href="https://eu-central-1.console.aws.amazon.com/cognito/" rel="nofollow noreferrer">aws-cognito</a> and now, I would like to retrieve user's <code>jwt</code> to add it at requests header to perform CRUD operations on my <a href="http://aws.amazon.com/DynamoDB%E2%80%8E" rel="nofollow noreferrer">dynamoDb</a> collection.</p>
  
  <p>Unluckily, when I try to perform such operation on dynamo I get the following error:</p>
  
  <pre><code>{
      "message": "Authorization header requires 'Credential' parameter. Authorization header requires 'Signature' parameter. Authorization header requires 'SignedHeaders' parameter. Authorization header requires existence of either a 'X-Amz-Date' or a 'Date' header. Authorization=xxxxx"
  }
  </code></pre>
  
  <p>I get user's token using the following <strong>Cognito.service</strong>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  /** rxjs **/
  import { fromPromise } from 'rxjs/observable/fromPromise';
  import { Observable } from 'rxjs/Observable';
  import { of } from 'rxjs/observable/of';
  
  /** 3rd party **/
  import { Auth } from 'aws-amplify';
  
  @Injectable()
  export class CognitoService {
  
      getJwtToken(): Observable&lt;any&gt; {
          return this.getCurrentSession()
              .switchMap((token) =&gt; {
                  return of(token.getIdToken().getJwtToken());
              })
      }
  
      private getCurrentSession(): Observable&lt;any&gt; {
          return fromPromise(Auth.currentSession());
      }
  
  }
  </code></pre>
  
  <p>That get's called by:</p>
  
  <pre><code>this.cognitoService.getJwtToken()
      .subscribe((token: string) =&gt; {
          this.dynamoService.get(
              'testResource?id=someValue',
              {
                  Authorization: token
              }
           )
      })
  </code></pre>
  
  <p>And where <strong>Dynamo.service</strong> is the following:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  /** rxjs **/
  import { fromPromise } from 'rxjs/observable/fromPromise';
  import { Observable } from 'rxjs/Observable';
  
  /** 3rd party **/
  import { API } from 'aws-amplify';
  
  /** App Environment **/
  import { environment } from '../../../environments/environment';
  
  @Injectable()
  export class DynamoDBService {
  
      apiName = environment.amplify.API.endpoints[0].name;
  
      get(path: string, headers: any): Observable&lt;any&gt; {
          return fromPromise(
              API.get(
                  this.apiName,
                  path,
                  {
                      headers: headers
                  }
              )
          );
      }
  }
  </code></pre>
  
  <p>My environment looks like:</p>
  
  <pre><code>export const environment = {
      production: false,
      amplify: {
          Auth: {
              region: 'eu-central-1',
              identityPoolId: 'eu-central-1:xxx',
              userPoolId: 'eu-central-1_xxx',
              userPoolWebClientId: 'xxxx'
          },
          API: {
              endpoints: [
                  {
                      name: "someName,
                      endpoint: "xxxxx"
                  }
              ]
          }
      }
  };
  </code></pre>
  
  <p>And of course, at the startup of my application I'm configuring amplify like:</p>
  
  <pre><code>...
  /** App Environment **/
  import { environment } from '../../environments/environment';
  ...
  Amplify.configure(environment.amplify);
  ...
  </code></pre>
  
  <p>On my <a href="https://aws.amazon.com/it/api-gateway/" rel="nofollow noreferrer">api-gatway</a> I enabled standard <code>CORS</code>, <code>Authorization</code> Required and no <code>Token</code> validation.
  I feel like I'm doing everything alright and I don't get what I'm doing wrong.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p><code>Authorization</code> header gets properly set when using <code>API.get(...)</code> and passing it an header object like:</p>
  
  <pre><code>{
      Authorization: 'myToken'
  }
  </code></pre>
  
  <p>More can be read at the following link <a href="https://aws.github.io/aws-amplify/media/api_guide.html" rel="nofollow noreferrer">aws.github.io/aws-amplify</a></p>
  
  <p>Any Suggestion?</p>