Child Item

Malformed OAuth2 Access Token When Deployed to Vercel

So I just started using dropbox for a nextjs/react app and everything works fine exactly as it should when I run it locally, but when I deploy to vercel I get a 400 code and the 'Error in call to API function "files/upload": The given OAuth 2 access token is malformed.' message. I've configured my environment variables correctly because all of the other api calls in my app work correctly when deployed. I'm guessing I need to configure something in the developer dashboard to allow the access token to work on the vercel app as well as locally but I'm unsure what it is I need to do as of now. Any help would be greatly appreciated!

Find more posts tagged with

API

Abuse

Comments

Greg-DB

Regardless of where/how you're performing the API call, the "The given OAuth 2 access token is malformed" error should indicate that the call failed because the access token provided in the "Authorization" header was not of the expected form. This isn't something you need to or can configure for the app on the App Console.

I suggest inspecting the actual request your deployed app is sending to the /2/files/upload endpoint to see what it is including in the "Authorization" header. I can't offer help with Vercel itself as that's not made by Dropbox, so you may need to refer to its documentation to see how you can inspect/debug it.

hhjj49

As far as I can tell the actual request from the deployed version is identical to the request sent by the local version that works correctly, and I'm unsure of what would be different with the request being made by the deployed version since it is the exact same code.

Here is the full error message:

DropboxResponseError: Response failed with a 400 code at /var/task/node_modules/dropbox/cjs/src/response.js:34:11 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async exportSpl (/var/task/.next/server/pages/api/exportSpotifyPlaylist.js:115:9) { status: 400, headers: Headers { [Symbol(map)]: [Object: null prototype] { 'cache-control': [Array], 'content-security-policy': [Array], 'x-content-type-options': [Array], 'content-type': [Array], 'accept-encoding': [Array], date: [Array], server: [Array], 'content-length': [Array], 'strict-transport-security': [Array], 'x-robots-tag': [Array], 'x-dropbox-response-origin': [Array], 'x-dropbox-request-id': [Array], connection: [Array] } }, error: 'Error in call to API function "files/upload": The given OAuth 2 access token is malformed.' }

Greg-DB

Can you clarify what you mean when you say "As far as I can tell the actual request from the deployed version is identical to the request sent by the local version"? Were you able to actually inspect the raw content of the request being sent from the deployed version? The output you shared here only shows some of the response, not the request.

hhjj49

I mean that I am sure that the access token is the same for each, and that the same code I am running locally which works, is the code which is deployed and not working. what could be different if the access token and code are the same?

Greg-DB

I don't have full context on your different environments of course, but there could be non-obvious differences, e.g., in the versions of the platform, programming language, network client, etc., being used, exactly how the access token is stored/retrieved, or so on, between the different environments.

To troubleshoot this, the next step would be for you to inspect the request being made from the deployed environment.