Auth

playbeat/package.json

@@ -22,8 +22,10 @@
     "@types/react-dom": "^18.2.19",
     "apexcharts": "^3.47.0",
     "astro": "^4.4.0",
+    "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.5",
+    "jose": "^5.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "svelte": "^4.2.12",

playbeat/src/components/Header.astro

@@ -15,6 +15,6 @@ import FlechaIzqHeader from "@/icons/FlechaIzqHeader.astro";
         </button>
     </div>
     <a href="/myUser">
-        <button class="bg-black w-8 h-8 rounded-full text-white text-lg solid flex items-center justify-center" >P</button>
+        <button class="bg-black w-8 h-8 rounded-full text-white text-lg solid flex items-center justify-center" >M</button>
     </a>
 </header>

playbeat/src/components/HeaderMyUser.astro

@@ -2,7 +2,8 @@
 import FlechaDchHeader from "@/icons/FlechaDchHeader.astro";
 import FlechaIzqHeader from "@/icons/FlechaIzqHeader.astro";
 
-const but ={name: '...', items:['Cerrar sesión']}
+
+
 ---
 
  <header class=" h-80 w-full"> 
@@ -44,14 +45,8 @@ const but ={name: '...', items:['Cerrar sesión']}
                 </span>
             </a>
 
-            <button class="bg-[#6985C0] flex flex-wrap content-center justify-center p-1 px-3  gap-1 w-7 h-7 rounded-full button" >{but.name}</button>
-            <button class="bg-[#6985C0] flex flex-wrap content-center justify-center p-1 px-3  gap-1 w-7 h-7 rounded-full buttonOculto" >{but.name}</button>
-
-				<div class="dropdown">
-					{but.items.map( (item) => {
-						return <span>{item}</span>
-					})}
-				</div>
+            <a href="/logout" class="bg-[#6985C0] flex flex-row items-center p-1 px-3  gap-1 w-max h-7 rounded-md font-semibold" >CERRAR SESIÓN</a>
+
         </div>
 
 
@@ -72,71 +67,7 @@ const but ={name: '...', items:['Cerrar sesión']}
         bottom: 1vw;
         right: 0.5vw;
     }
-    .dropdown {
-        display: none;
-        position: absolute;
-        background-color: #2f2f2f;
-        min-width: 130px;
-        border-radius: 10px;
-        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-        z-index: 100;
-        margin-left: -30%;
-        margin-top: 32px;
-
-    }
-    .dropdown span {
-   color: white;
-
-   padding: 12px 16px;
-
-   text-decoration: none;
-   display: flex;
-   cursor: pointer;
-   font-weight: normal;
-   font-size: medium;
- }
-
- .dropdown span{
-   border-top: .5px solid white;
-
- }
- .dropdown span:first-child{
-   border-top: 0px;
-   border-top-left-radius:10px;
-   border-top-right-radius:10px;
- }
- .dropdown span:last-child{
-
-   border-bottom-left-radius:10px;
-   border-bottom-right-radius:10px;
- }
-
- .dropdown span:hover {background-color: #6e6e6e;}
 
-    .button {
-
-    border-radius: 30px;
-	width: 30px;
-	height: 30px;
-    border: none;
-    color: white;
-    font-weight: semibold;
-    cursor: pointer;
-    padding: 8px;
-}
-.buttonOculto {
 
-    border-radius: 30px;
-	width: 30px;
-	height: 30px;
-    border: none;
-    color: white;
-    font-weight: semibold;
-    cursor: pointer;
-    padding: 8px;
-    display:none;
-    margin-left: 69%;
-}
-.button:focus ~ .dropdown {display: flex; flex-direction: column;}
-.button:focus ~ .buttonOculto {display: flex; position:absolute; top: 0; left: 0;}
+
 </style>

playbeat/src/constants.ts

@@ -0,0 +1,2 @@
+export const PUBLIC_ROUTES = ["/", "/login", "/register"];
+export const TOKEN = "token";

playbeat/src/globalState/globalUrl.js

@@ -1,3 +1,3 @@
 export const Global ={
-    url: "https://playbeat.uksouth.cloudapp.azure.com:3000/"
+    url: "http://playbeat.uksouth.cloudapp.azure.com:3000/"
 };

playbeat/src/middleware.ts

@@ -0,0 +1,73 @@
+import { errors, jwtVerify } from "jose";
+import { defineMiddleware } from "astro/middleware";
+import { TOKEN, PUBLIC_ROUTES } from "./constants";
+
+// The JWT secret 
+const secret = new TextEncoder().encode(import.meta.env.JWT_SECRET_KEY);
+
+/**
+* Verify if the client token is valid. 
+*/
+const verifyAuth = async (token?: string) => {
+  if (!token) {
+    return {
+      status: "unauthorized",
+      msg: "Please pass a request token",
+    } as const;
+  }
+
+  try {
+    const jwtVerifyResult = await jwtVerify(token, secret);
+
+    return {
+      status: "authorized",
+      payload: jwtVerifyResult.payload,
+      msg: "successfully verified auth token",
+    } as const;
+  } catch (err) {
+    if (err instanceof errors.JOSEError) {
+      return { status: "error", msg: err.message } as const;
+    }
+
+    console.debug(err);
+    return { status: "error", msg: "could not validate auth token" } as const;
+  }
+};
+
+export const onRequest = defineMiddleware(async (context, next) => {
+  // Ignore auth validation for public routes
+  if (PUBLIC_ROUTES.includes(context.url.pathname)) {
+   // Respond as usual 
+    return next();
+  }
+
+  // Get the token from cookies 
+  const token = context.cookies.get(TOKEN)?.value;
+  // Verify the token 
+  const validationResult = await verifyAuth(token);
+
+  console.log(validationResult);
+
+  // Handle the validation result 
+  switch (validationResult.status) {
+    case "authorized":
+      // Respond as usual if the user is authorised 
+      return next();
+
+    case "error":
+    case "unauthorized":
+      // If an API endpoint, return a JSON response
+      if (context.url.pathname.startsWith("/api/")) {
+        return new Response(JSON.stringify({ message: validationResult.msg }), {
+          status: 401,
+        });
+      }
+      // Otherwise, this is a standard page. Redirect to the root page for the user to login
+      else {
+        return Response.redirect(new URL("/", context.url));
+      }
+
+    default:
+      return Response.redirect(new URL("/", context.url));
+  }
+});