Login to Dropbox from browser extension on Chrome

We can't offer support for the third party browsers or libraries themselves, as they're not made by Dropbox, so you may need to debug that to see what code/conditions trigger that getAuthenticationUrl/launchWebAuthFlow code path to run.

As for the Dropbox side of things, I see you are setting tokenAccessType to offline in getAuthenticationUrl, meaning that Dropbox will return a refresh token to enable the app to maintain long-term access without having the use re-authorize the app. (You can find more information in the OAuth Guide.) The Dropbox SDK will handle that for you automatically as long as you set the refresh token and app key in the client like in this example. Without using the refresh token, access from new authorizations would only last a few hours as new access tokens are "short-lived".

Thank you very much for your response.

I see my mistake as I haven't used the refresh token via setRefreshToken(), I've made the correction.

I will debug a bit more the code on my side the way I call the Dropbox API.

I've reverted the workflow on Chrome away from launchWebAuthFlow(), it wasn't needed on Chrome to begin with. One benefit is that now I can trace the complete workflow as I have my own OAuth receiver page.

One good thing: I no longer have to re-enter my user name and password if I'm already logged in on that Chrome browser.

One bad thing: I still can't re-use the login code if I reload the page. I assume I'm doing something wrong, please see these steps

1. I open the browser extension, I transition to the login page getAuthenticationUrl(), I click to instruct Dropbox to connect the app.

2. The OAuth receiver page get this URL, url: chrome-extension://kdjij.../qfeeds/oauth_receiver_dbox.html?code=40h...tbG5pCng

3. Down the line this gets to the call getAccessTokenFromCode(), this returns a refresh token. Then the extension can access the files in my Dropbox folders

URL is POST:
https://api.dropboxapi.com/oauth2/token?grant_type=authorization_code&code=40hlw...&client_id=25sck7...&code_verifier=MTEsMj...&redirect_uri=chrome-extension://kdjij.../qfeeds/oauth_receiver_dbox.html

Everything until this moment is good.

4. Now, I click Realod on the page of the extension

5. I have my login code 40h...tbG5pCng in local browser storage, so the first function I call is getAccessTokenFromCode() with it, and I get HTTP 400. Why just seconds ago this gave me a refresh token and now I got 400. In the broswer I can see that the URL is exactly the same as used in step 3 above.

(Another question, I also get an access token, not only a refresh token, why is that, do I have to use it?)

Thank you for taking the time to look into this

ps: The code has been updated on GitHub too
ps: I'm using the Javascript library that comes from Dropbox SDK, downloaded from here: https://unpkg.com/dropbox@10.12.0/dist/Dropbox-sdk.js

dbox-arg0 Здравко is correct. The "authorization code" can only be used once. You should use it to get the refresh token, and then you should store and re-use the refresh token.

Also, the initial authorization flow will give you an access token that you can use immediately, in addition to the refresh token. You can use that initial access token, but it's not required. You can instead just store the refresh token and use it to get a new access token later when needed.

Ah, it seems that I have gone in the wrong direction.

Yes, the documentation explains that the login code was one-time, I don't know why I got confused at some point in the implementation.

I've made the corrections -- the token obtained by getAccessTokenFromCode() yesterday, preserved in local storage, is valid today, even after reloading the browser extension. This is what I wanted.

Thank you for everything, this was a great help.

Мерси много!
🙂