firebase provider authentication refresh flow

Question

I am trying to use firebase authentication to get a google access token in order to call the youtube API.

I am able to initially get the access token like this:

const provider = firebase.auth.GoogleAuthProvider();
cosnt scopes = []; // ...scopes
scopes.forEach(scope => provider.addScope(scope));

firebase.auth().signInWithPopUp(provider)
  .then(userCredentials=> {
    const oauthCredentials = userCredentials.credentials;
    // using credentials for API calls
    axios.get("some-google-api-path", { params: { access_token: oauthCredentials.accessToken } }); // and so on...
  });

This works fine until the access token expires. As far as I can tell, it seems like firebase automatically refreshes the session, but I can find a way to get the new access token.

I tried:

firebase.auth().onAuthStateChange(user => {
  // could not find the access token on the user object
});

And since that failed, I tried to do it manually using:

const token = firebase.auth.GoogleAuthProvider.credential(
  oauthCredentials.idToken,
  oauthCredentials.accessToken
);

const authResult = await firebase.auth().signInWithCredential(token);

The issue is that authResult will only contain the idToken or the accessToken, but not both, depends on what I give the firebase.auth.GoogleAuthProvider.credential function.

Am I missing something? Is there another/better way to do it?

user_209103 · Answer

There are two tokens in play here:

The refresh token, which is only available after the user actively signs in. Since it doesn't change, you can cache this token - which is what the Firebase SDKs actually also do.
The ID token, which is available at any moment from the current user. This token expires in an hour, and is auto-refreshed by the Firebase SDKs.

So if you want to retain access to the refresh token, you will have to store (typically in local storage) yourself when the user first actively signs in.

user_1678659 · Answer

So apparently firebase doesn't refresh tokens of other providers for you (not event google) according to this (thank you Frank van Puffelen!)

So what I did instead, is authenticate manually to google (since I use react, I used react-google-login), and got all tokens from there.

Then, once the session is initiated/refreshed, I create a firebase session using:

const token = firebase.auth.GoogleAuthProvider.credential(
  oauthCredentials.idToken,
  oauthCredentials.accessToken
);

const authResult = await firebase.auth().signInWithCredential(token);

I hope that this helps anyone, and I will accept another answer if firebase ever changes this.

firebase provider authentication refresh flow

2 Answers