Can't make connection to Dialogflow API (V2) using ReactJS

Question

I'm trying to make a connection to Dialogflow API. I downloaded the JSON file with all the credentials and placed the file in my project src folder.

Here is my code:

import React from 'react';
import './App.css';
import jsonInfo from './google.json';
const dialogflow = require('dialogflow');


function App() {

  const sessionClient = new dialogflow.SessionsClient({
    keyFilename: jsonInfo
  });


  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

The error it gives:

You need to pass auth instance to use gRPC-fallback client in browser. Use OAuth2Client from google-auth-library.

Can someone help me with this. Thank you.

Answer 1

Dialogflow provide APIs and libraries to access the response https://cloud.google.com/dialogflow/docs/reference/libraries/nodejs i would strongly advise to call the APIs from your backend and not from frontend code due to security reasons. Calling Dialogflow API from frontend code whether it is angularjs, react js or just vanilla javascript will expose your dialogflow whole data.

Create a backend server, from reactjs, call your server, now in your server, internally call the Dialogflow APIs to get the data and return the required response part.

We have done reactjs dialogflow integration using the same approach, more details are available here: https://www.kommunicate.io/blog/integrate-dialogflow-bot-react-js/