Unable to register/login new user account via manage email/password authentication (TypeError: Load failed)

[hittt (Nick Chua)]

I am working on a react application using realm Web SDK.

I have a register page with the email and password input fields. When submitting the credentials, I am faced with ‘TypeError: Load failed’ when catching the error.

To verify if my app is working, I have went to view my application app users, and no user entry is created. Have also done all checks such as making sure Email/Password authentication is enabled, and allowing automatic confirmation of users. My app has been set up properly, with my application ID.

Have even went to the extend of using the documentation example to register a new account, but I am still faced with the same error message:

const email = "someone@example.com";
const password = "Pa55w0rd!";
await app.emailPasswordAuth.registerUser({ email, password });

Taken from: https://www.mongodb.com/docs/realm/web/manage-email-password-users/

Can anyone please advise on this issue? Thanks so much in advance!

[hittt (Nick Chua)]

Solution:

For anyone who encounter the same problem as me:

You need to include e.preventDefault(). By default, the browser will send the form data to the current URL and refresh the page. You can override that behaviour by calling e.preventDefault().

My data wasn’t sent because this line wasn’t called. Subsequently, read the form data with new FormData(e.target).

For example:

const onSubmit = async (e: any) => {
  try{
    e.preventDefault()
    const form = e.target;
    const formData = new FormData(form);
    const formJson = Object.fromEntries(formData.entries());
    const user = await data.emailPasswordSignup(formJson.email, formJson.password);
    if (user) {
      redirectNow();
    }
  }
  catch (error) {
    alert(error);
  }
};

Please read: <input> – React

Thanks for reading.