Program 7
Develop an authentication mechanism with email_id and
password using HTML and Express JS (POST method)
[Link]
import React, { useState } from "react";
import axios from "axios";
function App() {
const [registerData, setRegisterData] = useState({ email: "", password: "" });
const [loginData, setLoginData] = useState({ email: "", password: "" });
const [message, setMessage] = useState("");
const handleRegister = async (e) => {
[Link]();
try {
await [Link]("[Link] registerData);
setMessage("User registered successfully");
} catch (error) {
setMessage("Error registering user");
[Link]("Error registering user:", error);
}
};
const handleLogin = async (e) => {
[Link]();
try {
await [Link]("[Link] loginData);
setMessage("Login successful");
} catch (error) {
setMessage("Invalid credentials");
[Link]("Error logging in user:", error);
}
};
return (
<div>
<h2>User Registration</h2>
<form onSubmit={handleRegister}>
<label>Email:</label>
<input
type="email"
value={[Link]}
onChange={(e) =>
setRegisterData({ ...registerData, email: [Link] })
}
required
/>
<br />
<label>Password:</label>
<input
type="password"
value={[Link]}
onChange={(e) =>
setRegisterData({ ...registerData, password: [Link] })
}
required
/>
<br />
<button type="submit">Register</button>
</form>
<h2>User Login</h2>
<form onSubmit={handleLogin}>
<label>Email:</label>
<input
type="email"
value={[Link]}
onChange={(e) =>
setLoginData({ ...loginData, email: [Link] })
}
required
/>
<br />
<label>Password:</label>
<input
type="password"
value={[Link]}
onChange={(e) =>
setLoginData({ ...loginData, password: [Link] })
}
required
/>
<br />
<button type="submit">Login</button>
</form>
{message && <p>{message}</p>}
</div>
);
}
export default App;
[Link]
const express = require("express");
const bcrypt = require("bcrypt");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const PORT = 3000;
// Middleware to parse JSON requests
[Link]([Link]());
[Link](cors());
// Sample user data (replace this with your database)
const users = [];
// Route to handle user registration
[Link]("/register", async (req, res) => {
try {
const { email, password } = [Link];
// Check if email is already registered
const existingUser = [Link]((user) => [Link] === email);
if (existingUser) {
return [Link](400).send("Email already exists");
}
// Hash the password
const hashedPassword = await [Link](password, 10);
// Store the user data (in memory for now, replace this with database storage)
[Link]({ email, password: hashedPassword });
[Link](201).send("User registered successfully");
} catch (error) {
[Link]("Error registering user:", error);
[Link](500).send("Internal server error");
}
});
// Route to handle user login
[Link]("/login", async (req, res) => {
try {
const { email, password } = [Link];
// Find the user by email
const user = [Link]((user) => [Link] === email);
if (!user) {
return [Link](401).send("Invalid credentials");
}
// Compare the password
const passwordMatch = await [Link](password, [Link]);
if (!passwordMatch) {
return [Link](401).send("Invalid credentials");
}
[Link](200).send("Login successful");
} catch (error) {
[Link]("Error logging in user:", error);
[Link](500).send("Internal server error");
}
});
// Start the server
[Link](PORT, () => {
[Link](`Server is running on [Link]
});