I'm trying to create signup Form using React, Express and MongoDB. I successfully implemented the post request and saved the user data in the database.
However,though the user is saved in the database, I failed to store ( see it the browser ) the jwt token using res.cookie('jwt',token).
I have a simple form made in React:
type Props = { children: React.ReactNode; }; export const SignupLayout = ({ children }: Props) => { const user = { email: '[email protected]', username: 'alexladies', password: 'pasrfsfsdfgfdsd', securityQuestion: "father's name", securityAnswer: 'jhon', joinedDate: '12-12-2023', }; const handleSignup = async (event: React.SyntheticEvent) => { event.preventDefault(); // The problem is here await fetch('http://localhost:3000/signup', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(user), }) .then((reponse) => reponse.json()) .then((json) => console.log(json)) .catch((err) => console.log(err)); }; return ( <form onSubmit={handleSignup} method='post' action='/signup' className='sm:px-20 md:w-2/3 md:px-12 lg:w-1/2 lg:px-4 lg:my-4 xl:mt-16 xl:w-1/3 xl:px-16 mx-auto bg-white rounded-2xl py-10 text-center ' > {children} </form> ); }; My express server:
const User = require('../../models/user'); const { handleError } = require('./error'); const { createToken } = require('../utils/token'); const getSignup = (req, res) => { // It stores the cookie in the browser succesfully res.cookie('name', 'value'); res.send('ok'); }; const postSignup = async (req, res) => { // It failed to store the cookie in the browser ! const { email, password, username, securityQuestion, securityAnswer, joinedDate, } = req.body; const user = new User({ email, password, username, securityQuestion, securityAnswer, joinedDate, }); await user .save() .then(() => res.cookie('jwt', createToken(user._id))) .then(() => res.status(200).json(user._id)) .catch((err) => { res.status(400).json(handleError(err)); }); }; module.exports = { getSignup, postSignup }; I have tried to add:
credentials:'include' But it does not work.
Sreenshot
createTokendoing?jwttoken.