# Companion connection with react

**URL:** https://community.transloadit.com/t/companion-connection-with-react/16619
**Category:** Uppy
**Created:** [May 19, 2023, 5:07pm UTC](https://community.transloadit.com/t/companion-connection-with-react/16619 "2023-05-19T17:07:44Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![sergiogomeza](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/sergiogomeza/32/866_2.png) [@sergiogomeza](https://community.transloadit.com/u/sergiogomeza)
#### Post date: [May 19, 2023, 5:07pm UTC](https://community.transloadit.com/t/companion-connection-with-react/16619/1 "2023-05-19T17:07:44Z")

</div>

Hi, i’m trying to test companion connection with a Reactjs application but i can’t make it work properly. When i try to connect with google i receive this error.

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/transloadit/original/1X/47cdfefc5c260c0d2145fe11ac1797a277243d51.png)

Backend companion options:

```auto
const companionOptions = {
  providerOptions: {
    drive: {
      key: GOOGLE_DRIVE_KEY,
      secret: GOOGLE_DRIVE_SECRET,
    },
  },
  server: {
    host: `localhost:${PORT}`,
    protocol: "http",
  },
  filePath: FILE_PATH,
  debug: true,
  secret: "realsecret",
  uploadUrls: `http://localhost:${PORT}`,
};

```

Frontend configuration:

```auto
import Uppy from "@uppy/core";
import GoogleDrive from "@uppy/google-drive";
import { Dashboard } from "@uppy/react";

import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";

export const CustomDashboard = () => {
  const uppy = new Uppy({
    onBeforeFileAdded: (currentFile, files) => {
      console.log({ currentFile, files });
    },
    onBeforeUpload: (files) => {
      console.log("beofre upload", { files });
    },
  });
  uppy.use(GoogleDrive, { companionUrl: "http://localhost:3030" });

  return (
    <Dashboard
      showProgressDetails={true}
      uppy={uppy}
      plugins={["GoogleDrive"]}
    />
  );
};

```

---

<div class="post-metadata">

### Author: ![MyFirstVlog](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/myfirstvlog/32/868_2.png) [@MyFirstVlog](https://community.transloadit.com/u/MyFirstVlog)
#### Post date: [May 19, 2023, 5:13pm UTC](https://community.transloadit.com/t/companion-connection-with-react/16619/2 "2023-05-19T17:13:29Z")

</div>

Uff this will help me too, Please ¨support¨ help us

---

<div class="post-metadata">

### Author: ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)
#### Post date: [May 22, 2023, 11:54am UTC](https://community.transloadit.com/t/companion-connection-with-react/16619/3 "2023-05-22T11:54:34Z")

</div>

Hi, you are not initializing Uppy correctly in React.

Please checkout the docs [React | Uppy](https://uppy.io/docs/react/)