Issue with sending authentication email

I am using the example code to send Welcome email


import imga from "./images/giveaway.png";
import React, { useState } from "react";
import "./App.css";
import { useMoralis, useMoralisCloudFunction } from "react-moralis";
import { Button, Box, Input, Heading, Image, Stack } from "@chakra-ui/react";
import { Container, Center } from "@chakra-ui/react";

const LogoutButton = () => {
  const { logout, isAuthenticating } = useMoralis();

  return (
    <Button
      display={"block"}
      colorScheme="red"
      variant="solid"
      isLoading={isAuthenticating}
      onClick={() => logout()}
      disabled={isAuthenticating}>
      Logout
    </Button>
  );
};

// ---------- APP -------------
function App() {
  const { login, isAuthenticated, authenticate, Moralis } = useMoralis();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleEmailChange = (event) => setEmail(event.target.value);
  const handlePasswordChange = (event) => setPassword(event.target.value);
  const handleUsernameChange = (event) => setUsername(event.target.value);

  const {
    fetch: callEmailCloudFunction,
   // data,
  //  error,
  //  isLoading,
  } = useMoralisCloudFunction(
    "sendWelcomeEmail",
    {
      email: email,
      name: username,
    },
    { autoFetch: false }
  );

  const signupFunc = async () => {
    console.log(username, password, email);

    const user = new Moralis.User();
    user.set("username", username);
    user.set("password", password);
    user.set("email", email);

    try {
      await user.signUp();
      alert("succesfully Signed up");
      // Hooray! Let them use the app now.
    } catch (error) {
      // Show the error message somewhere and let the user try again.
      alert("Error: " + error.code + " " + error.message);
    }

    // login(username, password, email);
  };

  const loginUsingUsername = async () => {
     let loginResponse = await login(username, password);
    if(!loginResponse)
      alert("Invalid login credentials!");

  };

  //Login Only using Wallet
  //
  const loginUsingMetamask = () => {
    authenticate();
  };

  //Send welcome email to user
  const sendWelcomeEmail = () => {
    //pick the user email from state
    callEmailCloudFunction();
  };

  const resetPassword = () => {
    //getting email from email input
    if (email) {
      Moralis.User.requestPasswordReset(email)
        .then(() => {
          alert("Successfully Password Email Sent");
          // Password reset request was sent successfully
        })
        .catch((error) => {
          // Show the error message somewhere
          alert("Error: " + error.code + " " + error.message);
        });
    } else {
      alert("Enter email first");
    }
  };

  // ----- Authenticate page---------
  if (!isAuthenticated) {
    return (
      <Container maxW="container.lg" p={50}>
       
        <br />
       
        <Center>
          <Heading as="h2" size="xl" p={5}>
           BankX Token Event
          </Heading>
        </Center>
        <br />
        <Center>
          <img src={imga} alt="bankX Token Giveaway" />
        </Center>
        <Center>
       
</Center>
<Center>
          <Input
            value={email}
            onChange={handleEmailChange}
            placeholder="Email"
            size="md"
            variant="outline"
          />
          
          <Input
            value={password}
            onChange={handlePasswordChange}
            placeholder="password"
            size="md"
            bs="solid"
          />
          <Input
            value={username}
            onChange={handleUsernameChange}
            placeholder="username"
            size="md"
            bs="solid"
          />
        </Center>
        <br />

        <Center>
          <Button colorScheme="blue" size="lg" onClick={signupFunc}>
            #1.  Sign up using username and password
          </Button>
        </Center>
        <br />
              <div>(or)</div>
        <Center>
          <Button colorScheme="blue" size="lg" onClick={loginUsingUsername}>
           #1. Login using username and password
          </Button>
        </Center>
        <br />

        <Center>
          <Button colorScheme="blue" size="lg" onClick={loginUsingMetamask}>
          #2.  Authenticate with Metamask
          </Button>
        </Center>
        <br />

        <Center>
          <Button colorScheme="blue" size="lg" onClick={sendWelcomeEmail}>
            Send Welcome Email for{" "}
            {email ? email : "[Please enter email in field]"}
          </Button>
        </Center>
        <br />
      

      </Container>
    );
  }

  return (
    <Box display={"block"} p={35} className="App">
      <LogoutButton />
      <Center>
        <Heading as="h2" size="3xl" p={10}>
          BankX Token 
        </Heading>
      </Center>
      <Center>
        <img width={500} height={500} src={imga} alt="logo" />
      </Center>
      <Center>
        <Heading as="h5" size="md" p={10} color="green">
          Logged In
        </Heading>
      </Center>
    </Box>
  );
}

export default App;

and getting this error

I had thought you said it should work from my machine , but maybe I worded the question wrong? is this error tetlling me I have to have a domain hosted to do the email ?

what do you have in that sendWelcomeEmail cloud function?

im getting JSON returned : code 141
error invalid function …/sendWelcomeEmail

const {
    fetch: callEmailCloudFunction,
   // data,
  //  error,
  //  isLoading,
  } = useMoralisCloudFunction(
    "sendWelcomeEmail",
    {
      email: email,
      //name: username,
      name: "ericnickus"
    },
    { autoFetch: false }
  );

as it is sending email and name to the function like the example '(code above)

I saw this part from your react code, what would be the code from Moralis server cloud functions that would be executed?

for example you could have something like this:

Moralis.Cloud.define("sendEmailToUserD", function (request) {
  Moralis.Cloud.sendEmail({
    to: "[email protected]",
    subject: "welcome",
    html: "an email was sent"
  });
});

I was hoping to use the sendgrid definitions I set up there. I have it all updated into the server. Does that send the welcome email from there ? Im lost about this… you know , to use the feature of emailVerfied

I don’t know what you mean by the welcome email.

when a user signs up, there is an email you send for them to authenticate . This is tied into the field emailVerified or something like that right ?

Yes, something like that, they get an email where they have to click on a link to confirm that email.