cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Want to learn some quick and useful tips to make your day easier? Check out how Calvin uses Replay to get feedback from other teams at Dropbox here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

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

Re: Javascript SDK - Auth, getting tokens, setting tokens

Javascript SDK - Auth, getting tokens, setting tokens

blueprintbroadcasting
Explorer | Level 4
Go to solution

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 :
I cant figure out what i'm doing wrong
1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution

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.

View solution in original post

6 Replies 6

Greg-DB
Dropbox Staff
Go to solution

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
Explorer | Level 4
Go to solution

react_devtools_backend.js:4026

  1. {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
Dropbox Staff
Go to solution

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
Explorer | Level 4
Go to solution

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
Dropbox Staff
Go to solution

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.

blueprintbroadcasting
Explorer | Level 4
Go to solution

Thank you!

Need more support?