Login Form Using Google Cloud Datastore with ReactJS-CodePudding

I'm new to Google App Engine and Datastore, and I'm trying to build a simple login form that checks my Datastore entities to see if the login details provided by the user matches. I'm building this form with ReactJS but I don't know how to link it with Datastore.

I installed the package @google-cloud/datastore but it returns a lot of errors that says it can't resolve child_process, fs, net, and tls.

I've looked for any questions similar to mine but I couldn't find any results that work for me.

How do I link my ReactJS project with Google Datastore so that I can validate the user's entered details? Thank you!

Here is my file structure.

Here's a screenshot of my dependencies.

login.jsx

import React, { useEffect, useState } from "react";

const { Datastore } = require("@google-cloud/datastore");

const Login = () => {
  const [users, setUsers] = useState();
  const datastore = new Datastore({
    projectId: "XXX-XXX-123456",
  });

  // Set the page's title
  document.title = "Login | Task 1";

  useEffect(() => {
    const init = () => {
      const query = datastore
        .createQuery("user")
        .order("id", {ascending: true});

      setUsers(datastore.runQuery(query));
    };

    init();
  }, []);

  const validateInput = () => {
    // ...
  }

  return (
    <div className="login">
      <h1>Login</h1>

      <form onSubmit={validateInput}>
        <label for="id"><b>ID</b></label>
        <input type="text" placeholder="Enter ID" name="id" required />
        <br />

        <label for="user_name"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="user_name" required />
        <br />

        <label for="password"><b>Password</b></label>
        <input type="text" placeholder="Enter Password" name="password" required />
        <br />

        <button>Login</button>
      </form>
    </div>
  );
}

export default Login;

CodePudding user response：

The @google-cloud/datastore is a Client Library for Node.js and meant to be used on server side and not in a web application. You must also initialise the Datastore SDK using a service account or Application Default Credentials ADC.

You can use Callable Cloud Functions to use Datastore and call it from your web app as shown below:

// Cloud Function
exports.functionName = functions.https.onCall((data, context) => {
  // read/write from Datastore
});

// Call the function from web app
const fnName = firebase.functions().httpsCallable('functionName');
fnName({})
  .then((result) => {
    console.log(result.data);
  });

If possible, you can upgrade to Firestore and then use Firebase Client SDK that can be used directly on client side.

CodePudding user response：

If you want to use Google App Engine and Datastore consider using Google Cloud Endpoints. Cloud Endpoints is an API interface that will run on App Engine and allow you to access Datastore, Google Cloud Storage and other server-side APIs.

Another simpler option is to use Firestore. Firestore is more heavy on client-side code but have the auto-scaling features of App Engine as well.