Using Axios to implement user login, registration, and JWT token handling is a common real-world scenario. This process involves user registration, login, storing and managing JWT tokens, and securing routes. Below is a detailed guide with steps and code explanations.
Axios Practical Example
Steps
- Set up the development environment
- Create the backend API
- Create the frontend React application
- Implement user registration
- Implement user login
- Handle and store JWT tokens
- Implement protected routes
Setting Up the Development Environment
Ensure Node.js and npm are installed. Then, create a new React application:
npx create-react-app jwt-auth-demo
cd jwt-auth-demo
npm install axiosCreating the Backend API
We’ll use Express.js to build a simple backend API for user registration, login, and JWT handling.
Install Dependencies:
mkdir backend
cd backend
npm init -y
npm install express bcryptjs jsonwebtoken cors body-parserCreate the Server:
backend/server.js
const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const PORT = 5000;
const SECRET_KEY = 'your-secret-key';
app.use(cors());
app.use(bodyParser.json());
let users = []; // Simulated user database
app.post('/register', (req, res) => {
const { username, password } = req.body;
const hashedPassword = bcrypt.hashSync(password, 8);
users.push({ username, password: hashedPassword });
res.status(200).send({ message: 'User registered successfully!' });
});
app.post('/login', (req, res) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username);
if (!user) {
return res.status(404).send({ message: 'User not found!' });
}
const isPasswordValid = bcrypt.compareSync(password, user.password);
if (!isPasswordValid) {
return res.status(401).send({ message: 'Invalid password!' });
}
const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });
res.status(200).send({ token });
});
app.get('/protected', (req, res) => {
const token = req.headers['authorization'];
if (!token) {
return res.status(401).send({ message: 'No token provided!' });
}
jwt.verify(token, SECRET_KEY, (err, decoded) => {
if (err) {
return res.status(500).send({ message: 'Failed to authenticate token.' });
}
res.status(200).send({ message: 'Protected content', username: decoded.username });
});
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});Creating the Frontend React Application
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Register from './Register';
import Login from './Login';
import Protected from './Protected';
import { AuthProvider, useAuth } from './auth';
const App = () => {
return (
<AuthProvider>
<Router>
<Switch>
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<PrivateRoute path="/protected" component={Protected} />
<Redirect from="/" to="/login" />
</Switch>
</Router>
</AuthProvider>
);
};
const PrivateRoute = ({ component: Component, ...rest }) => {
const { auth } = useAuth();
return (
<Route
{...rest}
render={props =>
auth ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
};
export default App;Implementing User Registration
Register.js
import React, { useState } from 'react';
import axios from 'axios';
const Register = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:5000/register', { username, password });
setMessage(response.data.message);
} catch (error) {
setMessage('Error registering user');
}
};
return (
<div>
<h2>Register</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Register</button>
</form>
{message && <p>{message}</p>}
</div>
);
};
export default Register;Implementing User Login
Login.js
import React, { useState } from 'react';
import axios from 'axios';
import { useAuth } from './auth';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const { setAuth } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:5000/login', { username, password });
localStorage.setItem('token', response.data.token);
setAuth(true);
} catch (error) {
setMessage('Error logging in');
}
};
return (
<div>
<h2>Login</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
</form>
{message && <p>{message}</p>}
</div>
);
};
export default Login;Handling and Storing JWT Tokens
auth.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [auth, setAuth] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setAuth(true);
}
}, []);
return (
<AuthContext.Provider value={{ auth, setAuth }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);Implementing Protected Routes
Protected.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Protected = () => {
const [message, setMessage] = useState('');
useEffect(() => {
const fetchData = async () => {
try {
const token = localStorage.getItem('token');
const response = await axios.get('http://localhost:5000/protected', {
headers: { Authorization: token }
});
setMessage(response.data.message);
} catch (error) {
setMessage('Error fetching protected content');
}
};
fetchData();
}, []);
return (
<div>
<h2>Protected Page</h2>
{message && <p>{message}</p>}
</div>
);
};
export default Protected;Complete Code Example
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Register from './Register';
import Login from './Login';
import Protected from './Protected';
import { AuthProvider, useAuth } from './auth';
const App = () => {
return (
<AuthProvider>
<Router>
<Switch>
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<PrivateRoute path="/protected" component={Protected} />
<Redirect from="/" to="/login" />
</Switch>
</Router>
</AuthProvider>
);
};
const PrivateRoute = ({ component: Component, ...rest }) => {
const { auth } = useAuth();
return (
<Route
{...rest}
render={props =>
auth ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
};
export default App;Register.js
import React, { useState } from 'react';
import axios from 'axios';
const Register = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:5000/register', { username, password });
setMessage(response.data.message);
} catch (error) {
setMessage('Error registering user');
}
};
return (
<div>
<h2>Register</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Register</button>
</form>
{message && <p>{message}</p>}
</div>
);
};
export default Register;Login.js
import React, { useState } from 'react';
import axios from 'axios';
import { useAuth } from './auth';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const { setAuth } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:5000/login', { username, password });
localStorage.setItem('token', response.data.token);
setAuth(true);
} catch (error) {
setMessage('Error logging in');
}
};
return (
<div>
<h2>Login</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
</form>
{message && <p>{message}</p>}
</div>
);
};
export default Login;Protected.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Protected = () => {
const [message, setMessage] = useState('');
useEffect(() => {
const fetchData = async () => {
try {
const token = localStorage.getItem('token');
const response = await axios.get('http://localhost:5000/protected', {
headers: { Authorization: token }
});
setMessage(response.data.message);
} catch (error) {
setMessage('Error fetching protected content');
}
};
fetchData();
}, []);
return (
<div>
<h2>Protected Page</h2>
{message && <p>{message}</p>}
</div>
);
};
export default Protected;auth.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [auth, setAuth] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setAuth(true);
}
}, []);
return (
<AuthContext.Provider value={{ auth, setAuth }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);Running the Application
Ensure the backend server is running:
node backend/server.jsThen, in another terminal, start the frontend application:
npm startVisit http://localhost:3000 in your browser to register, log in, and access protected routes.
Summary
This practical example demonstrates using Axios to implement user login, registration, and JWT token handling. The process includes setting up the environment, creating a backend API, building frontend functionality, managing JWT tokens, and securing routes. This example should help you effectively apply Axios and JWT in real-world projects.
