Angular2, Auth0 connecting to Fitbit API, JWT needs 3 parts

Question

I am currently working with Angular2, I am trying to connect to the fitbit API with auth0. I am using Angular2-JWT and the Lock.js provided with Auth0. So far the login and reading out the simple profile data works flawlessly using Lock.js generated id_token, but the moment I would like to pull down information like activities the request to the API gives out an error.

But then I noticed Besides this, Lock.js also gives something like Access_token. I always thought this is the correct one to use.

I fetch the id_token/access_token the following way.

@Injectable()
export class Auth {
  // Configure Auth0
  lock = new Auth0Lock('[CENSORED]', '[CENSORED],{});

  constructor() {
    // Add callback for lock `authenticated` event
    this.lock.on("authenticated", (authResult:any) => {
      this.lock.getProfile(authResult.idToken, function(error:any, profile:any){
          if(error){
              throw new Error(error);
          }
            localStorage.setItem('id_token', authResult.idToken);
            localStorage.setItem('access_token', authResult.accessToken);
            localStorage.setItem('profile', JSON.stringify(profile));
            console.log('ID_token: ' + authResult.idToken);
            console.log('Access_token: ' + authResult.accessToken);

      });
    });
  }

Now, please note that I fetch an Id_token, and an Access_token, I also try to follow the Implicit Grant flow, and if I interpret it correctly, this should mean I have to post the authorisation token in exchange for an access token? But what I would like to achieve, or at least find out, is the Access_token I fetch using Lock.js the one that is needed to communicate with Fitbit API? Or do I actually need the id_token?

The documentation is really not clear about this. So moving on, let's continue to use this Access_token, I proceed to use angular2-JWT to help me send an AuthHttp to the fitbit API. My Activity Fetching service leading up to this looks like the following:

@Injectable()
export class FetchActivityService {

   constructor (
    public AuthHttp: AuthHttp
  ) {}
  activity:any;
  jwtHelper: JwtHelper = new JwtHelper();
useJwtHelper() {
  var token = localStorage.getItem('id_token');

  console.log(
    this.jwtHelper.decodeToken(token),
    this.jwtHelper.getTokenExpirationDate(token),
    this.jwtHelper.isTokenExpired(token)
  );
}
  GetActivity() {

    this.AuthHttp.get('https://api.fitbit.com/1/activities.json')
    .subscribe(data => this.activity = data, error => console.log(error));
  }


}

So bold, relevant part of the code is just deploying Angular2-JWTs AuthHttp to add the authorisation header correctly to my API request. So still in this case above Access_token, so my AuthHttp Factory looks as follows

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: 'access_token',
    tokenGetter: (() => localStorage.getItem('access_token'))
     }), http, options);
}

Just to show you can see I'm binding it to the Access_token Generated straight from Lock.js. So, as soon as I try to run GetActivity() as listed above, I get the following error:

Error: JWT must have 3 parts

That's the whole Error message, I don't get it, Angular2 JWT should use Access_token to generate a valid JWT and send this to the API, so what did I do wrong? May I also say that Access_token, When printed in console Is a fairly short string, While Id_token Is already a JWT.

Now please imagine all the steps above but access_token replaced with Id_token, it gives the following error. The red text displays a long JWT, I just didn't put in here because its very long.

"errorType":"invalid_token","message":"Access token invalid:[JWT]

I am completely lost in this.