auth: use cookies

NetSepio · Mar 4, 2024 · ecdcbe3 · ecdcbe3
1 parent 39df8ac
commit ecdcbe3
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 40 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -23,6 +23,7 @@
     "daisyui": "^2.51.5",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.11.6",
+    "js-cookie": "^3.0.5",
     "petra-plugin-wallet-adapter": "^0.1.5",
     "postcss": "^8.4.21",
     "qrcode.react": "^3.1.0",
@@ -65,7 +66,8 @@
       "last 1 safari version"
     ]
   },
-    "devDependencies": {
-    "@types/file-saver": "^2.0.5"
+  "devDependencies": {
+    "@types/file-saver": "^2.0.5",
+    "@types/js-cookie": "^3.0.6"
   }
 }
diff --git a/webapp/src/components/Header.tsx b/webapp/src/components/Header.tsx
@@ -3,6 +3,7 @@ import { useContext, useEffect, useState } from "react";
 import { AuthContext } from "../context/AuthContext";
 import { getChallengeId, getToken } from "../modules/api";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import Cookies from "js-cookie";
 
 const Header = () => {
   const navigate = useNavigate();
@@ -25,7 +26,7 @@ const Header = () => {
   };
 
   useEffect(() => {
-    const storedToken = localStorage.getItem("token");
+    const storedToken = Cookies.get("token");
     if (storedToken && connected) {
       authContext?.setIsSignedIn(true);
     }
@@ -65,12 +66,10 @@ const Header = () => {
         account?.publicKey
       );
       if (response.data.token) {
-        sessionStorage.setItem("token", response.data.token);
-        localStorage.setItem("token", response.data.token);
+        Cookies.set("token", response.data.token);
         authContext?.setIsSignedIn(true);
+        authContext?.setIsAuthorized(true);
       }
-      authContext?.setIsAuthorized(true);
-      authContext?.setIsSignedIn(true);
     } catch (error: any) {
       console.log("error", error);
     }

diff --git a/webapp/src/modules/api.ts b/webapp/src/modules/api.ts
@@ -1,5 +1,6 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { getBaseUrl } from './Utils';
+import Cookies from 'js-cookie';
 
 const baseURL = getBaseUrl()
 
@@ -32,8 +33,8 @@ export interface CreateClientPayload {
 }
 interface ClientResponse {
   status: number;
-  success?: boolean; 
-  sucess?: boolean; 
+  success?: boolean;
+  sucess?: boolean;
   message: string;
   clients: any[];
 }
@@ -59,7 +60,7 @@ async function callSotreusAPI(
     method,
     url: clientId ? endpoint.replace(':client_id', clientId) : endpoint,
     headers: {
-      "Authorization": `Bearer ${localStorage.getItem("token")}`
+      "Authorization": `Bearer ${Cookies.get("token")}`
     }
   };
 
@@ -76,16 +77,20 @@ async function callSotreusAPI(
 
 export async function emailClientConfig(clientId: string): Promise<AxiosResponse<any>> {
   return axios.get(`${baseURL}/api/v1.0/client/${clientId}/email`,
-  {headers:{
-    "Authorization": `Bearer ${localStorage.getItem("token")}`
-  }})
+    {
+      headers: {
+        "Authorization": `Bearer ${Cookies.get("token")}`
+      }
+    })
 }
 
 export const updateServer = async (updatedConfig: any) => {
   const response = await axios.patch(`${baseURL}/api/v1.0/server`, updatedConfig,
-  {headers:{
-    "Authorization": `Bearer ${localStorage.getItem("token")}`
-  }});
+    {
+      headers: {
+        "Authorization": `Bearer ${Cookies.get("token")}`
+      }
+    });
   return response.data;
 };
 
@@ -94,20 +99,24 @@ export async function getClientInfo(clientId: string): Promise<AxiosResponse<any
 }
 
 export async function createClient(payload: CreateClientPayload): Promise<AxiosResponse<any>> {
-  return callSotreusAPI('/api/v1.0/client', 'POST', payload, );
+  return callSotreusAPI('/api/v1.0/client', 'POST', payload,);
 }
 
 export async function updateClient(clientId: string, payload: UpdateClientPayload): Promise<AxiosResponse<any>> {
-  return axios.patch(`${baseURL}/api/v1.0/client/${clientId}`,payload, {headers:{
-    "Authorization": `Bearer ${localStorage.getItem("token")}`
-  }})
+  return axios.patch(`${baseURL}/api/v1.0/client/${clientId}`, payload, {
+    headers: {
+      "Authorization": `Bearer ${Cookies.get("token")}`
+    }
+  })
 }
 
