Hello,
I am struggling to implement authentication into a Vuejs frontend with a Hasura backend.
What I could achieve is setup the initial flow, where I can login using my Google account. The the /callback endpoint captures the auth data and can fully display the profile of the user.
I can also take the token and use it directly on a Graphql client.
The problem is that once my token expires, I have no idea how to refresh the token. I have read general articles and Stackoverflow questions where several approaches are recommended. And I also noticed, in this Hasura documentation the following:
Rotating JWKs:
Some providers rotate their JWKs (E.g - Firebase). If the provider sends an Expires header with the response of JWK, then graphql-engine will refresh the JWKs automatically. If the provider does not send Expires header, the JWKs are not refreshed.
To my understanding of it, I should provide a specific header to the GraphQL Engine and it will take care of refreshing the token.
My question is: what is the recommended approach to refresh tokens when using a Hasura backend?
Cheers
@TAnas0 if you're using Auth0, it already supports refresh tokens in its SDKs.
This document talks about refresh tokens (with Auth0) in detail: https://auth0.com/docs/tokens/refresh-token/current. Look for "SDK Support" section, where Auth0 SDKs have functions to refresh existing tokens.
Basically the idea is:
This blog talks about refresh tokens in general - https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/
To my understanding of it, I should provide a specific header to the GraphQL Engine and it will take care of refreshing the token.
This is about JWKs, not JWTs. JWKs (JSON Web Keys) are the set of keys used for signing the JWT. Some providers rotate their public/private key-pairs, so Hasura supports that as well. This is nothing to do with JWT.
Let me know if this helps.
@TAnas0 we found this example that should help: https://github.com/auth0-samples/auth0-react-samples/blob/master/05-Token-Renewal/src/Auth/Auth.js
Look for scheduleRenewal method.
Thank you. This is much needed and more than enough to get me going :+1:
@TAnas0 we found this example that should help: https://github.com/auth0-samples/auth0-react-samples/blob/master/05-Token-Renewal/src/Auth/Auth.js
In the meantime, that sample has been removed. There's no more "05" at https://github.com/auth0-samples/auth0-react-samples. You can of course find it in the commit history, but the question is, why was it removed? Is it no longer recommended practice?
Auth0 published a very long post on (partially) securing GraphQL, but it says nothing about what to do with expired tokens. I wonder how those who've adapted that sample for production, actually managed to get it working beyond the very first authenticated request.
(Side note, I'm more and more convinced that Auth0 is indeed over-engineered, compared to Firebase Auth.)
And here is a link to the file at the correct commit
https://github.com/auth0-samples/auth0-react-samples/tree/52cea58b57471712d875d3d3a10ee4d43c4e2f97
And the link to the scheduleRenewal method.
scheduleRenewal() {
let expiresAt = this.expiresAt;
const timeout = expiresAt - Date.now();
if (timeout > 0) {
this.tokenRenewalTimeout = setTimeout(() => {
this.renewSession();
}, timeout);
}
}
Most helpful comment
In the meantime, that sample has been removed. There's no more "05" at https://github.com/auth0-samples/auth0-react-samples. You can of course find it in the commit history, but the question is, why was it removed? Is it no longer recommended practice?
Auth0 published a very long post on (partially) securing GraphQL, but it says nothing about what to do with expired tokens. I wonder how those who've adapted that sample for production, actually managed to get it working beyond the very first authenticated request.
(Side note, I'm more and more convinced that Auth0 is indeed over-engineered, compared to Firebase Auth.)