Are you a tech enthusiast exploring the in-depth concepts in MERN Stack? If yes, once you gain the fundamentals, you can proceed with creating a few basic project ideas. You can start by creating a login page using MERN Stack. <\/p>\n\n\n\n
In this blog, we’ll learn the practical implementation of creating a login page using MERN Stack. We’ll be looking at the complete code and its implementation properly. Let’s get started.<\/p>\n\n\n\n
Creating a login page using the MERN<\/a> (MongoDB, Express.js, React.js, Node.js) stack involves building both the frontend and backend components. You should also learn to Use ReactJS to Fetch and Display Data from API<\/a>.<\/strong> Here’s a step-by-step guide on how to create a basic login page using MERN Stack:<\/a><\/p>\n\n\n\n Before diving into the next section, ensure you’re solid on full-stack development essentials like front-end frameworks, back-end technologies, and database management. If you are looking for a detailed Full Stack Development career program, you can join HCL GUVI\u2019s Full Stack Development Course<\/a><\/strong> with Placement Assistance. You will be able to master the MERN stack (MongoDB, Express.js, React, Node.js) and build real-life projects.<\/em><\/p>\n\n\n\n You should also learn to Build a Search Component in React<\/a><\/strong>.<\/em><\/p>\n\n\n\n Also Explore: Interaction Between Frontend and Backend: Important Process That You Should Know<\/strong><\/a><\/em><\/p>\n\n\n\n Now, let’s actually start implementing it and look at the coding part:<\/p>\n\n\n\n For the Backend Part:<\/strong><\/p>\n\n\n\n Let’s look at the coding part for the backend implementation:<\/p>\n\n\n\n 1. Setup Project Structure:<\/strong><\/p>\n\n\n\n 2. Install Dependencies:<\/strong><\/p>\n\n\n\n npm install express mongoose bcryptjs jsonwebtoken cors<\/p>\n\n\n\n 3. Create 4. Create 5. Create Also Read: How to Setup React Router v6?<\/a><\/strong><\/p>\n\n\n\n For the Frontend Part:<\/strong><\/p>\n\n\n\n Let’s look at the coding part for the frontend implementation:<\/p>\n\n\n\n 1. Setup Project Structure:<\/strong><\/p>\n\n\n\n 2. Install Dependencies:<\/strong><\/p>\n\n\n\n 3. Create 4. Modify Not just this, you can also start working on some of the Best MERN Stack Projects To Make<\/strong><\/a><\/em>.<\/p>\n\n\n\n Kickstart your Full Stack Development journey by enrolling in HCL GUVI’s certified Full Stack Development Course<\/a> <\/strong>with Placement Assistance where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects. This program is crafted by our team of experts to help you upskill and assist you in placements.<\/em><\/p>\n\n\n\n By following these steps, you should be able to set up and work on the MERN stack login page project smoothly. Gain a complete understanding of the fundamentals before you start actually implementing it. Have a proper command over the theoretical and practical knowledge before working on this application.<\/p>\n\n\n\n1. Setup MongoDB:<\/h3>\n\n\n\n
\n
2. Setup Backend (Node.js with Express.js):<\/h3>\n\n\n\n
\n
backend<\/code>) and navigate into it.<\/li>\n\n\n\nnpm init -y<\/code>.<\/li>\n\n\n\nnpm install express mongoose bcryptjs jsonwebtoken cors<\/code>.<\/li>\n\n\n\nserver.js<\/code>, User.js<\/code>, auth.js<\/code>) according to the provided code snippets.<\/li>\n<\/ul>\n\n\n\n3. Setup Frontend (React.js):<\/h3>\n\n\n\n
\n
frontend<\/code>) and navigate into it.<\/li>\n\n\n\nnpx create-react-app .<\/code> (assuming you’re already inside the frontend<\/code> directory).<\/li>\n\n\n\nnpm install axios react-router-dom<\/code>.<\/li>\n\n\n\nLogin.js<\/code>, App.js<\/code>) according to the provided code snippets.<\/li>\n<\/ul>\n\n\n\n4. Connect Backend with Frontend:<\/h3>\n\n\n\n
\n
Login.js<\/code>, update the API URL in the Axios request to match your backend server URL (e.g., http:\/\/localhost:5000\/api\/auth\/login<\/code>).<\/li>\n\n\n\n\/backend \n\n |- package.json \n\n |- server.js \n\n |- \/models \n\n |- User.js \n\n |- \/routes \n\n |- auth.js<\/code><\/pre>\n\n\n\nserver.js<\/code>:<\/strong><\/p>\n\n\n\nconst express = require('express'); \n\nconst mongoose = require('mongoose'); \n\nconst cors = require('cors'); \n\nconst bodyParser = require('body-parser'); \n\nconst authRoutes = require('.\/routes\/auth'); \n\nconst app = express(); \n\napp.use(cors()); \n\napp.use(bodyParser.json()); \n\nmongoose.connect('mongodb:\/\/localhost:27017\/mern_login', { \n\n useNewUrlParser: true, \n\n useUnifiedTopology: true, \n\n}); \n\napp.use('\/api\/auth', authRoutes); \n\nconst PORT = process.env.PORT || 5000; \n\napp.listen(PORT, () => { \n\n console.log(`Server is running on port ${PORT}`); \n\n});<\/code><\/pre>\n\n\n\nUser.js<\/code> in \/models<\/code> directory:<\/strong><\/p>\n\n\n\nconst mongoose = require('mongoose'); \n\nconst userSchema = new mongoose.Schema({ \n\n username: { \n\n type: String, \n\n required: true, \n\n unique: true, \n\n }, \n\n password: { \n\n type: String, \n\n required: true, \n\n }, \n\n}); \n\nmodule.exports = mongoose.model('User', userSchema);<\/code><\/pre>\n\n\n\nauth.js<\/code> in \/routes<\/code> directory:<\/strong><\/p>\n\n\n\nconst express = require('express'); \n\nconst router = express.Router(); \n\nconst bcrypt = require('bcryptjs'); \n\nconst jwt = require('jsonwebtoken'); \n\nconst User = require('..\/models\/User'); \n\nrouter.post('\/login', async (req, res) => { \n\n const { username, password } = req.body; \n\n try { \n\n const user = await User.findOne({ username }); \n\n if (!user) { \n\n return res.status(400).json({ message: 'Invalid username or password' }); \n\n } \n\n const isMatch = await bcrypt.compare(password, user.password); \n\n if (!isMatch) { \n\n return res.status(400).json({ message: 'Invalid username or password' }); \n\n } \n\n const token = jwt.sign({ id: user._id }, 'secretkey', { expiresIn: '1h' }); \n\n res.json({ token }); \n\n } catch (error) { \n\n console.error(error); \n\n res.status(500).send('Server Error'); \n\n } \n\n}); \n\nmodule.exports = router;<\/code><\/pre>\n\n\n\n\/frontend \n\n |- package.json \n\n |- \/src \n\n |- \/components \n\n |- Login.js \n\n |- App.js \n\n |- index.js<\/code><\/pre>\n\n\n\nnpx create-react-app frontend \n\ncd frontend\n\nnpm install axios react-router-dom<\/code><\/pre>\n\n\n\nLogin.js<\/code> in \/src\/components<\/code> directory:<\/strong><\/p>\n\n\n\nimport React, { useState } from 'react'; \n\nimport axios from 'axios'; \n\n const Login = ({ history }) => { \n\n const [username, setUsername] = useState(''); \n\n const [password, setPassword] = useState(''); const handleSubmit = async (e) => { \n\n e.preventDefault(); \n\n try { \n\n const response = await axios.post('http:\/\/localhost:5000\/api\/auth\/login', { \n\n username, \n\n password, \n\n }); \n\n localStorage.setItem('token', response.data.token); \n\n history.push('\/dashboard'); \n\n } catch (error) { \n\n console.error(error); \n\n } \n\n}; \n\nreturn ( \n\n <div> \n\n <h2>Login<\/h2> \n\n <form onSubmit={handleSubmit}> \n\n <div> \n\n <label>Username:<\/label> \n\n <input type=\"text\" value={username} onChange={(e) => setUsername(e.target.value)} \/> \n\n <\/div> \n\n <div> \n\n <label>Password:<\/label> \n\n <input type=\"password\" value={password} onChange={(e) => setPassword(e.target.value)} \/> \n\n <\/div> \n\n <button type=\"submit\">Login<\/button> \n\n <\/form> \n\n <\/div> \n\n ); \n\n}; \n\nexport default Login;<\/code><\/pre>\n\n\n\nApp.js<\/code> in \/src<\/code> directory:<\/strong><\/p>\n\n\n\nimport React from 'react'; \n\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; \n\nimport Login from '.\/components\/Login'; \n\nfunction App() { \n\n return ( \n\n <Router> \n\n <div className=\"App\"> \n\n <Switch> \n\n <Route exact path=\"\/\" component={Login} \/> \n\n <\/Switch> \n\n <\/div> \n\n <\/Router> \n\n ); \n\n}<\/code><\/pre>\n\n\n\n5. Run the Application:<\/h3>\n\n\n\n
\n
node server.js<\/code> inside the \/backend<\/code> directory.<\/li>\n\n\n\nnpm start<\/code> inside the \/frontend<\/code> directory.<\/li>\n\n\n\nhttp:\/\/localhost:3000<\/code> to access the login page.<\/li>\n\n\n\nConclusion<\/h2>\n\n\n\n