AngularFire2 - using access token from Google Auth for Google APIs

Question

Google Authentication through AngularFire2 returns the Firebase access token, but not the Google access token for use on Google APIs. What's the proper way to get the access token from the AngularFire2 auth?

Angular: 2.4.9

Firebase: 3.5.2

AngularFire: 2.0.0-beta.8

Here's a plunkr:

http://plnkr.co/edit/qIbtcp?p=preview

You'll notice in the constructor:

constructor(af: AngularFire, public auth$: AngularFireAuth, public http:Http) {

      auth$.subscribe((state: FirebaseAuthState) => {
        if(state){
          this.signedIn = true
        }
    });

    firebase.auth()
      .getRedirectResult()
      .then((result) => {
        console.log('result', result);
        if (result.credential) {
          // This gives you a Google Access Token.
          var token = result.credential.accessToken;
          console.log('token',token)
          this.getPeople(token)
          .subscribe(
            people => console.log('people',people),
            error =>  console.log(error)); 
        }
        var user = result.user;
      })
      .catch(err => console.log(err));
  }

Where I call firebase.auth() is where I try to get the Google Access Token. However on first login, I get this error:

{
error: {
code: 403,
message: "Request had insufficient authentication scopes.",
status: "PERMISSION_DENIED"
}
}

I know this shouldn't happen because I tried the same setup with strictly Firebase (no AngularFire2), in this example:

https://embed.plnkr.co/zxOfRZ1PDDb7ee5qzIKW/

So is there an issue with sharing auth tokens between AngularFire and just Firebase? Does anyone have an example of this working?

You're subscribing in two places with two different kinds of tokens. result.credential.accessToken is the correct one and I'd expect that to work fine. But you can't use auth.getToken(), which returns a Firebase ID token (not a Google access token). — Kato
@Kato sorry I should have made the code more clear, I took out the auth.getToken() - I do use result.credential.accessToken, but it results in a a 403 permission denied "request had insufficient authentication scopes", despite my app having accepted the scopes (from the AngularAuth login with method:redirect) — Nick Jonas

Nick Jonas Nick Jonas · Accepted Answer · 2017-03-31T18:53:22

Found a similar issue on StackOverflow:

Using Firebase Auth to access the Google Calendar API

I ended up using the same approach, it seems that you need to manually use the Google API's Javascript client, and use that credential to sign in with Firebase.

AngularFire2 - using access token from Google Auth for Google APIs

1 Answers