How to store user registration details in database - Mango db, node js , express js

106 Views Asked by At

Hii i previously i created basic user registration and login and dashboard with node js , express , mango dbase , application working successfully now user registration details not storing on mango db database i read some articles but that code written style different i am confused and tried that but failed . now i want to store user register details in database.

enter image description here

these details and enter image description here

i need store in database . see user login successfully but not storing in database enter image description here

anyone help me to make store in database

** This is my backend inex.js code **

const app = express();
const mongoose = require('mongoose');
const cors = require('cors');

const User = require('./models/user.model');


app.use(cors()); // Use the cors middleware
app.use(express.json());

mongoose.connect('mongodb+srv://ganeshnandhipati161999:Ganesh123%40%23%[email protected]/test?retryWrites=true&w=majority', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
 
 


app.post('/api/register', async (req, res) => {
  console.log(req.body);
  try {
      await User.create({
          name: req.body.name,
          email: req.body.email,
          password: req.body.password,
      });
      res.json({ status: 'ok' });
  } catch (err) {
      console.log(err); // Log the actual error for debugging
      res.json({ status: 'error', error: err.message }); // Send the actual error message as the response
  }
});


app.post('/api/login', async (req, res) => {
  const user = await User.findOne({
    email: req.body.email,
    password: req.body.password,
  });
  if (user) {
    return res.json({ status: 'ok', user: true });
  } else {
    return res.json({ status: 'error', user: false });
  }
});

app.listen(1337, () => {
  console.log('Server started on 1337');
});

**This is my registration page code **

import { useNavigate } from 'react-router-dom';

function Register() {
    const navigate = useNavigate(); // Use the useNavigate hook

    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    async function Registeruser(event) {
        event.preventDefault();

        const response = await fetch('http://localhost:1337/api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name,
                email,
                password
            })
        });

        const data = await response.json();

        if (response.ok) {
            // Registration successful
            localStorage.setItem('token', data.user);
            localStorage.setItem('userName', data.userName);
            localStorage.setItem('userEmail',data.userEmail) ;
            console.log('Registration successful');
            navigate('/login'); // Use the navigate function directly
        } else {
            // Registration failed
            setError(data.error || 'An error occurred');
        }
    }

    return (
        <>
            <div className="maindiv">
                <h2>Register</h2>
                <p></p>
                <form onSubmit={Registeruser}>
                    <input
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        placeholder="Your Name"
                    />
                    <p></p>
                    <input
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        placeholder="Email"
                    />
                    <p></p>
                    <input
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        placeholder="Password"
                    />
                    <br />
                    <input type="submit" value="Register" />
                </form>
                {error && <p className="error">{error}</p>}
            </div>
        </>
    );
}

export default Register;

** also login page code **

import { useNavigate } from 'react-router-dom';


function App() {
    const navigate = useNavigate();
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    async function loginUser(event) {
        event.preventDefault()

        const response = await fetch('http://localhost:1337/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email,
                password,
            }),
        })

        const data = await response.json();

        if (data.user) {
            localStorage.setItem('token', data.user);
            localStorage.setItem('userName', data.userName);
            localStorage.setItem('userEmail',data.userEmail); // Store the user's name
            alert('Login successful');
            window.location.href = '/dashboard';
        } else {
            alert('Please check your username and password');
        }
    }

    return (
        <div className='lname'> <h1>Login</h1>
        <div className='login'>
            <form onSubmit={loginUser}>
                <input
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    type="email"
                    placeholder="Email"
                />
                <br />
                <input
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    type="password"
                    placeholder="Password"
                />
                <br />
                <input type="submit" value="Login" />
            </form>
        </div>
        </div>
    )
}

export default App ``` 


please give reference and solution
0

There are 0 best solutions below