Public Key Invalid...But It's Not

[danielbirch]

Hi there,

I setup EmailJS on my site many months ago, some time ago it stopped working. I compared my code and found that the EmailJS code has changed. I went through the docs again and updated my code. However I'm getting this error:

 POST https://api.emailjs.com/api/v1.0/email/send-form 400 (Bad Request)
(index):54 Failed t {status: 400, text: 'The Public Key is invalid. To find this ID, visit https://dashboard.emailjs.com/admin/account'}

BUT, the public key is 100% correct. I tried also regenerating a new public key and using that, triple checked everything and still no go.

Any help is greatly appreciated. Any ideas where I can look next or what may be going on?

[xr0master]

You should look in the Network tab to check what data you are actually sending to the service.
If you are not using SDK, most likely the context type is not correct.

[xr0master]

It is quite clear in your screenshot that the public key (user ID) is not valid.

[danielbirch]

Ok so user_id is the public key? Good to know.
However the public key is 1 billion percent correct...

This is what's puzzling me.

[xr0master]

Most likely you override it somewhere else, I think you should debug the application. You can share with us the emailjs.sendForm code

[danielbirch]

I wish I did have it somewhere else, it would be an easy fix. My application is very simple, a portfolio and I checked again, the public key appears only one time. The only other area could be the order of the arguments for the .sendForm method?

I have been debugging it, when the form is submitted the error shows in the console and no events are logged in EmailJS. So that means the sendForm method is not triggering and looking at the error, it appears to be because the public key is invalid. So I expect...

A. The public key is incorrect - but it's not, I copied and pasted and you can see it's the same
B. The public key is in the wrong place - it's in the right where the docs say it should be
C. There's another public key somewhere in the code - there isn't, I've checked my code several times
D. The public key may have expired? - which is why I regenerated a new public key just to be sure and still no luck

Could it be a scope issue, does the sendForm code need to be in the same code block as the emailjs.init function?

It's very frustrating, many months ago I had this working fine. Then EmailJs changed the placement of the public key in the code, so I updated my code to reflect these changes and I haven't been able to get it working since.

I appreciate your input on this @xr0master

[danielbirch]

Sure here is the code:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
  
  <script type="text/javascript">
    (function() {
        // https://dashboard.emailjs.com/admin/account
        emailjs.init('ElvR8U91ELN6yUuSr');
    })();
  </script>

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
// window.onload = function () {
	document
		.getElementById("contact-form")
		.addEventListener("submit", function (event) {
			console.log("Form submitted");
			event.preventDefault();
			// Generate five digit number for contact_number variable
			this.contact_number.value = (Math.random() * 100000) | 0;
			// // Grab recaptcha response
			var token = grecaptcha.getResponse();
			// Send and error handling
			emailjs
				.sendForm("contact_service", "contact_form",
					this,
					{ "g-recaptcha-response": token }
				)
				.then(
					function () {
						console.log("Success");
						document.getElementById("g-recaptcha").classList.add("hidden");
						const inputs = document.querySelectorAll("#user_name, #user_email, #message");
						inputs.forEach((input) => {
							input.value = "";
						});
					},
					function (error) {
						console.log("Failed", error);
					}
				);
		});
});
  </script>

[xr0master]

The 4th variable in the .sendForm function is the Public Key, but you put the object.
In your case, it will be

emailjs.sendForm("contact_service", "contact_form", this)

[danielbirch]

If anyone knows the answer to this it would be massively helpful. 🙏🏻

[xr0master]

your code does not match the documentation, we showed you where the issue is. I don't even know what else you want to hear.

[danielbirch]

The documentation says nothing about where to place the recaptcha token capture code, only that you should include it. If you don't know either, that's fine mate. No need for hostility, you're not obliged to answer. I appreciate your assistance so far however, so thank you.

[xr0master]

The recaptcha code is taken automatically from the form, just fix your code and try to run :)

[danielbirch]

You sir are my new favourite person, thank you! It worked. 😊