Problem with using google earth engine api with react

Question

I am creating a react app with google earth engine API and leaflet with a Django backend. The backend will be used for computer vision purposes, Google earth engine is to be used to add layers to the map with the dataset available through it, but I'm not able to authenticate the API on the client side as I can send the earth engine through the server cause it requires initializing the google earth engine neverthless. How to tackle this problem?

I tried authenticating through client id:

var ee = require('@google/earthengine');
ee.data.authenticateViaOauth("client-id");
ee.initialize();

I get this error :

Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential.

And when I try to use the service account auth:

var ee = require('@google/earthengine');
ee.data.authenticateViaPrivateKey('.key.json');
ee.initialize();

I get this error :

Use of private key authentication in the browser is insecure. Consider using OAuth, instead.
    at __webpack_modules__.../../../../node_modules/@google/earthengine/build/browser.js.ee.data.authenticateViaPrivateKey

Answer 1

The code is being run in the browser which is why you're getting that error. You can either use OAuth on the client side or service auth on the server side. https://developers.google.com/earth-engine/guides/service_account