I am using the Google Analytics Embed API to create a report in a Vue App.
I am following this documentation: https://developers.google.com/analytics/devguides/reporting/embed/v1/component-reference#auth
Everything works until the access token expires. I catch the error get a new access_token from the back end and call authorize to reauthenticate the embed api client
await window.gapi.analytics.auth.authorize({
serverAuth: {
access_token: <my token>
}
})
const isAuthorized = await window.gapi.analytics.auth.isAuthorized()
// isAuthorized returns true
// however getAuthResponse() still returns the old expired token.
console.log('getAccessToken', await window.gapi.analytics.auth.getAuthResponse().access_token)
// and the call to get the reporting data fails as the authorization header is the old expired header
const data = new window.gapi.analytics.report.Data({ query: params })
How do I update the access_token once it has expired in my spa app so the embed api reauthenticates for the service account?
The google analytics embeded api is Javascript based. It is built upon the Google apis js client library in the backend.
JavaScript is implicit flow which means you will not get a refresh token returned to you. Service accounts also do not work with JavaScript.
Out of the box your only option is to request that the user login to your app again when the access token expires.
I have seen / heard of a few developers who have managed to hack a server sided authorization component into it which would for example use node.js to use oauth2 or a service account to enable the authorization to be refreshed. This is something you would need to code yourself its not officially supported by the api.