This content originally appeared on DEV Community and was authored by Ng Dream
To create an authentication system using React.js on the frontend, Express.js on the backend we need to implement the following:
- Frontend (React.js with Pulsy): Handle login and logout, maintain user authentication state, and persist tokens.
- Backend (Express.js): Provide authentication endpoints (e.g., login, logout, user validation).
Step 1: Backend (Express.js) Setup
Let's start with the backend to handle user authentication and token generation.
Install Required Packages
npm install express bcryptjs jsonwebtoken cors
Backend Code (Express.js)
Create an authController.js file to handle authentication logic:
// authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
// Mock user data (in production, you would use a real database)
const users = [
{
id: 1,
username: 'john',
password: '$2a$10$O1s8iLKRLPbPqhc1uTquLO.xODTC1U/Z8xGoEDU6/Dc0PAQ3MkCKy', // hashed password for 'password123'
},
];
// JWT Secret
const JWT_SECRET = 'supersecretkey';
exports.login = (req, res) => {
const { username, password } = req.body;
const user = users.find((u) => u.username === username);
if (!user) {
return res.status(401).json({ error: 'Invalid credentials' });
}
bcrypt.compare(password, user.password, (err, isMatch) => {
if (isMatch) {
// Create a token
const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: '1h' });
return res.json({ token });
} else {
return res.status(401).json({ error: 'Invalid credentials' });
}
});
};
exports.validateToken = (req, res) => {
const token = req.header('Authorization').replace('Bearer ', '');
if (!token) {
return res.status(401).json({ error: 'No token provided' });
}
try {
const decoded = jwt.verify(token, JWT_SECRET);
res.json({ user: { id: decoded.id, username: decoded.username } });
} catch (err) {
res.status(401).json({ error: 'Invalid token' });
}
};
Next, create the main server.js file for setting up Express:
// server.js
const express = require('express');
const cors = require('cors');
const { login, validateToken } = require('./authController');
const app = express();
app.use(express.json());
app.use(cors());
// Authentication routes
app.post('/api/login', login);
app.get('/api/validate', validateToken);
// Start the server
const PORT = 5000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
-
POST
/api/login: Authenticates a user and returns a JWT token. -
GET
/api/validate: Validates a token and returns the user info.
Step 2: Frontend (React.js with Pulsy)
Now let's set up the frontend using React.js and Pulsy to handle the authentication state.
Install Required Packages
npm install axios pulsy
Pulsy Store Setup
We will create a Pulsy store to manage authentication state globally.
// authStore.js
import { createStore, addMiddleware } from 'pulsy';
import axios from 'axios';
// Create a store to hold the user and token
createStore('auth', {
user: null,
token: null,
}, { persist: true }); // Persist the auth state in localStorage
// Middleware to add Authorization header for authenticated requests
addMiddleware('auth', (nextValue, prevValue, storeName) => {
if (nextValue.token) {
axios.defaults.headers.common['Authorization'] = `Bearer ${nextValue.token}`;
} else {
delete axios.defaults.headers.common['Authorization'];
}
return nextValue;
});
This store will persist the authentication state (user and token) and automatically apply the Authorization header for authenticated requests.
Authentication Functions
Create helper functions to handle login and validation requests:
// authService.js
import { setStoreValue } from 'pulsy';
import axios from 'axios';
const API_URL = 'http://localhost:5000/api';
export const login = async (username, password) => {
try {
const response = await axios.post(`${API_URL}/login`, { username, password });
const { token } = response.data;
// Set token and user info in Pulsy store
setStoreValue('auth', { token, user: { username } });
return true;
} catch (error) {
console.error('Login failed', error);
return false;
}
};
export const validateToken = async () => {
try {
const response = await axios.get(`${API_URL}/validate`);
const user = response.data.user;
// Update the store with the user info
setStoreValue('auth', { user, token: localStorage.getItem('auth_token') });
return true;
} catch (error) {
console.error('Token validation failed', error);
return false;
}
};
export const logout = () => {
setStoreValue('auth', { user: null, token: null });
localStorage.removeItem('pulsy_auth');
};
Step 3: Create Authentication Components
Now let’s create the React components for login and authenticated views.
Login Component
// Login.js
import React, { useState } from 'react';
import { login } from './authService';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleLogin = async (e) => {
e.preventDefault();
const success = await login(username, password);
if (!success) {
setError('Invalid credentials. Try again.');
}
};
return (
<div>
<h2>Login</h2>
<form onSubmit={handleLogin}>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Username"
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
<button type="submit">Login</button>
</form>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
};
export default Login;
Authenticated Component
// Dashboard.js
import React from 'react';
import { usePulsy } from 'pulsy';
import { logout } from './authService';
const Dashboard = () => {
const [auth] = usePulsy('auth');
const handleLogout = () => {
logout();
window.location.reload(); // Simple page refresh to redirect to login
};
return (
<div>
<h2>Welcome, {auth.user.username}!</h2>
<button onClick={handleLogout}>Logout</button>
</div>
);
};
export default Dashboard;
Step 4: App Component
In the App.js component, you’ll want to check if the user is authenticated and conditionally render either the login or dashboard.
// App.js
import React, { useEffect } from 'react';
import { usePulsy } from 'pulsy';
import { validateToken } from './authService';
import Login from './Login';
import Dashboard from './Dashboard';
function App() {
const [auth] = usePulsy('auth');
useEffect(() => {
// Check token validity on app load
if (auth.token) {
validateToken();
}
}, [auth.token]);
return (
<div className="App">
{auth.user ? <Dashboard /> : <Login />}
</div>
);
}
export default App;
Step 5: Run the Application
Now that we have both the backend and frontend set up, you can run the application.
- Start the Express server:
node server.js
- Start the React frontend:
npm start
Once both are running:
- You can visit
http://localhost:3000to see the login page. - After logging in, the authentication token will be saved, and you'll be redirected to the dashboard.
- If the token is valid, you stay logged in, otherwise, you will be redirected back to the login page.
Summary
This example shows how to integrate Pulsy with a React authentication system backed by an Express.js API. Pulsy helps you manage global state for authentication, including persistence of the authentication token and user data across sessions, making it a powerful and easy-to-use state management tool.
This content originally appeared on DEV Community and was authored by Ng Dream
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Ng Dream | Sciencx (2024-10-05T03:04:56+00:00) Authentication with express js and react js unsing jwt. Retrieved from https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/
" » Authentication with express js and react js unsing jwt." Ng Dream | Sciencx - Saturday October 5, 2024, https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/
HARVARDNg Dream | Sciencx Saturday October 5, 2024 » Authentication with express js and react js unsing jwt., viewed ,<https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/>
VANCOUVERNg Dream | Sciencx - » Authentication with express js and react js unsing jwt. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/
CHICAGO" » Authentication with express js and react js unsing jwt." Ng Dream | Sciencx - Accessed . https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/
IEEE" » Authentication with express js and react js unsing jwt." Ng Dream | Sciencx [Online]. Available: https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/. [Accessed: ]
rf:citation » Authentication with express js and react js unsing jwt | Ng Dream | Sciencx | https://www.scien.cx/2024/10/05/authentication-with-express-js-and-react-js-unsing-jwt/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.