signup.js
const Signup = () => {
const [username, Username] = useState("");
const [password, Password] = useState("");
const Post = () => {
fetch("/signup", {
method: "post",
headers: {
"Content-Type":"application/json",
"Accept":"application/json",
},
body: JSON.stringify({
username: "",
password: "",
})
})
.then(response => response.json())
.then(data => {
console.log(data)
})
}
return (
<div>
<input type="text" placeholder="username" value={username} onChange={ (e) => Username(e.target.value) }/>
<br/>
<input type="text" placeholder="password" value={password} onChange={ (e) => Password(e.target.value) }/>
<br/>
<button id="submit_button" onClick={ () => Post() }>Sign up</button>
</div>
)
}
function from auth.js from backend
router.post("/signup", (request, response) => {
const username = request.body.username;
const password = request.body.password;
// If missing a field: error
if (!username || !password) {
response.status(422).json({ error: "Please add all fields" })
}
// Checks if there already exists an account with that username
user.findOne({ username: username })
.then ((saved_user) => {
if (saved_user) {
return response.status(422).json({ error: "There already exists an account with that username"})
}
})
// Creates a new user and saves the account
const user = new user({ username, password })
user.save()
.then(user => {
response.json({ message: "Account Saved Sucessfully"})
})
.catch(error => {
console.log(error)
})
})
Does anyone know what's wrong? It seems like the json object I'm posting from signup.js as an undefined body for some reason. I already declared username as a constant earlier in the function though. IDK how to fix that.
CodePudding user response:
Solved. Forgot to add App.use(express.json());
before routes.
CodePudding user response:
You are not giving the username and password in the body
body: JSON.stringify({
username: "",
password: "",
}).
const Signup = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const Post = () => {
fetch("/signup", {
method: "POST",
headers: {
"Content-Type":"application/json",
"Accept":"application/json",
},
body: JSON.stringify({
username: username,
password: password,
})
})
.then(response => response.json())
.then(data => {
console.log(data)
})
}
return (
<div>
<input type="text" placeholder="username" value={username} onChange={ (e) => setUsername(e.target.value) }/>
<br/>
<input type="text" placeholder="password" value={password} onChange={ (e) => setPassword(e.target.value) }/>
<br/>
<button id="submit_button" onClick={ () => Post() }>Sign up</button>
</div>
)
}
Try to use like this , maybe it can work.