Using Google Drive in Retool: Configuring OAuth, Viewing & Creating New Files

Retool already exposes users to a number of powerful native Google integrations such as Google Sheets and BigQuery, but something that users are often looking for is a direct Google Drive integration. Thankfully, Retool can connect to nearly anything, and connecting to your Drive is also totally possible. Nevertheless, OAuth can be an unwieldy beast, and the associated naming conventions can quickly become quite tricky when integrating it into Retool. In this tutorial, we will walk through how to connect the Google Drive API to your Retool environment, pull your files into an application, and create new ones.

Set up your Google Drive API Project

To start off the tutorial you need to login to the Google API Console to create a new project. In the top left corner, you’ll click Select a Project and then New Project once the modal opens, as below.

Now, give it a name - I named mine “Retool Integration” to keep things as clear and organized as possible. Click Save.

‍

Adding consent and scopes to your Google API project

Once your New Project is named, head to the ‘Credentials’ tab in the left panel. 

‍

The first thing you’ll need to head towards here is a ‘Configure Consent Screen’. 

Here, you will be given the choice between setting up your GDrive integration with only your internal team (internal) or any test user (external). To help you answer this: if your Retool environment and use case only allows for those in your organization to use it, choose ‘internal’, this allows you to skip the Google verification process for your application. If you are not associated with a Google organization, you’ll need to choose external. 

Next, you’re required to fill out your application's name, support email, and developer address. Click “Save and Continue”.

On the next screen, you’ll be asked to add in the scopes that you’d like to expose in Retool. In my case, since I’ll be the only one using this application, I’m fine with providing access to all Google Drive scopes. Click “Add or Remove Scopes” and select the Google Drive scopes from the table and click “Update”. 

If you’re not sure what scopes you should limit or not, have a read through the Google Documentation.

Now that we have the basics for our application, we can click Save and Continue until we reach the final save screen.

Configuring your Google API Credentials 

Google API Settings

Now we can move on to finding those tricky credentials and adding them to your Retool resource! Start here by creating a new REST API resource in the Retool app, which you can learn to do in the resource documentation.

Note: It’s a good idea to open up your Retool resource configuration panel alongside this step since you will be copying a lot of data from the Google console into Retool. 

First we will create an API key in the Google console. Click “Create Credentials” and select ”API Key”. 

Copy the API Key that opens and add it as a URL parameter to your Retool resource with “key” as the key like so: 

The next credential you’ll need is the OAuth Client ID -  Click “Create Credentials” again and this time click the OAuth Client ID. Since we are using Retool, we will want to select “Web Application” from the Application Type dropdown that appears. Name the application. 

Note: this is where things start to get a bit sticky...

For the Authorized JavaScript Origins URI at the bottom of that page, you will need to put the domain of your Retool environment.

This effectively authorizes browser requests from this particular domain, and since this is where you’ll be building the app, and pulling the data from, this is what you link. 

The next credential you need to add in this page is the Authorized Redirect URI: this is what Retool calls “OAuth Callback URL”. If you want to share access between users, you’ll use:

https://oauth.retool.com/oauth/oauthcallback

If you want to keep access on the individual level only you’ll instead use:

https://oauth.retool.com/oauth/user/oauthcallback

Click Save. Copy your client ID and Client Secret and paste them in their respective spots in the Retool Resource under ‘Client ID’ and ‘Client Secret’ 

Congrats! You are nearly done with the Google Drive side of things. 

Connect your API to Retool

All we have left to connect our data is a couple of fields inside of our Retool Resource. Let’s start with the base URL. For Google Drive the base URL is:

https://www.googleapis.com

Paste this into your resource in the ‘Base URL’ position. 

Next up is including the OAauth2 token in our header. Lets paste that in our header section here: 

Next up is the Authorization and Access URLS. We’ve already nabbed  these from Google’s documentation for you: 

Authorization URL: https://accounts.google.com/o/oauth2/v2/auth

Access Token URL: https://oauth2.googleapis.com/token

Lastly you will need to include available scopes. Available scopes are detailed in the Google documentation.: 

For this tutorial I opted for: https://www.googleapis.com/auth/drive, but you’ll need to choose one according to the scopes you used in the original setup.

If everything was configured correctly, you should now be able to save and test your integration! Click test OAuth with your own account and go through the OAuth workflow.

