Child Item

Javascript SDK - Auth, getting tokens, setting tokens

Hello!

Im building a React app with the Javscript SDK and am having issues getting a refresh token and access tokens (browser-side, not backend).

Im setting up DropboxAuth

const dbxAuth = new DropboxAuth({

clientId: '90dgr7j93zv48ct',

clientSecret: process.env.REACT_APP_SECRET

})

then using it when my component mounts to get a token (using my OAuth code)

try {

dbxAuth

.getAccessTokenFromCode(null, process.env.REACT_APP_OAUTH_TOKEN)

.then((token) => {

console.log(`Token Result:${JSON.stringify(token)}`)

dbxAuth.setAccessToken(token.result.access_token)

})

} catch (error) {}

getAccessTokenFromCode is giving me a 400 error :

Dropbox-sdk.min.js:1 POST https://api.dropboxapi.com/oauth2/token?grant_type=authorization_code&code=myoauthcodePo&client_id=90dgr7j93zv48ct&client_secret=mysecret

I cant figure out what i'm doing wrong

Find more posts tagged with

API

Abuse

Accepted answers

Greg-DB

It's not possible to make new access tokens long-lived; for long-term access without manually re-authorizing the app, you would use refresh tokens. Refresh tokens don't expire automatically and can be used to programmatically retrieve new short-lived access tokens whenever needed.

For examples of implementing this with the Dropbox JavaScript SDK, please refer to the examples included in the "examples" folder in the SDK. As long as you set the app key (a.k.a. client ID) and refresh token, like shown in this example for the JavaScript SDK, the SDK will actually handle refresh process for you automatically. The SDK will automatically catch expired access token errors and call the API to get a new short-lived access token when needed.

It sounds like you want all of your end-users to connect to your own Dropbox account though. The API was designed with the intention that each user would link their own Dropbox account, in order to interact with their own files. While it is technically possible to always connect to just one account for all users, we do not officially support this, for various technical and security reasons.

All comments

Greg-DB

Try adding this error handling to the getAccessTokenFromCode call to get a more specific error message from the error response:

    .catch(function(error) {
      console.error(error.status);
      console.error(error.error);
    });

blueprintbroadcasting

react_devtools_backend.js:4026

{error: 'invalid_grant', error_description: "code doesn't exist or has expired"}
1. error: "invalid_grant"
2. error_description: "code doesn't exist or has expired"
3. [[Prototype]]: Object
  
  I generated this code yesterday through the browser Oauth url. I thought it was one and done. Is there a way to programmatically refresh the Oauth code?

Greg-DB

The code you pass to getAccessTokenFromCode is an "authorization code". Authorization codes are only valid for a short period time, and can each only be used once. Once you use the authorization code to retrieve an access token and optionally a refresh token, you can no longer use that authorization code again. You should instead store and re-use the access token and optionally the refresh token. Those can be re-used programmatically.

blueprintbroadcasting

Thank you for your help and patience.

I am now wondering if this method is the best course of action for what my app needs to do...

I need the access token to work indefinitely so the 20 or so users connected to my app have access to my dropbox files.

Im trying to accomplish this all on the front end in React using the JS SDK. How do I make the access token permanent (or check if the token needs to be refreshed and get a refresh token) ?

Greg-DB

blueprintbroadcasting

Thank you!