decrypt jwt

package.json

     "formik": "^2.2.9",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
+    "jwt-decode": "^3.1.2",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",

src/Auth/AuthProvider.js

 
 export function AuthProvider ({ children }){
 
-    let [user, setUser] = React.useState( Cookies.get('user') )
+    let [user, setUser] = React.useState( Cookies.get('token') )
 
     const context = {
         user,
-        login: (user) => {
-
+        login: (token) => {
             try{
-                let body = JSON.stringify( user )
-                Cookies.set('user', body, { expires : 7 })
-                setUser(Cookies.get('user'))
+                Cookies.set('token', token, { expires : 7 })
+                setUser(Cookies.get('token'))
             }catch(e){
-                console.log('Error >> ', e)
-                Cookies.set('user', undefined)
+                console.log('Login Error >> ', e)
+                Cookies.set('token', undefined)
             }
 
         },
         logout : () => {
-            Cookies.set('user', undefined)
+            Cookies.set('token', undefined)
             setUser(undefined)
         },
         isLogged : () => {
             try{
-                let CookiesUser = Cookies.get('user')
+                let CookiesUser = Cookies.get('token')
                 if(!CookiesUser || CookiesUser === 'undefined'){
                     return false
                 }
-                let current = JSON.parse(CookiesUser);
-                // console.log("CURR", current)
-                let logged = Object.keys(current).includes('email')
+                // let current = JSON.parse(CookiesUser);
+                console.log("token >> ", CookiesUser)
+                let logged = CookiesUser.length > 5 //Object.keys(current).includes('email')
                 console.log("is login? >>", logged)
                 return logged
 

src/Pages/Login.jsx

 import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
+import jwt_decode from "jwt-decode";
 
 import { 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
         },
         validationSchema: LoginSchema,
         onSubmit: async (values) => {
+
             let { email, password } = values
             setOpen(true)
 
             let request = new Service(`/user?user=${email}&password=${password}`)
+
             request
-                .post({})
-                .then( () => {
-                    toast.success('Bienvenido!!')
-
-                    setTimeout( () => {
-                        setOpen(false)
-                        auth.login(values)
-                    }, 2000)
-                }) 
-                .catch( err => {
-                        setOpen(false)
-                    toast.error("Ups! usuario o contraseña incorrectos")
-                    console.log("ERROR ", err)
-                })
-
-            // toast.success('Bienvenido!!')
-            // return navigate('/dashboard/home')
+            .post({})
+            .then( response => {
+                console.log(response);
+
+                let { token, nombre, apelidos } = response;
+                toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
+                token = token.replace("Bearer ", "")
+                // token = jwt_decode(token);
+                console.log("TOKEN >> ", token)
+
+                setTimeout( () => {
+                    setOpen(false)
+                    auth.login(token)
+                }, 2000)
+            }) 
+            .catch( err => {
+                setOpen(false)
+                toast.error("Ups! usuario o contraseña incorrectos")
+                console.log("ERROR ", err)
+            })
+
         },
     });
 

src/Pages/PruebaAsignar.jsx

 function CardPrueba(props){
 
     let id = ( parseInt( ID.next().value ) * 210598120309218301923 );
-    console.log("ID >> ", id)
 
     return(
-        <Col key={id} md="4">
+        <Col  md="4">
             <div className="body_prueba">
                 <div className="modern-Checkbox">
                     <input type="checkbox"  name={`box-${id}` } id={`box-${id}` } />
                                 {
                                     comportamiento.map( (test, index) => {
                                         return (
-                                            <CardPrueba name={test} id={index}/>
+                                            <CardPrueba key={index} name={test} id={index}/>
                                         )
                                     })
                                 }
                                 {
                                     personalidad.map( (test, index) => {
                                         return (
-                                            <CardPrueba name={test} id={index}/>
+                                            <CardPrueba key={index} name={test} id={index}/>
                                         )
                                     })
                                 }
                                 {
                                     inteligencia.map( (test, index) => {
                                         return (
-                                            <CardPrueba name={test} id={index}/>
+                                            <CardPrueba key={index} name={test} id={index}/>
                                         )
                                     })
                                 }