You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
Need help generating a pkce refresh token in a javascript PWA
Hi folks, I'm running into some trouble with the new authentication flow.
I've got a single page, severless JS PWA and I want to use Dropbox to store the user's data without forcing them to authenticate every four hours or each time they re-open the app. I've been using the old oauth flow and storing the long-lived token in localstorage and it's been fine, but I'm unclear about what to store from the pkce flow.
I'd ideally like to store the refresh token in localstorage and use that to generate short-lived tokens as needed, but the documentation isn't quite clear. I'm trying to follow the example in the js sdk for generating a token (https://github.com/dropbox/dropbox-sdk-js/blob/main/examples/javascript/pkce-browser/index.html), but this example only shows the initial authentication: sending the user to the authentication page, and retrieving the first short-lived token (line 97). It doesn't show how to use the refresh token to generate subsequent tokens.
I know that in the response from dbxAuth.getAccessTokenFromCode includes the refresh token (line 96 and line 97), but I'm not quite sure how to generate short-lived tokens with it. I see in the sdk there's a function called checkAndRefreshAccessToken() that returns a promise, but it's returning empty when I call it.
TLDR: How do I alter this example (https://github.com/dropbox/dropbox-sdk-js/blob/main/examples/javascript/pkce-browser/index.html) to store the refresh token and use it to generate short-lived tokens down the road?
Yes, if you need long-term access without having the user re-authorize, you should request "offline" access to get and use a refresh token to get new short-lived access tokens as needed.
There's a "PKCE-backend" example that shows how you can request this kind of access, and then set the resulting refresh token using setRefreshToken. The SDK will then automatically handle the refresh process for you when needed.
- Greg-DB
Dropbox Staff
Yes, if you need long-term access without having the user re-authorize, you should request "offline" access to get and use a refresh token to get new short-lived access tokens as needed.
There's a "PKCE-backend" example that shows how you can request this kind of access, and then set the resulting refresh token using setRefreshToken. The SDK will then automatically handle the refresh process for you when needed.
Thanks so much! That solved it!
Message for future PWA developers: the solution is a mash-up of the browser frontend example (https://github.com/dropbox/dropbox-sdk-js/blob/main/examples/javascript/pkce-browser/index.html) and the node backend example. (https://github.com/dropbox/dropbox-sdk-js/blob/main/examples/javascript/PKCE-backend/code_flow_example.js). Once you store the refresh token, the api will take care of all the short-lived tokens automatically.
About Discuss Dropbox Developer & API
Make connections with other developers
