Prompt Title: a

Creating a full code example for a React application with JWT-based authentication and an Express.js backend is quite extensive. Below, I'll provide an outline of the key components you need to implement. Please note that this is a simplified example, and in a real-world application, you would need to add error handling, validation, and other security measures.

Express.js Backend

Assuming you have Express.js set up, here's an outline of the server code:

javascriptCopy code
const express = require('express');
const jwt = require('jsonwebtoken');
const bodyParser = require('body-parser');
const app = express();
const port = 3001;

app.use(bodyParser.json());

const secretKey = 'yourSecretKey';

// Sample user data (in-memory storage)
const users = [
  { id: 1, username: 'user1', password: 'password1' },
  { id: 2, username: 'user2', password: 'password2' },
];

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find((u) => u.username === username && u.password === password);

  if (!user) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const token = jwt.sign({ username }, secretKey, { expiresIn: '1h' });

  res.json({ token });
});

app.get('/protected', (req, res) => {
  const token = req.headers.authorization;

  if (!token) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  jwt.verify(token, secretKey, (err, decoded) => {
    if (err) {
      return res.status(401).json({ message: 'Token is invalid' });
    }
    res.json({ message: 'Protected data', user: decoded.username });
  });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});
Save to grepper

React Frontend

Now, here's an outline of a simple React frontend:

jsxCopy code
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [token, setToken] = useState(null);
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    const storedToken = localStorage.getItem('token');
    if (storedToken) {
      setToken(storedToken);
      setIsLoggedIn(true);
    }
  }, []);

  const handleLogin = async () => {
    try {
      const response = await axios.post('http://localhost:3001/login', { username, password });
      const { token } = response.data;
      setToken(token);
      localStorage.setItem('token', token);
      setIsLoggedIn(true);
      setMessage('Logged in successfully!');
    } catch (error) {
      console.error(error);
      setMessage('Login failed.');
    }
  };

  const handleLogout = () => {
    setToken(null);
    localStorage.removeItem('token');
    setIsLoggedIn(false);
    setMessage('Logged out successfully.');
  };

  const handleProtectedData = async () => {
    try {
      const response = await axios.get('http://localhost:3001/protected', {
        headers: { Authorization: token },
      });
      setMessage(response.data.message);
      setUsername(response.data.user);
    } catch (error) {
      console.error(error);
      setMessage('Unauthorized');
    }
  };

  return (
    <div>
      <h1>Authentication Example</h1>
      {isLoggedIn ? (
        <div>
          <p>Welcome, {username}!</p>
          <button onClick={handleLogout}>Logout</button>
          <button onClick={handleProtectedData}>Get Protected Data</button>
          <p>{message}</p>
        </div>
      ) : (
        <div>
          <input
            type="text"
            placeholder="Username"
            onChange={(e) => setUsername(e.target.value)}
          />
          <input
            type="password"
            placeholder="Password"
            onChange={(e) => setPassword(e.target.value)}
          />
          <button onClick={handleLogin}>Login</button>
          <p>{message}</p>
        </div>
      )}
    </div>
  );
};

export default App;
Save to grepper

In this example, the React frontend communicates with the Express.js backend to perform user authentication using JWT tokens. Make sure to install Axios in your React project (npm install axios) for making HTTP requests.

This is a basic example, and in a real application, you should add more features like error handling, user registration, and proper security measures. Additionally, consider using environment variables to store sensitive information like the secret key.