cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Share your feedback on the Document Scanning Experience in the Dropbox App right here.

Discuss Dropbox Developer & API

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Need help generating a pkce refresh token in a javascript PWA

Need help generating a pkce refresh token in a javascript PWA

seenigel
Explorer | Level 3
Go to solution

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?

1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution

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.

View solution in original post

2 Replies 2

Greg-DB
Dropbox Staff
Go to solution

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.

seenigel
Explorer | Level 3
Go to solution

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_examp...). Once you store the refresh token, the api will take care of all the short-lived tokens automatically. 

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    seenigel Explorer | Level 3
  • User avatar
    Greg-DB Dropbox Staff
What do Dropbox user levels mean?