-export async function getClients(token: string | null): Promise<ClientResponse> { 
+export async function getClients(token: string | undefined): Promise<ClientResponse> {
   const url = `${baseURL}/api/v1.0/client`
-  const response = await axios.get<ClientResponse>(url, {headers:{
-    "Authorization": `Bearer ${localStorage.getItem("token")}`
-  }});
+  const response = await axios.get<ClientResponse>(url, {
+    headers: {
+      "Authorization": `Bearer ${Cookies.get("token")}`
+    }
+  });
   if (response.status === 200) {
     return response.data;
   } else {
@@ -126,24 +135,28 @@ export async function getClientConfig(clientId: string, qrcode?: boolean): Promi
 // =============================================( SERVER APIs )=================================================== //
 
 export const getStatus = async () => {
-    const response = await axios.get(`${baseURL}/api/v1.0/status`);
-    return response.data;
+  const response = await axios.get(`${baseURL}/api/v1.0/status`);
+  return response.data;
 };
 
 export const getServerInfo = async () => {
-  const response = await axios.get(`${baseURL}/api/v1.0/server`, {headers:{
-    "Authorization": `Bearer ${localStorage.getItem("token")}`
-  }});
+  const response = await axios.get(`${baseURL}/api/v1.0/server`, {
+    headers: {
+      "Authorization": `Bearer ${Cookies.get("token")}`
+    }
+  });
   return response.data;
 };
 
 export const getServerConfig = async () => {
-    const response = await axios.get(`${baseURL}/api/v1.0/server/config`, {headers:{
-      "Authorization": `Bearer ${localStorage.getItem("token")}`
-    }});
-    return response.data;
+  const response = await axios.get(`${baseURL}/api/v1.0/server/config`, {
+    headers: {
+      "Authorization": `Bearer ${Cookies.get("token")}`
+    }
+  });
+  return response.data;
 };
-    
+
 export const getChallengeId = async (address: string | undefined) => {
   let response;
   try {
@@ -153,7 +166,7 @@ export const getChallengeId = async (address: string | undefined) => {
       {
         headers: {
           "Content-Type": "application/json",
-        },  
+        },
       }
     );
   } catch (error) {
@@ -162,13 +175,13 @@ export const getChallengeId = async (address: string | undefined) => {
   return response;
 };
 
-export const getToken = async (signature: string | string[] | undefined, challengeId:string, pubKey: string | string[] | undefined) => {
+export const getToken = async (signature: string | string[] | undefined, challengeId: string, pubKey: string | string[] | undefined) => {
   let response;
   try {
     // Make a post request to your server
     response = await axios.post(
       `${baseURL}/api/v1.0/authenticate`,
-      { signature,challengeId, pubKey },
+      { signature, challengeId, pubKey },
       {
         headers: {
           "Content-Type": "application/json",

diff --git a/webapp/src/pages/Dashboard.tsx b/webapp/src/pages/Dashboard.tsx
@@ -11,6 +11,7 @@ import NotSigned from "../components/NotSigned";
 import NotAuthorized from "../components/NotAuthorized";
 import ServerPage from "./Server";
 import DashboardLoader from "../components/DashboardLoader";
+import Cookies from "js-cookie";
 
 const NotConnected: React.FC = () => {
   return (
@@ -37,12 +38,12 @@ const Dashboard: React.FC = () => {
 
   useEffect(() => {
     async function fetchClients() {
-      const token = localStorage.getItem("token");
+      const token = Cookies.get("token");
       const clientData = await getClients(token);
       setClients(clientData.clients);
       setIsLoading(false);
     }
-    if (localStorage.getItem("token")) {
+    if (Cookies.get("token")) {
       fetchClients();
     }
   }, []);