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

i working angular2, trying connect fitbit api auth0. using angular2-jwt , lock.js provided auth0. far login , reading out simple profile data works flawlessly using lock.js generated id_token, moment pull down information activities request api gives out error.

but noticed besides this, lock.js gives access_token. thought correct 1 use.

i fetch id_token/access_token following way.

@injectable() export class auth {   // configure auth0   lock = new auth0lock('[censored]', '[censored],{});    constructor() {     // add callback 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 fetch id_token, , access_token, try follow implicit grant flow, , if interpret correctly, should mean have post authorisation token in exchange access token? achieve, or @ least find out, access_token fetch using lock.js 1 needed communicate fitbit api? or need id_token?

the documentation not clear this. moving on, let's continue use access_token, proceed use angular2-jwt me send authhttp fitbit api. activity fetching service leading looks 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 code deploying angular2-jwts authhttp add authorisation header correctly api request. still in case above access_token, authhttp factory looks follows

export function authhttpservicefactory(http: http, options: requestoptions) {   return new authhttp(new authconfig({     tokenname: 'access_token',     tokengetter: (() => localstorage.getitem('access_token'))      }), http, options); } 

just show can see i'm binding access_token generated straight lock.js. so, try run getactivity() listed above, following error:

error: jwt must have 3 parts 

that's whole error message, don't it, angular2 jwt should use access_token generate valid jwt , send api, did wrong? may access_token, when printed in console short string, while id_token jwt.

now please imagine steps above access_token replaced id_token, gives following error. red text displays long jwt, didn't put in here because long.

"errortype":"invalid_token","message":"access token invalid:[jwt] 

i lost in this.