Hi, I am currently trying to follow this guide below to create a React app that creates a site that can log in using the Atlas realm user feature.

However, whenever I make a request to create a user, it shows the “invalid json (status 400)” error message. I’m fairly new to this, any help would be great! Thanks a lot in advance.

Here’s the exact error message that i got (the xxxxxxxx part is replaced with my App ID)

Error: Request failed (POST https://realm.mongodb.com/api/client/v2.0/app/xxxxxxxx/auth/providers/local-userpass/register): invalid json (status 400)

Here’s my code for the registration page

import { Button, TextField } from "@mui/material";
import { useContext, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";

const Signup = () => {
    const navigate = useNavigate();
    const location = useLocation();

    const { emailPasswordSignup } = useContext(UserContext);
    const [form, setForm] = useState({
        email: "",
        password: ""
    });

    const redirectNow = () => {
        const redirectTo = location.search.replace("?redirectTo=", "");
        navigate(redirectTo ? redirectTo : "/");
    };

    const onFormInputChange = (event) => {
        const { name, value } = event.target;
        setForm({ ...form, [name]: value });
    };

    const onSubmit = async() => {
        try {            
            const user = await emailPasswordSignup(form.email, form.password);
            if (user) {
                redirectNow();
            } 
        } catch (error) {            
            alert(error);
        }
    };

    return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
    <h1>Signup</h1>
    <TextField
      label="Email"
      type="email"
      variant="outlined"
      name="email"
      value={form.email}
      onInput={onFormInputChange}
      style={{ marginBottom: "1rem" }}
    />
    <TextField
      label="Password"
      type="password"
      variant="outlined"
      name="password"
      value={form.password}
      onInput={onFormInputChange}
      style={{ marginBottom: "1rem" }}
    />
    <Button variant="contained" color="primary" onClick={onSubmit}>
      Signup
    </Button>
    <p>Have an account already? <Link to="/login">Login</Link></p>
  </form>
}

export default Signup;

And here’s the emailPasswordSignup UserContext

    const emailPasswordLogin = async (email, password) => {
        const credentials = Credentials.emailPassword(email, password);
        const authenticatedUser = await app.logIn(credentials);
        setUser(authenticatedUser);
        return authenticatedUser;
    };

    const emailPasswordSignup = async (email, password) => {
        try {
            await app.emailPasswordAuth.registerUser(email, password);
            return emailPasswordLogin(email, password);
        } catch (error) {
            throw error; 
        }
    };