From ebb1af3a9d2b9f573fda4f93e863666c43409fdd Mon Sep 17 00:00:00 2001 From: Magne Cedric Date: Wed, 2 Oct 2024 14:52:17 +0200 Subject: [PATCH 1/3] feat(mm-registration): use sessionstorage instead of localstorage --- src/components/AuthLogin/AuthModal.tsx | 2 +- src/lib/siwsrp/auth.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/AuthLogin/AuthModal.tsx b/src/components/AuthLogin/AuthModal.tsx index 689865c67f8..258cf371964 100644 --- a/src/components/AuthLogin/AuthModal.tsx +++ b/src/components/AuthLogin/AuthModal.tsx @@ -198,7 +198,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => { const mm_auth = Buffer.from( JSON.stringify({ step: data.step, - mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME), + mmAuthSession: sessionStorage.getItem(AUTH_WALLET_SESSION_NAME), walletPairing: data.pairing, token: true, }) diff --git a/src/lib/siwsrp/auth.ts b/src/lib/siwsrp/auth.ts index b294741441e..e853cc5f25a 100644 --- a/src/lib/siwsrp/auth.ts +++ b/src/lib/siwsrp/auth.ts @@ -36,11 +36,11 @@ const getHydraEnv = (env: string): HydraEnv => { const storage: SDK.AuthStorageOptions = { getLoginResponse: async () => { - const storedResponse = localStorage.getItem(AUTH_WALLET_SESSION_NAME); + const storedResponse = sessionStorage.getItem(AUTH_WALLET_SESSION_NAME); return storedResponse ? JSON.parse(storedResponse) : null; }, setLoginResponse: async (val: SDK.LoginResponse) => { - localStorage.setItem(AUTH_WALLET_SESSION_NAME, JSON.stringify(val)); + sessionStorage.setItem(AUTH_WALLET_SESSION_NAME, JSON.stringify(val)); }, }; @@ -85,7 +85,7 @@ export const getUserIdFromJwtToken = () => { export const clearStorage = () => { sessionStorage.clear(); - localStorage.removeItem(AUTH_WALLET_SESSION_NAME); - localStorage.removeItem(AUTH_WALLET_TOKEN); - localStorage.removeItem(AUTH_WALLET_PROJECTS); + sessionStorage.removeItem(AUTH_WALLET_SESSION_NAME); + sessionStorage.removeItem(AUTH_WALLET_TOKEN); + sessionStorage.removeItem(AUTH_WALLET_PROJECTS); }; From 585ec495591aa19a2aac90492851b9d53fe4622a Mon Sep 17 00:00:00 2001 From: Magne Cedric Date: Fri, 4 Oct 2024 14:13:39 +0200 Subject: [PATCH 2/3] feat(mm-registration): use session storage for mm auth storing data and cleaning code --- src/components/AuthLogin/AuthModal.tsx | 17 +++++++---------- src/lib/constants.js | 17 ++++++++++++----- src/lib/siwsrp/auth.ts | 4 +--- src/theme/Root.tsx | 7 +------ 4 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/components/AuthLogin/AuthModal.tsx b/src/components/AuthLogin/AuthModal.tsx index 258cf371964..f0ceaafa4f6 100644 --- a/src/components/AuthLogin/AuthModal.tsx +++ b/src/components/AuthLogin/AuthModal.tsx @@ -9,10 +9,11 @@ import { authenticateAndAuthorize, saveTokenString, getUserIdFromJwtToken, -} from "../../lib/siwsrp/auth"; +} from "@site/src/lib/siwsrp/auth"; import { DASHBOARD_URL, REQUEST_PARAMS, + AUTH_WALLET_PAIRING, AUTH_WALLET_SESSION_NAME, AUTH_WALLET_PROJECTS, } from "@site/src/lib/constants"; @@ -175,12 +176,10 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => { await fetch( `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/wallet/login`, { - ...REQUEST_PARAMS(), - headers: { - ...REQUEST_PARAMS().headers, + ...REQUEST_PARAMS("POST", { hydra_token: accessToken, token: "true", - }, + }), body: JSON.stringify({ profileId: userProfile.profileId, redirect_to: window.location.href, @@ -192,6 +191,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => { if (!loginResponse) throw new Error("Something went wrong"); const { data, session, token } = loginResponse; + sessionStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data })); if (data.step) { // Handling no wallet pairing or multiple pairing @@ -201,6 +201,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => { mmAuthSession: sessionStorage.getItem(AUTH_WALLET_SESSION_NAME), walletPairing: data.pairing, token: true, + redirect_to: session.redirect_to, }) ).toString("base64"); @@ -236,11 +237,7 @@ const AuthModal = ({ open, setOpen, step, setStep }: AuthModalProps) => { const projectsResponse = await fetch( `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userId}/projects`, { - ...REQUEST_PARAMS("GET"), - headers: { - ...REQUEST_PARAMS("GET").headers, - Authorization: `Bearer ${token}`, - }, + ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }), } ); const { diff --git a/src/lib/constants.js b/src/lib/constants.js index f10a18bdc57..2d427e31895 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -459,23 +459,30 @@ export const GET_OPTIONS = { export const REF_SERVICES_PATH = "/services/reference/"; export const REF_WALLET_PATH = "/wallet/reference/"; -export const REF_ALLOW_LOGIN_PATH = [REF_SERVICES_PATH, REF_WALLET_PATH]; +export const REF_ALLOW_LOGIN_PATH = [ + REF_SERVICES_PATH, + REF_WALLET_PATH, + REF_FAUCET_PATH, +]; -export const REQUEST_PARAMS = (method = "POST") => ({ +export const REQUEST_PARAMS = (method = "GET", headers) => ({ method, headers: { Accept: "application/json", "Content-Type": "application/json", "Cache-Control": "no-cache", Pragma: "no-cache", + ...headers, }, }); export const AUTH_WALLET_SESSION_NAME = "auth.wallet.session"; export const AUTH_WALLET_TOKEN = "auth.wallet.token"; export const AUTH_WALLET_PROJECTS = "auth.wallet.projects"; +export const AUTH_WALLET_PAIRING = "auth.wallet.pairing"; +export const AUTH_WALLET_USER_PLAN = "auth.wallet.uksTier"; + export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org"; export const LINEA_PROD_URL = "https://linea-mainnet.infura.io"; -export const LINEA_REQUEST_URL = process.env.VERCEL_ENV === "production" - ? LINEA_PROD_URL - : LINEA_DEV_URL; +export const LINEA_REQUEST_URL = + process.env.VERCEL_ENV === "production" ? LINEA_PROD_URL : LINEA_DEV_URL; diff --git a/src/lib/siwsrp/auth.ts b/src/lib/siwsrp/auth.ts index e853cc5f25a..f34d9a4d3f4 100644 --- a/src/lib/siwsrp/auth.ts +++ b/src/lib/siwsrp/auth.ts @@ -1,6 +1,7 @@ import { SDK } from "@metamask/profile-sync-controller"; import jwt from "jsonwebtoken"; import { + AUTH_WALLET_PAIRING, AUTH_WALLET_PROJECTS, AUTH_WALLET_SESSION_NAME, AUTH_WALLET_TOKEN, @@ -85,7 +86,4 @@ export const getUserIdFromJwtToken = () => { export const clearStorage = () => { sessionStorage.clear(); - sessionStorage.removeItem(AUTH_WALLET_SESSION_NAME); - sessionStorage.removeItem(AUTH_WALLET_TOKEN); - sessionStorage.removeItem(AUTH_WALLET_PROJECTS); }; diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx index d09eacc118e..f7a49710dd6 100644 --- a/src/theme/Root.tsx +++ b/src/theme/Root.tsx @@ -8,7 +8,6 @@ import React, { import { Provider as AlertProvider } from "react-alert"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import BrowserOnly from "@docusaurus/BrowserOnly"; -import siteConfig from "@generated/docusaurus.config"; import { AlertTemplate, options } from "@site/src/components/Alert"; import { MetaMaskSDK, SDKProvider } from "@metamask/sdk"; import { @@ -164,11 +163,7 @@ export const LoginProvider = ({ children }) => { const projectsResponse = await fetch( `${DASHBOARD_URL(DASHBOARD_PREVIEW_URL, VERCEL_ENV)}/api/v1/users/${userIdFromjwtToken}/projects`, { - ...REQUEST_PARAMS("GET"), - headers: { - ...REQUEST_PARAMS("GET").headers, - Authorization: `Bearer ${token}`, - }, + ...REQUEST_PARAMS("GET", { Authorization: `Bearer ${token}` }), } ); const res = await projectsResponse.json(); From d454ea64c054e807074b19f061f147e85ba1c4ca Mon Sep 17 00:00:00 2001 From: Magne Cedric Date: Fri, 4 Oct 2024 14:22:58 +0200 Subject: [PATCH 3/3] feat(mm-registration): fix build error --- src/lib/constants.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/lib/constants.js b/src/lib/constants.js index 2d427e31895..f09e824f437 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -462,10 +462,9 @@ export const REF_WALLET_PATH = "/wallet/reference/"; export const REF_ALLOW_LOGIN_PATH = [ REF_SERVICES_PATH, REF_WALLET_PATH, - REF_FAUCET_PATH, ]; -export const REQUEST_PARAMS = (method = "GET", headers) => ({ +export const REQUEST_PARAMS = (method = "GET", headers = {}) => ({ method, headers: { Accept: "application/json",