From ecdcbe3a8866aca5a4d0a7698b290a614f845347 Mon Sep 17 00:00:00 2001 From: Punarv Pawade Date: Mon, 4 Mar 2024 15:51:09 +0530 Subject: [PATCH] auth: use cookies --- webapp/package-lock.json | 18 +++++++- webapp/package.json | 6 ++- webapp/src/components/Header.tsx | 9 ++-- webapp/src/modules/api.ts | 73 +++++++++++++++++++------------- webapp/src/pages/Dashboard.tsx | 5 ++- 5 files changed, 71 insertions(+), 40 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index f87f8b2..838967c 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -28,6 +28,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", @@ -45,7 +46,8 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/file-saver": "^2.0.5" + "@types/file-saver": "^2.0.5", + "@types/js-cookie": "^3.0.6" } }, "node_modules/@adobe/css-tools": { @@ -5947,6 +5949,12 @@ "pretty-format": "^27.0.0" } }, + "node_modules/@types/js-cookie": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz", + "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==", + "dev": true + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -15588,6 +15596,14 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, "node_modules/js-sdsl": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz", diff --git a/webapp/package.json b/webapp/package.json index 391612f..9ed139a 100644 --- 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 index 5261ba5..86da92a 100644 --- 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 index b0dd3d9..2ec2e9b 100644 --- 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> { 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> { - 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> { - 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 { +export async function getClients(token: string | undefined): Promise { const url = `${baseURL}/api/v1.0/client` - const response = await axios.get(url, {headers:{ - "Authorization": `Bearer ${localStorage.getItem("token")}` - }}); + const response = await axios.get(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 index 7079075..390669e 100644 --- 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(); } }, []);