Google File Picker displays files, but when clicking select, returns 404 not found

I am migrating my native desktop app that integrates flawlessly with Google Drive API using the current scopes:

https://www.googleapis.com/auth/spreadsheets https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile

However, since the Google legislators have become super paranoid about security for integrations, I have to avoid using the ../auth/drive and ../auth/spreadsheets scopes. Otherwise, we have to pay a third-party security auditor tens of thousands of dollars to be approved by Google's verification team.

The documentation says that it's possible to use ONLY the drive.file scope together with a hosted instance of Google's File Picker. I have read the Google File Picker documentation and used their provided standard "Quickstart" code to get familiar with it.

After creating a web application in the Google Cloud Console, and configuring an API Key there, I have been successful in getting the File Picker display in a browser and list the files from the my Drives after authenticating my user account using Google's own "Quickstart" code for the File Picker. I deployed their Quickstart code with my application's APP_ID and API_KEY. Again the scopes are set to only https://www.googleapis.com/auth/drive.file

After highlighting a file that I want to work with, and clicking the "Select" button in the Picker's UI, the callback that is executed does return the File ID, but it fails to "get" the file in order to see more information about it. Here is the code that is called upon clicking the "Select" button after highlighting a desired file from the list box:

  /**
   * Displays the file details of the user's selection.
   * @param {object} data - Containers the user selection from the picker
   */
  async function pickerCallback(data) {
    if (data.action === google.picker.Action.PICKED) {
      let text = `Picker response: \n${JSON.stringify(data, null, 2)}\n`;
      const document = data[google.picker.Response.DOCUMENTS][0];
      const fileId = document[google.picker.Document.ID];
      console.log(fileId);
      const res = await gapi.client.drive.files.get({
        'fileId': fileId,
        'fields': '*',
      });
      text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;
      window.document.getElementById('content').innerText = text;
    }
  }

When I look at the browser's console, the gapi.client.drive.files.get() code is returning a 404 File Not Found message. Specifically, the message returned is the following:

{
  "error": {
    "code": 404,
    "message": "File not found: 1KeFrCq70d7jVKHYlcIle4YTT_H468_TNGDuqoGP0ybI.",
    "errors": [
      {
        "message": "File not found: 1KeFrCq70d7jVKHYlcIle4YTT_H468_TNGDuqoGP0ybI.",
        "domain": "global",
        "reason": "notFound",
        "location": "fileId",
        "locationType": "parameter"
      }
    ]
  }
}

Why does this error return when the File Picker has been authenticated with my user account? Doesn't that seem odd?

Again, I do not wish to use any other scope except for drive.file so I'm not about to add new scopes to make this work.

All Google's documentation points to the idea that only files that the app has opened or that has created will allow for this to work with the drive.file scope.

My question is how do we open a file in an app that we created on the Google Cloud Console if we cannot even get any basic information about it?

I really don't want to tell my users that they must create their file through my app to make it accessible to it. The app needs to use Google Sheets, and so I'm not sure how to have my app open a Google Sheets document when it really just needs to be open by the normal Google Sheets app.

Any pointers you can provide are very helpful as I'm at my wits end with Google's documentation and having scoured forums.

Solution

So, the reason is that in Google's quickstart code for the File Picker, I used the "Project ID" instead of the "Project Number" for the APP_ID constant.

So, in the code there is a comment about what the developer needs to do:

// TODO(developer): Replace with your own project number from console.developers.google.com.
const APP_ID = '1234567890';

I have naively insert the Project ID which can be a string. You can find the number by opening up your project in the Google Cloud Platform and going to the following from the main flyout menu:

IAM & Admin > Settings

And then you will see a field named

Project Number

In the Quickstart code, you need to add this number and NOT the "Project ID"