docs: auth setup instructions for Dropbox and Google Drive (#2345)

Co-authored-by: Ifedapo .A. Olarewaju <ifedapoolarewaju@gmail.com>

website/src/docs/companion.md

@@ -19,8 +19,8 @@ Companion handles the server-to-server communication between your server and fil
 
 As of now, Companion is integrated to work with:
 
-- Google Drive
-- Dropbox
+- Google Drive - [Set up instructions](/docs/google-drive/#Setting-Up)
+- Dropbox - [Set up instructions](/docs/dropbox/#Setting-Up)
 - Instagram
 - Facebook
 - OneDrive

website/src/docs/dropbox.md

@@ -39,13 +39,47 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Dropbox = Uppy.Dropbox
 ```
 
+## Setting Up
+
+To use the Dropbox provider, you need to configure the Dropbox keys that Companion should use. With the standalone Companion server, specify environment variables:
+```shell
+export COMPANION_DROPBOX_KEY="Dropbox API key"
+export COMPANION_DROPBOX_SECRET="Dropbox API secret"
+```
+
+When using the Companion Node.js API, configure these options:
+```js
+companion.app({
+  providerOptions: {
+    dropbox: {
+      key: 'Dropbox API key',
+      secret: 'Dropbox API secret'
+    }
+  }
+})
+```
+
+You can create a Dropbox App on the [Dropbox Developers site](https://www.dropbox.com/developers/apps/create).
+
+Things to note:
+- Choose the "Dropbox API", not the business variant.
+- Typically you'll want "Full Dropbox" access, unless you are very certain that you need the other one.
+
+You'll be redirected to the app page. This page lists the app key and app secret, which you should use to configure Companion as shown above.
+
+The app page has a "Redirect URIs" field. Here, add:
+```
+https://$YOUR_COMPANION_HOST_NAME/connect/dropbox/callback
+```
+
+You can only use the integration with your own account initially—make sure to apply for production status on the app page before you publish your app, or your users will not be able to sign in!
+
 ## CSS
 
 Dashboard plugin is recommended as a container to all Provider plugins, including Dropbox. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
 
 ⚠️ If you are feeling adventurous, and want to use Dropbox plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officially supported and not recommended.
 
-
 ## Options
 
 The `@uppy/dropbox` plugin has the following configurable options:

website/src/docs/google-drive.md

@@ -39,6 +39,37 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const GoogleDrive = Uppy.GoogleDrive
 ```
 
+## Setting  Up
+
+To use the Google Drive provider, you need to configure the Google Drive keys that Companion should use. With the standalone Companion server, specify environment variables:
+```shell
+export COMPANION_GOOGLE_KEY="Google Drive OAuth client ID"
+export COMPANION_GOOGLE_SECRET="Google Drive OAuth client secret"
+```
+
+When using the Companion Node.js API, configure these options:
+```js
+companion.app({
+  providerOptions: {
+    drive: {
+      key: 'Google Drive OAuth client ID',
+      secret: 'Google Drive OAuth client secret'
+    }
+  }
+})
+```
+
+To sign up for API keys, go to the [Google Developer Console](https://console.developers.google.com/).
+
+Create a project for your app if you don't have one yet.
+- On the project's dashboard, [enable the Google Drive API](https://developers.google.com/drive/api/v3/enable-drive-api).
+- [Set up OAuth authorization](https://developers.google.com/drive/api/v3/about-auth). Use this for an authorized redirect URI:
+   ```
+   https://$YOUR_COMPANION_HOST_NAME/connect/google/callback
+   ```
+
+Google will give you an OAuth client ID and client secret. Use them to configure Companion as shown above.
+
 ## CSS
 
 Dashboard plugin is recommended as a container to all Provider plugins, including Google Drive. If you are using Dashboard, it [comes with all the necessary styles](/docs/dashboard/#CSS) for Google Drive as well.