Revert "fix(mm-login): Fix 2FA login (#1721)"

This reverts commit 87610a1.

Author: AndyMBridges

src/components/AuthLogin/AuthModal.tsx

@@ -7,15 +7,15 @@ import global from "../ParserOpenRPC/global.module.css";
 import Icon from "../Icon/Icon";
 import {
   authenticateAndAuthorize,
-  saveTokenString,
-  getUserIdFromJwtToken,
   AUTH_WALLET_PAIRING,
-  AUTH_WALLET_PROJECTS,
   AUTH_WALLET_SESSION_NAME,
-  AUTH_WALLET_USER_PLAN,
-} from "@site/src/lib/siwsrp/auth";
+  AUTH_WALLET_PROJECTS,
+  saveTokenString,
+  getUserIdFromJwtToken,
+} from "../../lib/siwsrp/auth";
 import {
   REQUEST_PARAMS,
+  AUTH_WALLET_USER_PLAN,
 } from "@site/src/lib/constants";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
@@ -32,14 +32,16 @@ type AuthModalProps = {
 
 export enum AUTH_LOGIN_STEP {
   CONNECTING = "connecting",
+  WALLET_LOGIN_MULTI_USER = "wallet-login-multi-user",
+  WALLET_LOGIN_EMAIL_PASSWORD = "wallet-login-email-password",
   CONNECTION_ERROR = "connection-error",
   CONNECTION_SUCCESS = "connection-success",
 }
 
 export enum WALLET_LINK_TYPE {
   NO = "NO",
   ONE = "ONE",
-  MULTIPLE = "MULTIPLE"
+  MULTIPLE = "MULTIPLE",
 }
 
 const ConnectingModal = () => {
@@ -148,9 +150,8 @@ const AuthModal = ({
   const { DASHBOARD_URL, VERCEL_ENV } = siteConfig?.customFields || {};
   const {
     sdk,
-    setNeedsMfa,
     setWalletLinked,
-    setWalletAuthUrl,
+    setWalletLinkUrl,
     metaMaskDisconnect,
     setProjects,
     setMetaMaskAccount,
@@ -202,22 +203,22 @@ const AuthModal = ({
       if (!loginResponse) throw new Error("Something went wrong");
 
       const { data, session, token } = loginResponse;
-      sessionStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));
+      localStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));
 
       if (data.step) {
         // Handling no wallet pairing or multiple pairing
         const mm_auth = Buffer.from(
           JSON.stringify({
             step: data.step,
-            mmAuthSession: sessionStorage.getItem(AUTH_WALLET_SESSION_NAME),
+            mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
             walletPairing: data.pairing,
             token: true,
           }),
         ).toString("base64");
 
-        const walletAuthUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
+        const walletLinkUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
 
-        setWalletAuthUrl(walletAuthUrl);
+        setWalletLinkUrl(walletLinkUrl);
 
         if (data.pairing && !data.pairing.length) {
           setWalletLinked(WALLET_LINK_TYPE.NO);
@@ -232,25 +233,6 @@ const AuthModal = ({
         return;
       }
 
-      if (data.mfa?.enabled) {
-        const mm_auth = Buffer.from(
-          JSON.stringify({
-            step: 'verify',
-            mmAuthSession: sessionStorage.getItem(AUTH_WALLET_SESSION_NAME),
-            dashboardSessionToken: token
-          }),
-        ).toString("base64");
-
-        const walletAuthUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
-
-        setWalletAuthUrl(walletAuthUrl);
-
-        setNeedsMfa(true);
-        setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
-        setOpen(false);
-        return;
-      }
-
       setWalletLinked(WALLET_LINK_TYPE.ONE);
 
       if (!token) {

src/components/Faucet/Hero.tsx

@@ -34,7 +34,7 @@ export default function Hero({
     metaMaskWalletIdConnectHandler,
     walletLinked,
     projects,
-    walletAuthUrl,
+    walletLinkUrl,
   } = useContext(MetamaskProviderContext);
   const isExtensionActive = sdk.isExtensionActive();
   const [isWalletLinking, setIsWalletLinking] = useState(false);
@@ -65,7 +65,7 @@ export default function Hero({
       responseMsg: null,
       timestamp: Date.now(),
     });
-    window.location.href = walletAuthUrl;
+    window.location.href = walletLinkUrl;
   };
 
   const handleRequestEth = () => {

src/components/ParserOpenRPC/ProjectsBox/index.tsx

@@ -13,9 +13,8 @@ const ProjectsBox = () => {
     projects,
     metaMaskAccount,
     walletLinked,
-    needsMfa,
     metaMaskWalletIdConnectHandler,
-    walletAuthUrl,
+    walletLinkUrl,
     setUserAPIKey,
   } = useContext(MetamaskProviderContext);
   const options = Object.keys(projects).map((v) => ({
@@ -115,7 +114,7 @@ const ProjectsBox = () => {
           />
         ) : (
           <div className={styles.selectProjects}>
-            {!needsMfa && walletLinked === undefined && (
+            {walletLinked === undefined && (
               <>
                 <div>
                   {isWalletLinking ?
@@ -133,21 +132,6 @@ const ProjectsBox = () => {
                 </Button>
               </>
             )}
-            {needsMfa && (
-              <>
-                <div>
-                  Your Infura account needs two factor auth token
-                </div>
-                <Button
-                  thin
-                  variant="secondary"
-                  wrapText={false}
-                  onClick={() => (window.location.href = walletAuthUrl)}
-                >
-                  Enter your MFA
-                </Button>
-              </>
-            )}
             {walletLinked === WALLET_LINK_TYPE.NO && (
               <>
                 <div>
@@ -158,7 +142,7 @@ const ProjectsBox = () => {
                   thin
                   variant="secondary"
                   wrapText={false}
-                  onClick={() => (window.location.href = walletAuthUrl)}
+                  onClick={() => (window.location.href = walletLinkUrl)}
                 >
                   Link Infura Account
                 </Button>
@@ -167,14 +151,14 @@ const ProjectsBox = () => {
             {walletLinked === WALLET_LINK_TYPE.MULTIPLE && (
               <>
                 <div>
-                  Select MetaMask Developer account linked with your current wallet.
+                  Select Infura account linked with your current wallet.
                 </div>
                 <Button
                   thin
                   className={styles.connectButton}
-                  onClick={() => (window.location.href = walletAuthUrl)}
+                  onClick={() => (window.location.href = walletLinkUrl)}
                 >
-                  Select MetaMask Developer Account
+                  Select Infura Account
                 </Button>
               </>
             )}

src/lib/constants.ts

@@ -469,4 +469,15 @@ export const REQUEST_PARAMS = (method = "POST", headers = {}) => ({
 
 export const LINEA_PROD_URL = "https://linea-mainnet.infura.io";
 export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org";
-export const LINEA_REQUEST_URL = LINEA_PROD_URL;
+export const LINEA_REQUEST_URL = LINEA_PROD_URL;
+export const AUTH_WALLET_ENS = "auth.wallet.ens";
+export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
+export const AUTH_WALLET_USER_PLAN = "auth.wallet.uksTier";
+
+export const getWalletEns = () => {
+  return sessionStorage.getItem(AUTH_WALLET_ENS);
+};
+
+export const getUksTier = (): string => {
+  return sessionStorage.getItem(AUTH_WALLET_USER_PLAN);
+};

src/lib/siwsrp/auth.ts

@@ -14,17 +14,6 @@ export const AUTH_WALLET_PAIRING = 'auth.wallet.pairing'
 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_USER_PLAN = "auth.wallet.uksTier";
-export const AUTH_WALLET_ENS = "auth.wallet.ens";
-
-export const getWalletEns = () => {
-  return sessionStorage.getItem(AUTH_WALLET_ENS);
-};
-
-export const getUksTier = (): string => {
-  return sessionStorage.getItem(AUTH_WALLET_USER_PLAN);
-};
-
 
 const getHydraEnv = (env: string): HydraEnv => {
   const platform = Platform.INFURA;
@@ -46,11 +35,11 @@ const getHydraEnv = (env: string): HydraEnv => {
 
 const storage: SDK.AuthStorageOptions = {
   getLoginResponse: async () => {
-    const storedResponse = sessionStorage.getItem(AUTH_WALLET_SESSION_NAME);
+    const storedResponse = localStorage.getItem(AUTH_WALLET_SESSION_NAME);
     return storedResponse ? JSON.parse(storedResponse) : null;
   },
   setLoginResponse: async (val: SDK.LoginResponse) => {
-    sessionStorage.setItem(AUTH_WALLET_SESSION_NAME, JSON.stringify(val));
+    localStorage.setItem(AUTH_WALLET_SESSION_NAME, JSON.stringify(val));
   },
 };
 
@@ -99,4 +88,6 @@ export const getUserIdFromJwtToken = () => {
 
 export const clearStorage = () => {
   sessionStorage.clear();
+  localStorage.removeItem(AUTH_WALLET_SESSION_NAME);
+  localStorage.removeItem(AUTH_WALLET_PAIRING);
 };

src/theme/Root.tsx

@@ -12,16 +12,16 @@ import { MetaMaskSDK, SDKProvider } from "@metamask/sdk";
 import {
   REF_ALLOW_LOGIN_PATH,
   REQUEST_PARAMS,
+  AUTH_WALLET_PROJECTS,
+  AUTH_WALLET_ENS,
+  getWalletEns,
+  getUksTier,
 } from "@site/src/lib/constants";
 import {
   clearStorage,
   getUserIdFromJwtToken,
   saveTokenString,
   getTokenString,
-  getUksTier,
-  AUTH_WALLET_PROJECTS,
-  AUTH_WALLET_ENS,
-  getWalletEns
 } from "@site/src/lib/siwsrp/auth";
 import AuthModal, {
   AUTH_LOGIN_STEP,
@@ -56,12 +56,10 @@ interface IMetamaskProviderContext {
   setMetaMaskProvider: (arg: SDKProvider) => void;
   uksTier: string;
   sdk: MetaMaskSDK;
-  setNeedsMfa: (arg: boolean) => void;
-  needsMfa: boolean;
   setWalletLinked: (arg: WALLET_LINK_TYPE) => void;
   walletLinked: WALLET_LINK_TYPE | undefined;
-  setWalletAuthUrl: (arg: string) => void;
-  walletAuthUrl: string;
+  setWalletLinkUrl: (arg: string) => void;
+  walletLinkUrl: string;
   userAPIKey?: string;
   setUserAPIKey?: (key: string) => void;
   fetchLineaEns?: (walletId: string) => Promise<void>;
@@ -81,12 +79,10 @@ export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
   metaMaskProvider: undefined,
   setMetaMaskProvider: () => {},
   sdk: undefined,
-  setNeedsMfa: () => {},
-  needsMfa: false,
   setWalletLinked: () => {},
   walletLinked: undefined,
-  setWalletAuthUrl: () => {},
-  walletAuthUrl: "",
+  setWalletLinkUrl: () => {},
+  walletLinkUrl: "",
   userAPIKey: "",
   setUserAPIKey: () => {},
   fetchLineaEns: () => new Promise(() => {}),
@@ -119,8 +115,7 @@ export const LoginProvider = ({ children }) => {
   const [walletLinked, setWalletLinked] = useState<
     WALLET_LINK_TYPE | undefined
   >(undefined);
-  const [needsMfa, setNeedsMfa] = useState<boolean>(false);
-  const [walletAuthUrl, setWalletAuthUrl] = useState<string>("");
+  const [walletLinkUrl, setWalletLinkUrl] = useState<string>("");
   const [userAPIKey, setUserAPIKey] = useState("");
   const { siteConfig } = useDocusaurusContext();
   const { DASHBOARD_URL, GF_SURVEY_KEY, LINEA_ENS_URL } = siteConfig?.customFields || {};
@@ -190,7 +185,6 @@ export const LoginProvider = ({ children }) => {
       setUksTier(undefined);
       setProjects({});
       setWalletLinked(undefined);
-      setNeedsMfa(false);
       setUserAPIKey("");
       clearStorage();
     } catch (err) {
@@ -282,10 +276,8 @@ export const LoginProvider = ({ children }) => {
           sdk,
           walletLinked,
           setWalletLinked,
-          needsMfa,
-          setNeedsMfa,
-          walletAuthUrl,
-          setWalletAuthUrl,
+          walletLinkUrl,
+          setWalletLinkUrl,
           userAPIKey,
           setUserAPIKey,
           fetchLineaEns,