React - how to enable use of refresh token?
I followed this guide:
https://zitadel.com/docs/examples/login/react
which works well with my React app, however the access token valid time is set to 1 hour and my refresh token to 15 hours. After an hour I have to login again so the refresh token is not used. How do we enable the use of the refresh token?
ZITADEL Docs
This integration guide demonstrates the recommended way to incorporate ZITADEL into your React application.
11 Replies
Did you request the offline_access scope?
And i think its needed to enable it on the client first.
@tamis0583 Thanks for reaching out! This guide should have the information you're looking for: https://zitadel.com/docs/examples/login/vue#refresh-token-and-client-id
ZITADEL Docs
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Vue application.
Damn indeed works now, aparently I didn't enable the refresh token 😅
@Raccine Oh I enabled the refresh_token with the checkmark but doesn't work. The guide is for VUE but I'm using plain react.
https://zitadel.com/docs/examples/login/vue#refresh-token-and-client-id
@peini7 How do I request the offline_access scope??
ZITADEL Docs
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Vue application.
@tamis0583 I guess you're using zitadel/react?
In the docs you've mentioned there is a line
const config: ZitadelConfig
.
I think there should be a configuration option to specify the scopes.
But I've never used this library so i'am just guessing, but this is how i would do it with other libraries.Ah yes, it's using oidc-client-ts under the hood, so this should be your config option in this
ZitadelConfig
:
https://authts.github.io/oidc-client-ts/interfaces/UserManagerSettings.html#:~:text=)%5B%5D%3B-,scope%3F%3A%20string%3B,-signingKeys%3F%3A%20SigningKeyUserManagerSettings | oidc-client-ts
Documentation for oidc-client-ts
You would specify something like
scope: "openid profile email offline_access"
@peini7 I added the scope and In my browsers local storage I can see an access token and refresh token. I have set the access token to expire in 1 hour (lowest possible) and the refresh token in 365 days. However I'm still getting logged out after one hour. Also I can see the refresh token in my local storage, which is strange as I have learned it should be stored in the backend?

Unfortunately i haven't used this zitadel/react library. Maybe silent renewal needs to be enabled somehow?
GitHub
[Bug]: Refresh token not working · Issue #9262 · zitadel/zitadel
Preflight Checklist I could not find a solution in the documentation, the existing issues or discussions I have joined the ZITADEL chat Environment ZITADEL Cloud Describe the problem caused by this...