Skip to content
Snippets Groups Projects

Feature/jwt backend

Merged Feature/jwt backend
feature/jwt-backend into main
Merged fhurtado14 requested to merge feature/jwt-backend into main
Viewing commit 3b7d1958
Prev Next
Show latest version
12 files
+ 16
− 21193
Compare changes
  • Side-by-side
  • Inline
Files
12
frontend/src/components/APITest/PracticeHome.js deleted 100644 → 0
+ 0
− 110
import React, { useEffect, useState } from "react";
import axios from "axios";
import { jwtDecode } from "jwt-decode";
function PracticeHome() {
const [username, setUsername] = useState("");
const [privilege, setPrivilege] = useState("");
const [protectedData, setProtectedData] = useState(null);
const [unprotectedData, setUnprotectedData] = useState(null);
const extractTokenFromUrl = () => {
const params = new URLSearchParams(window.location.search);
const token = params.get("token");
// no token found
if (!token) {
console.log("No token found in URL");
return;
}
// decode the token and set the user info
try {
const decoded = jwtDecode(token);
setUsername(decoded.username);
setPrivilege(decoded.role);
} catch (error) {
console.error("Error decoding token: ", error);
}
};
// function to make call to unprotected backend endpoint
const fetchUnprotectedData = async () => {
// since the endpoint is unprotected, do not need token
// this would be for all guest methods (search, login, etc)
try {
const response = await axios.get(
`${process.env.REACT_APP_API_URL}/user/public`
);
setUnprotectedData(response.data);
} catch (error) {
console.error("error fetching public endpoint: ", error);
}
};
const fetchProtectedData = async () => {
// get the token from the URL
const params = new URLSearchParams(window.location.search);
const token = params.get("token");
// no token found, return early
if (!token) {
console.error("no token found. ");
return;
}
// try calling method that needs JWT token in the backend with
// admin privilages to work
try {
const response = await axios.get(
`${process.env.REACT_APP_API_URL}/user/admin`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
setProtectedData(response.data);
} catch (error) {
console.error("Error fetching protected data: ", error);
}
};
// Fetch data on component mount
useEffect(() => {
extractTokenFromUrl();
fetchUnprotectedData();
}, []);
return (
<div>
<h1>Welcome to the Practice Home Page</h1>
{/* Display user information from the decoded token */}
{username && (
<div>
<h2>User Info</h2>
<p>Username: {username}</p>
<p>Privilege: {privilege}</p>
</div>
)}
<div>
<h2>Unprotected API Data</h2>
<button onClick={fetchUnprotectedData}>Fetch Unprotected Data</button>
{unprotectedData && (
<pre>{JSON.stringify(unprotectedData, null, 2)}</pre>
)}
</div>
<div>
<h2>Protected API Data</h2>
<button onClick={fetchProtectedData}>Fetch Protected Data</button>
{protectedData && <pre>{JSON.stringify(protectedData, null, 2)}</pre>}
</div>
</div>
);
}
export default PracticeHome;