I am currently working on integrating the Strava API into my Angular app.
To summarize briefly:
- When a user clicks on a button to connect to Strava
- They are redirected to Strava for authentication (using PKCE)
- Strava then redirects back to my app with a code
- In the ngOnInit function, I check for route parameters and if I have the code, I initiate two chained promises: the first one to get the Access Token from Strava and then save it into a Firebase database.
The issue I am facing is that sometimes the data is saved in Firebase and sometimes it is not. The behavior is inconsistent. What's strange is that I always go into my postNewToken function because it logs to the console.
- If I only save to Firebase (without requesting a Strava token) in ngOnInit(), it works 100% of the time.
- If I have a button that triggers the token request and data saving process, it seems to work every time.
I'm at a loss on how to resolve this. It appears to be more about properly chaining promises in ngOnInit but I'm unsure of how to address it.
The code from my component:
ngOnInit() {
const stravaCode = this.route.snapshot.queryParamMap.get('code');
if (stravaCode !== undefined) {
this.stravaService.handleStravaAuthorizationCode(stravaCode);
}
And in the associated service:
// Handling received Strava Code
handleStravaAuthorizationCode(authorizationCode: string) {
this.getStravaToken(authorizationCode).then(res => {
this.postNewToken(res).then(res => {
this.router.navigate(['encoding']);
});
});
}
// Getting Strava access token for making API requests -> done only once
getStravaToken(authorizationCode: string){
if (authorizationCode !== undefined){
console.log('Authorization code: ' + authorizationCode);
const data = {
client_id: environment.strava.client_id,
client_secret: environment.strava.client_secret,
code: authorizationCode,
grant_type: 'authorization_code'
};
return this.http.post<StravaToken>(this.stravaTokenURL, data)
.pipe(catchError(this.errorService.handleHttpError)).toPromise();
}
}
postNewToken(stravaToken: StravaToken) {
if (this.authService.isLoggedIn) {
console.log('Saving Strava token into Firebase');
console.log(stravaToken);
return this.afs.collection('strava_tokens')
.add(stravaToken).then(res => console.log(res), err => console.log(err));
} else {
return Promise.reject(new Error('No User Logged In!'));
}
}