Google-api-javascript-client: Are any events triggered when the auth token expires?

[TheHandsomeCoder]

I have an SPA using this library for the initial login. I've started seeing an issue of the auth token expiring for example when someone leaves their browser open overnight. A hard reload of the page resolves this, but I'm wondering if there is any event I could listen to regarding the token expiration for when the user is just using the app?

As a follow-up, does the token expiring count as a change in signin?

[bochunz]

Google OAuth tokens are valid for 1h. A few events that could trigger token expiration I can think of are: the OAuth client ID is removed, the Google Cloud project is deleted, or the authenticated user account is deleted.

[TheHandsomeCoder]

@bochunz thanks for the reply, I meant more so, when the token expires due to TTL does an event get triggered that I could listen for and refresh the token

[bochunz]

If you are using the gapi.auth2 library, the token is automatically refreshed for you. You can just not store the token and use the library to get it each time.

I don't think we have notification if you want to manually track the expiration. You can use timers on your own, but you will need to consider fuzzy cases like mobile app switch, laptop goes to sleep, etc.

[TheHandsomeCoder]

@bochunz it doesn't seem to refresh for me. I'm using the library as part of an SPA built with react. So I'm only doing the setup once on the initial page load.

[TMSCH]

@TheHandsomeCoder we're aware of some issues when the laptop is suspended, or goes to sleep. We're working on addressing these issues.

[TheHandsomeCoder]

@TMSCH Thanks for the info! :) Do you know if there's something I could do in the meantime as a stopgap? Or is there any examples or docs you could point me to get around this?.

[TMSCH]

You can call reloadAuthResponse() when detecting the token expired so that it refreshes it.

[rushglen]

Yes, reloadAuthResponse() works. I record the time I first obtained the id_token in local.storage and if it validates on the server issue my own hash(some data + secret) with an expiry time of less than 1 hr. If the browser makes a request for the id_token greater than the last time (more than 1 hr, because the browser was sleeping) I call reloadAuthResponse() and get a new token. Solved the browser sleeping problem for me.

[bribar]

@TMSCH @bochunz I have a SPA I'm integrating with gapi. I get the same issue. I sign in fine and can use the access_token, but if I leave the page open and active for longer than an hour I don't see a refresh event happening or anything indicating the access_token was refreshed.

If I refresh the page before that hour, .isSignedIn.get() always shows false (I would expect that to show true since I initially signed in already)?

If the library refreshes the token 5 mins before expiration, wouldn't a currentUser.listen event trigger?

@TMSCH You said reloadAuthResponse() can be called, but you would need .isSignedIn.get() to be true, correct? So you can call window.gapi.auth2.getAuthInstance().currentUser.get().reloadAuthResponse()

My goal is avoid showing the user the sign in popup after initial sign in.

`initClient () {
        var self = this
        return new Promise(function (resolve, reject) {
            window.gapi.load('auth2', function () {

                window.gapi.auth2.init({
                    client_id: 'CLIENT_ID_HERE',
                    scope: ['https://www.googleapis.com/auth/calendar.readonly','https://www.googleapis.com/auth/calendar.events'].join(' ')
                }).then(function(googleAuth){
                    console.log(googleAuth.isSignedIn.get())
                    googleAuth.currentUser.listen(function(googleUser){
                        console.log('UserChanged',googleUser)
                        self.googleData.auth = googleUser.getAuthResponse(true)
                        window.localStorage['googleauth'] = JSON.stringify(self.googleData)
                    })

                    if (typeof window.localStorage['googleauth'] !== 'undefined') {

                        self.$http.get('https://www.googleapis.com/calendar/v3/users/me/calendarList', {
                            headers: {'Authorization': `Bearer ${self.googleData.auth.access_token}`}
                        }).then(function (response) {
                            console.log(response)
                        }).catch(function (error) {
                            console.log(error)
                        })

                    }

                    resolve()
                })

            })
        })`

Maybe I'm missing something? I've been going at this for hours :(

[gpashis]

@bribar I am also facing the same issue. Did you get any solution for this? Please share the sample code. Thanks.

[bribar]

@gpashis no I didn't. It doesn't seem to work as expected.

[gpashis]

@bribar Thanks for the quick reply. I am going to give this a shot. https://github.com/google/google-api-javascript-client/issues/509#issuecomment-553734758.

[argarner]

You can refresh a token in the browser by viewing my comment here => https://github.com/google/google-api-javascript-client/issues/643#issuecomment-642350903 & the new documentation update issue I've raised here.

You can auth the token backend by doing this => https://developers.google.com/identity/sign-in/web/backend-auth.