If everything has gone according to plan, you should now have a functioning Google Drive integration inside of your Retool environment. In the next section we will run through how you can use this integration to upload files into your Google Drive from Retool.
‍

Using Google Drive in Retool applications 

Google Drive exposes quite a few endpoints for their API, so to start off, let’s pull a list of files from our Google Drive into our Retool environment. Inside the bottom panel of a Retool application create a new query and select your Google Drive Resource.

Our first query is super easy. Simply add “files” to the end of your base URL and click run:

This will return an array of files. Let’s put the response into a Retool table by pulling in a table component and referencing your query (I called mine pullFile):

You can see that the list has pulled in a few pieces of data for each file, but most of which isn’t useful to an end-user, so let’s hide everything but the name of our file, by clicking the ‘eye’ icon in the columns list in the right-hand column. Then, put a container next to it and pull in an iFrame component, so that we can access the Google doc right from within our app:

To connect this container and iFrame, we will want to display the file in the container on click of a row in the table. To do this we will use another query to get the webview link, which exposes the same link you’ll see when you open a Google Doc in your browser and share it with others:

In this query we are taking the ID of the selected row and asking for the webviewLink field. Now, go back to the table component, and add an event handler to trigger this query each time the selected row changes.

Now you can connect this query to your iFrame by referencing it in the iFrame component. 

And there you have it - that’s the Google Sheet that I’m writing this tutorial on right now!

You now have a Google Drive File browser in Retool! 

Now, if you have a ton of docs in your Google account you can also add a filter to help organize the list. There are a range of ways in the ‘search for files’ Google documentation, and it’s possible to filter by folder using the parent/child options in the metadata.

Let’s add some functionality to upload documents in Retool.
‍

‍

Uploading Documents

Now that we have the integration set up, we are going to add a way for users to upload files to a specified folder.  Let’s make a quick query to get a list of available folders, using the ‘q’ parameter:

mimeType = ‘application/vnd.google-apps.folder’

Here, the “q” parameter  only queries objects with a folder ‘mime type’ (essentially - file type). You can use this to search for other types of mime types as well, check out the Google documentation for more details..

Next, let’s add a Select component and map our query results to the values:

Make sure here that you map the ‘ids’ of the folder to the Select’s values but the name of the folder to the Select’s labels. This way users can see the name of the folder when selecting one, but the id is passed through when it has been selected.

Now that our app can display the files in our Google Drive account, and we have a way to select a folder for our upload, let's add a UI for users to create new Google docs using a GDrive Post request. Pull in a modal, add in a rich text editor, text input, our folder Select component and a submit button.

It should look something like this:

Now we can now work on making our queries. We will use one query to create the metadata for our object, and another to upload the actual text entered in our rich text editor component.

Here is our first query to update our meta data:

‍

{ "mimeType": "application/vnd.google-apps.document",
"name": {{fileName.value}},
"parents": [{{folderSelector.value}}] }

Here we specify the mime type, the folder to upload the file to and the name of the file. For this tutorial, I use the Google Doc mime type. You can find a list of acceptable mime types here in the Google docs.In this case the ‘parents’ ID is associated to the ‘value’ attribute of our folder Select component and the file name is generated by the ‘File Name’ text input component..

Here is our second query - we will use this one to upload the data from the rich text editor as text in a new document:

For this new query we will need to set the request type to PATCH and change the request’s URL to include the ID of the new Google Doc object we just created in the previous query. So, to facilitate this, we’ll set this query to only be run on success of the first.

upload/drive/v3/files/{{uploadFile.data.id}}/?uploadType=media

‍‍
We also need to specify the content-type of the file that we are uploading. Since in this tutorial we are using a rich text editor, we included content-type:text/html in the header, but this field will need to match the data you are inputting accordingly.

Now we will include the data to be uploaded. In the body of the query you can simply refer back to the rich text editor’s value, like so: {{richTextEditor1.value}}.

To finish this query off, since we will want to refresh our updated list of files after this new file upload, by running our ‘pullFile’ query ‘On Success’, in the event handlers below.

For the final touch, you will need to return back to the first metadata upload query and set this second upload query to be run on success. You can do this by selecting the second upload query from the  “On Success” dropdown.

Now that you’ve created your upload queries, it’s now time to test it out! Now you can create and upload Google files and collaborate on them, right within your Retool apps!

‍