Firebase Function 403 Forbidden error when function invoked?

Question

First time posting so apologies if my format isnt completely correct. I'm currently trying to build a firebase function which takes input from a contact form and emails it to me using nodemailer. The function is called when a form is submitted, which results in this Error

From what I've read online, the error is to do with authorization and can normally be resolved by adding 'allUsers' to the roll 'Cloud function invoker' in the cloud function dashboard. I've tried this and doesnt fix the problem.

I'd really appreciate any help anyone can offer!

Thanks.

My Firebase function is:

 const functions = require("firebase-functions");

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//   functions.logger.info("Hello logs!", {structuredData: true});
//   response.send("Hello from Firebase!");
// });
const nodemailer = require("nodemailer");
const cors = require("cors")({ origin: true });
 /** * using gmail with nodemailer */
let transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 465, secure: true,
    auth: { 
        user: "Myemail@gmail.com", 
        pass: "********",
        },
});

exports.sendMail = functions.https.onRequest((req, res) => {
    cors(req, res, () => { // getting dest email by query string
        const email = req.query.email; 
        const name = req.query.name;
        const message = req.query.message;
        const mailOptions = {
            from: "Myemail@gmail.com",
            to: "Myemail@gmail.com",
            subject:"Contact Form Message", // email subject
            html: ` <div> From:` + name + `<br /><br />
            Email: ` + email + `<br /><br />
            Message:` + message + `<br /><br /> </div> `, // email content in HTML
            };
// returning result
return transporter.sendMail(mailOptions, (erro, info) => {
    if (erro) { 
    return res.send(erro.toString());
    } 
    return res.send("Message Sent"); 
    });
  });
});

The contact form html is:

  <section id="contact_form">
       <div class="container-out">
  <div class="container-in">
    <div class="contact-form">
      <p>Name</p>
      <input type="text" id="contact-name" />
      <p>Email</p>
      <input type="email" id="contact-email" />
      <p>Message</p>
      <textarea id="contact-message"></textarea>
      <button id="send">Send</button>
    </div>
  </div>
</div>
    </section>

And the Javascript functions are:

<script type="text/javascript">
document.getElementById("send").addEventListener("click", validateForm);
      function validateForm() {
        //gets the name
        var name = document.getElementById("contact-name").value;
        //gets the email
        var email = document.getElementById("contact-email").value;
        //gets the message
        var message = document.getElementById("contact-message").value;

        //checks if all fields have been filled before sending message.
        if (name.trim() == "" || email.trim() == "" || message.trim() == "") {
          alert("all fields must be filled");
        } else {
          sendMessage(name, email, message);
        }
      }

      //sends information to firebase
      function sendMessage(name, email, message) {
        //sends the name, email and message by passing them as url parameters
        window.location.href =
          "https://us-central1-ccatest-dfd51.cloudfunctions.net/sendMail" +
          "name="
          +
          name +
          "&email=" +
          email +
          "&message=" +
          message +
          "";
      }
</script>

Answer 1

The problem is in the URL you tried to access (which tries to access a missing function and is denied):

/sendMailname=John%20Smith&email=Jsmith@gmail.com&message=Test%20contact%20form

It should be:

/sendMail?name=John%20Smith&email=Jsmith@gmail.com&message=Test%20contact%20form
         ^