Search code examples
reactjsgoogle-oauthgoogle-picker

Access token obtained with 'auth-code' login flow with 'drive.file' scope, later used for picking file and on the server returns "entity not found"

I need help.

I use 'auth-code' login flow (with 'drive.file' scope) in my react app, and then exchange this cde on the server for access and refresh token, and return access_token back to react frontend. Then i create picker object and inject access_token using

   .setOAuthToken(accessToken)

and Picker opens file and lets me pick file (this file was not created by my app, but just selected by the user) After this on the backend I try to read the content of this file and getting:

googleapi: Error 404: Requested entity was not found

Don't know what to do. Should I try server side flow for oauth? From my understand of the docs, what I did must've worked. Please help.

tried obtaining access token using frontend flow and pasting it to the db

Solution

  • Ok, think I figured it out... Solution below with my original comment below that.

    Solution

    The solution is hinted at in here. The fix is to add the following to the PickerBuilder:

    .setAppId(DriveApiKey)

    Where DriveApiKey is the first part of the associated oAuth client ID. So if the client ID is 123456789-abc123xyz.apps.googleusercontent.com then the ApiKey is just 123456789-abc123xyz. Not sure why that is but seems to work.

    Original Post

    I've been running into the same problem, no solutions so far but here are a few more details on what I'm trying unsuccessfully. Would be interested to know what commonalities/differences you have.

    My setup:

    • Next.js app
    • User management via Clerk
    • GoogleFilePicker to choose a file on the client (Google Spreadsheets only)
    • Client call to spreadsheet API to get the list of tabs/sheets, using the fileId from above

    Flow:

    • User logs in to my app using Clerk and they store the oauth tokens.
    • User selects "Open GSheet" from my app.
    • My app calls Clerk to get an access token.
    • That token is then used to show the file picker.
    • User picks a file.
    • My app calls the Google spreadsheet API using the same access token and the fileId chosen.

    The last step results in a 404.

    I've tried using a readonly scope, which works but is more than I need.

    I've had success periodically but I can't track it down to any series of reproducable steps.