UPDATED CODE(APP.
JSX):
import React, { useState } from 'react';
import './App.css'; // You can style it as you like
const App = () => {
// State for registration
const [regUsername, setRegUsername] = useState('');
const [regPassword, setRegPassword] = useState('');
// State for login
const [loginUsername, setLoginUsername] = useState('');
const [loginPassword, setLoginPassword] = useState('');
const [message, setMessage] = useState('');
const handleRegister = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: regUsername, password: reg-
Password }),
});
const data = await response.text();
setMessage(data);
// Reset the registration form
setRegUsername('');
setRegPassword('');
};
const handleLogin = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: loginUsername, password:
loginPassword }),
});
const data = await response.text();
setMessage(data);
// Reset the login form
setLoginUsername('');
setLoginPassword('');
};
return (
<div>
<h1>User Authentication</h1>
<form onSubmit={handleRegister}>
<h2>Register</h2>
<input
type="text"
placeholder="Username"
value={regUsername}
onChange={(e) => setRegUsername(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={regPassword}
onChange={(e) => setRegPassword(e.target.value)}
required
/>
<button type="submit">Register</button>
</form>
<form onSubmit={handleLogin}>
<h2>Login</h2>
<input
type="text"
placeholder="Username"
value={loginUsername}
onChange={(e) => setLoginUsername(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={loginPassword}
onChange={(e) => setLoginPassword(e.target.value)}
required
/>
<button type="submit">Login</button>
</form>
<p>{message}</p>
</div>
);
};
export default App;
XAMPP SERVER IN ANOTHER MACHINE :
UPDATE THE server.js file:
Code 2.2 Server.js file(first code):
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
app.use(cors());
app.use(bodyParser.json());
// MySQL Connection
const db = mysql.createConnection({
host: 'localhost',
user: 'root', // default user for XAMPP
password: '', // default password for XAMPP
database: 'user_auth_db', // change this to your database name
});
db.connect(err => {
if (err) throw err;
console.log('MySQL connected...');
});
// User Registration Route
app.post('/register', (req, res) => {
const { username, password } = req.body;
const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
db.query(sql, [username, password], (err, result) => {
if (err) return res.status(500).send(err);
res.status(200).send('User registered!');
});
});
// User Login Route
app.post('/login', (req, res) => {
const { username, password } = req.body;
const sql = 'SELECT * FROM users WHERE username = ? AND password = ?';
db.query(sql, [username, password], (err, result) => {
if (err) return res.status(500).send(err);
if (result.length > 0) {
res.status(200).send(`Hello ${username}`);
} else {
res.status(401).send('Invalid credentials');
}
});
});
app.listen(5000, () => {
console.log('Server running on port 5000');
});
Code 2.3 Create Table Query:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
Code 3.2 App.jsx file :
import React, { useState } from 'react';
import './App.css'; // You can style it as you like
const App = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const handleRegister = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
const data = await response.text();
setMessage(data);
};
const handleLogin = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
const data = await response.text();
setMessage(data);
};
return (
<div>
<h1>User Authentication</h1>
<form onSubmit={handleRegister}>
<h2>Register</h2>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit">Register</button>
</form>
<form onSubmit={handleLogin}>
<h2>Login</h2>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit">Login</button>
</form>
<p>{message}</p>
</div>
);
};
export default App;
Code the updated App.jsx:
import React, { useState } from 'react';
import './App.css'; // You can style it as you like
const App = () => {
// State for registration
const [regUsername, setRegUsername] = useState('');
const [regPassword, setRegPassword] = useState('');
// State for login
const [loginUsername, setLoginUsername] = useState('');
const [loginPassword, setLoginPassword] = useState('');
const [message, setMessage] = useState('');
const handleRegister = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: regUsername, password: regPassword }),
});
const data = await response.text();
setMessage(data);
// Reset the registration form
setRegUsername('');
setRegPassword('');
};
const handleLogin = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: loginUsername, password: loginPassword }),
});
const data = await response.text();
setMessage(data);
// Reset the login form
setLoginUsername('');
setLoginPassword('');
};
return (
<div>
<h1>User Authentication</h1>
<form onSubmit={handleRegister}>
<h2>Register</h2>
<input
type="text"
placeholder="Username"
value={regUsername}
onChange={(e) => setRegUsername(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={regPassword}
onChange={(e) => setRegPassword(e.target.value)}
required
/>
<button type="submit">Register</button>
</form>
<form onSubmit={handleLogin}>
<h2>Login</h2>
<input
type="text"
placeholder="Username"
value={loginUsername}
onChange={(e) => setLoginUsername(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={loginPassword}
onChange={(e) => setLoginPassword(e.target.value)}
required
/>
<button type="submit">Login</button>
</form>
<p>{message}</p>
</div>
);
};
export default App;
