From 9355b3f3696104e901e573bf3a6c36c0c55a92fe Mon Sep 17 00:00:00 2001 From: marcosMachadoMenendez Date: Sun, 17 Mar 2024 15:56:17 +0100 Subject: [PATCH 1/2] Token de login implementado --- webapp/package-lock.json | 2 +- webapp/package.json | 4 +- webapp/src/App.js | 22 +++---- webapp/src/components/ProtectedRoute.js | 15 +++++ webapp/src/components/Routes.js | 64 +++++++++++++++++++++ webapp/src/components/login/AuthProvider.js | 44 ++++++++++++++ webapp/src/components/login/Login.js | 9 ++- 7 files changed, 141 insertions(+), 19 deletions(-) create mode 100644 webapp/src/components/ProtectedRoute.js create mode 100644 webapp/src/components/Routes.js create mode 100644 webapp/src/components/login/AuthProvider.js diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 612b1a17..551cb7ef 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -21,7 +21,7 @@ "react-responsive": "^9.0.2", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", - "react-toastify": "^8.0.2", + "react-toastify": "^8.2.0", "web-vitals": "^3.5.1" }, "devDependencies": { diff --git a/webapp/package.json b/webapp/package.json index 956a9a01..c8e06232 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -16,8 +16,8 @@ "react-responsive": "^9.0.2", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", - "web-vitals": "^3.5.1", - "react-toastify": "^8.0.2" + "react-toastify": "^8.2.0", + "web-vitals": "^3.5.1" }, "scripts": { "start": "react-scripts start", diff --git a/webapp/src/App.js b/webapp/src/App.js index 92a81f29..190159fc 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -1,25 +1,17 @@ import React from 'react'; -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import { BrowserRouter as Router, Route } from "react-router-dom"; import Navbar from "./components/Navbar"; -import Home from "./components/Home"; -import Inicio from './components/Inicio'; -import Primera from './components/Primera'; -import Game from './components/QuizGame'; +import AuthProvider from './components/login/AuthProvider'; +import Routes from './components/Routes'; function App() { return ( - -
- - } /> - } /> - } /> - } /> - -
- + + + + ); } diff --git a/webapp/src/components/ProtectedRoute.js b/webapp/src/components/ProtectedRoute.js new file mode 100644 index 00000000..3a1be852 --- /dev/null +++ b/webapp/src/components/ProtectedRoute.js @@ -0,0 +1,15 @@ +import { Navigate, Outlet } from "react-router-dom"; +import { useAuth } from "./login/AuthProvider"; + +export const ProtectedRoute = () => { + const { token } = useAuth(); + + // Check if the user is authenticated + if (!token) { + // If not authenticated, redirect to the login page + return ; + } + + // If authenticated, render the child routes + return ; + }; \ No newline at end of file diff --git a/webapp/src/components/Routes.js b/webapp/src/components/Routes.js new file mode 100644 index 00000000..7e4e2880 --- /dev/null +++ b/webapp/src/components/Routes.js @@ -0,0 +1,64 @@ +import { RouterProvider, createBrowserRouter } from "react-router-dom"; +import { useAuth } from "./login/AuthProvider"; +import { ProtectedRoute } from "./ProtectedRoute"; +import Home from "./Home"; +import Inicio from './Inicio'; +import Primera from './Primera'; +import Game from './QuizGame'; +import Navbar from "./Navbar"; + +const Routes = () => { + const { token } = useAuth(); + + // Define public routes accessible to all users + const routesForPublic = [ + { + path: "/", + element: , + }, + { + path: "/login", + element: , + }, + ]; + + // Define routes accessible only to authenticated users + const routesForAuthenticatedOnly = [ + { + path: "/", + element: , // Wrap the component in ProtectedRoute + children: [ + { + path: "/", + element: , + }, + { + path: "/game", + element: , + }, + { + path: "/home", + element: , + }, + ], + }, + ]; + + // Define routes accessible only to non-authenticated users + const routesForNotAuthenticatedOnly = [ + + ]; + + // Combine and conditionally include routes based on authentication status + const router = createBrowserRouter([ + ...routesForPublic, + ...(!token ? routesForNotAuthenticatedOnly : []), + ...routesForAuthenticatedOnly, + ]); + + // Provide the router configuration using RouterProvider + return + ; +}; + +export default Routes; \ No newline at end of file diff --git a/webapp/src/components/login/AuthProvider.js b/webapp/src/components/login/AuthProvider.js new file mode 100644 index 00000000..8a38c38c --- /dev/null +++ b/webapp/src/components/login/AuthProvider.js @@ -0,0 +1,44 @@ +import axios from "axios"; +import { createContext, useContext, useEffect, useMemo, useState } from "react"; + +const AuthContext = createContext(); + +const AuthProvider = ({ children }) => { + // State to hold the authentication token + const [token, setToken_] = useState(localStorage.getItem("token")); + + // Function to set the authentication token + const setToken = (newToken) => { + setToken_(newToken); + }; + + useEffect(() => { + if (token) { + axios.defaults.headers.common["Authorization"] = "Bearer " + token; + localStorage.setItem('token',token); + } else { + delete axios.defaults.headers.common["Authorization"]; + localStorage.removeItem('token') + } + }, [token]); + + // Memoized value of the authentication context + const contextValue = useMemo( + () => ({ + token, + setToken, + }), + [token] + ); + + // Provide the authentication context to the children components + return ( + {children} + ); +}; + +export const useAuth = () => { + return useContext(AuthContext); +}; + +export default AuthProvider; \ No newline at end of file diff --git a/webapp/src/components/login/Login.js b/webapp/src/components/login/Login.js index 89f77154..517301b1 100644 --- a/webapp/src/components/login/Login.js +++ b/webapp/src/components/login/Login.js @@ -4,6 +4,8 @@ import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; import './Login.css'; import logo from '../logo.png' +import { useAuth } from "./AuthProvider"; + const Login = () => { const [username, setUsername] = useState(''); @@ -15,11 +17,16 @@ const Login = () => { const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; + const { setToken } = useAuth(); + + const loginUser = async () => { try { - await axios.post(`${apiEndpoint}/login`, { username, password }); + let res= await axios.post(`${apiEndpoint}/login`, { username, password }); // Extract data from the response + setToken(res.data.token); + console.log(res); setLoginSuccess(true); From ab40e0b9c508231ed92bce4ab6e5efe7b922ee34 Mon Sep 17 00:00:00 2001 From: marcosMachadoMenendez Date: Sun, 17 Mar 2024 16:57:20 +0100 Subject: [PATCH 2/2] =?UTF-8?q?Ya=20se=20muestra=20el=20Navbar=20al=20inic?= =?UTF-8?q?iar=20sesi=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/ProtectedRoute.js | 3 ++- webapp/src/components/Routes.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/ProtectedRoute.js b/webapp/src/components/ProtectedRoute.js index 3a1be852..12148098 100644 --- a/webapp/src/components/ProtectedRoute.js +++ b/webapp/src/components/ProtectedRoute.js @@ -1,5 +1,6 @@ import { Navigate, Outlet } from "react-router-dom"; import { useAuth } from "./login/AuthProvider"; +import Navbar from "./Navbar"; export const ProtectedRoute = () => { const { token } = useAuth(); @@ -11,5 +12,5 @@ export const ProtectedRoute = () => { } // If authenticated, render the child routes - return ; + return
; }; \ No newline at end of file diff --git a/webapp/src/components/Routes.js b/webapp/src/components/Routes.js index 7e4e2880..c92a54dc 100644 --- a/webapp/src/components/Routes.js +++ b/webapp/src/components/Routes.js @@ -57,7 +57,7 @@ const Routes = () => { ]); // Provide the router configuration using RouterProvider - return + return ; };