Skip to content

Commit 87610a1

Browse files
author
Cédric Magne
authored
fix(mm-login): Fix 2FA login (#1721)
* fix(mm-login): update api url * feat(login): update dashboard url env * feat(login): update cors config * feat(login): update cors config * feat(login): fix build * feat(login): fix localhost port * feat(login): fix build * feat(2fa-mmlogin): fix mm login with 2fa enabled * feat(2fa-mmlogin): fix typo
1 parent e36bfcb commit 87610a1

File tree

6 files changed

+88
-48
lines changed

6 files changed

+88
-48
lines changed

‎src/components/AuthLogin/AuthModal.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import global from "../ParserOpenRPC/global.module.css";
77
import Icon from "../Icon/Icon";
88
import {
99
authenticateAndAuthorize,
10-
AUTH_WALLET_PAIRING,
11-
AUTH_WALLET_SESSION_NAME,
12-
AUTH_WALLET_PROJECTS,
1310
saveTokenString,
1411
getUserIdFromJwtToken,
15-
} from "../../lib/siwsrp/auth";
12+
AUTH_WALLET_PAIRING,
13+
AUTH_WALLET_PROJECTS,
14+
AUTH_WALLET_SESSION_NAME,
15+
AUTH_WALLET_USER_PLAN,
16+
} from "@site/src/lib/siwsrp/auth";
1617
import {
1718
REQUEST_PARAMS,
18-
AUTH_WALLET_USER_PLAN,
1919
} from "@site/src/lib/constants";
2020
import { MetamaskProviderContext } from "@site/src/theme/Root";
2121

@@ -32,16 +32,14 @@ type AuthModalProps = {
3232

3333
export enum AUTH_LOGIN_STEP {
3434
CONNECTING = "connecting",
35-
WALLET_LOGIN_MULTI_USER = "wallet-login-multi-user",
36-
WALLET_LOGIN_EMAIL_PASSWORD = "wallet-login-email-password",
3735
CONNECTION_ERROR = "connection-error",
3836
CONNECTION_SUCCESS = "connection-success",
3937
}
4038

4139
export enum WALLET_LINK_TYPE {
4240
NO = "NO",
4341
ONE = "ONE",
44-
MULTIPLE = "MULTIPLE",
42+
MULTIPLE = "MULTIPLE"
4543
}
4644

4745
const ConnectingModal = () => {
@@ -150,8 +148,9 @@ const AuthModal = ({
150148
const { DASHBOARD_URL, VERCEL_ENV } = siteConfig?.customFields || {};
151149
const {
152150
sdk,
151+
setNeedsMfa,
153152
setWalletLinked,
154-
setWalletLinkUrl,
153+
setWalletAuthUrl,
155154
metaMaskDisconnect,
156155
setProjects,
157156
setMetaMaskAccount,
@@ -203,22 +202,22 @@ const AuthModal = ({
203202
if (!loginResponse) throw new Error("Something went wrong");
204203

205204
const { data, session, token } = loginResponse;
206-
localStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));
205+
sessionStorage.setItem(AUTH_WALLET_PAIRING, JSON.stringify({ data }));
207206

208207
if (data.step) {
209208
// Handling no wallet pairing or multiple pairing
210209
const mm_auth = Buffer.from(
211210
JSON.stringify({
212211
step: data.step,
213-
mmAuthSession: localStorage.getItem(AUTH_WALLET_SESSION_NAME),
212+
mmAuthSession: sessionStorage.getItem(AUTH_WALLET_SESSION_NAME),
214213
walletPairing: data.pairing,
215214
token: true,
216215
}),
217216
).toString("base64");
218217

219-
const walletLinkUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
218+
const walletAuthUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
220219

221-
setWalletLinkUrl(walletLinkUrl);
220+
setWalletAuthUrl(walletAuthUrl);
222221

223222
if (data.pairing && !data.pairing.length) {
224223
setWalletLinked(WALLET_LINK_TYPE.NO);
@@ -233,6 +232,25 @@ const AuthModal = ({
233232
return;
234233
}
235234

235+
if (data.mfa?.enabled) {
236+
const mm_auth = Buffer.from(
237+
JSON.stringify({
238+
step: 'verify',
239+
mmAuthSession: sessionStorage.getItem(AUTH_WALLET_SESSION_NAME),
240+
dashboardSessionToken: token
241+
}),
242+
).toString("base64");
243+
244+
const walletAuthUrl = `${DASHBOARD_URL}/login?mm_auth=${mm_auth}&redirect_to=${session.redirect_to}`;
245+
246+
setWalletAuthUrl(walletAuthUrl);
247+
248+
setNeedsMfa(true);
249+
setStep(AUTH_LOGIN_STEP.CONNECTION_SUCCESS);
250+
setOpen(false);
251+
return;
252+
}
253+
236254
setWalletLinked(WALLET_LINK_TYPE.ONE);
237255

238256
if (!token) {

‎src/components/Faucet/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Hero({
3434
metaMaskWalletIdConnectHandler,
3535
walletLinked,
3636
projects,
37-
walletLinkUrl,
37+
walletAuthUrl,
3838
} = useContext(MetamaskProviderContext);
3939
const isExtensionActive = sdk.isExtensionActive();
4040
const [isWalletLinking, setIsWalletLinking] = useState(false);
@@ -65,7 +65,7 @@ export default function Hero({
6565
responseMsg: null,
6666
timestamp: Date.now(),
6767
});
68-
window.location.href = walletLinkUrl;
68+
window.location.href = walletAuthUrl;
6969
};
7070

7171
const handleRequestEth = () => {

‎src/components/ParserOpenRPC/ProjectsBox/index.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ const ProjectsBox = () => {
1313
projects,
1414
metaMaskAccount,
1515
walletLinked,
16+
needsMfa,
1617
metaMaskWalletIdConnectHandler,
17-
walletLinkUrl,
18+
walletAuthUrl,
1819
setUserAPIKey,
1920
} = useContext(MetamaskProviderContext);
2021
const options = Object.keys(projects).map((v) => ({
@@ -114,7 +115,7 @@ const ProjectsBox = () => {
114115
/>
115116
) : (
116117
<div className={styles.selectProjects}>
117-
{walletLinked === undefined && (
118+
{!needsMfa && walletLinked === undefined && (
118119
<>
119120
<div>
120121
{isWalletLinking ?
@@ -132,6 +133,21 @@ const ProjectsBox = () => {
132133
</Button>
133134
</>
134135
)}
136+
{needsMfa && (
137+
<>
138+
<div>
139+
Your Infura account needs two factor auth token
140+
</div>
141+
<Button
142+
thin
143+
variant="secondary"
144+
wrapText={false}
145+
onClick={() => (window.location.href = walletAuthUrl)}
146+
>
147+
Enter your MFA
148+
</Button>
149+
</>
150+
)}
135151
{walletLinked === WALLET_LINK_TYPE.NO && (
136152
<>
137153
<div>
@@ -142,7 +158,7 @@ const ProjectsBox = () => {
142158
thin
143159
variant="secondary"
144160
wrapText={false}
145-
onClick={() => (window.location.href = walletLinkUrl)}
161+
onClick={() => (window.location.href = walletAuthUrl)}
146162
>
147163
Link Infura Account
148164
</Button>
@@ -151,14 +167,14 @@ const ProjectsBox = () => {
151167
{walletLinked === WALLET_LINK_TYPE.MULTIPLE && (
152168
<>
153169
<div>
154-
Select Infura account linked with your current wallet.
170+
Select MetaMask Developer account linked with your current wallet.
155171
</div>
156172
<Button
157173
thin
158174
className={styles.connectButton}
159-
onClick={() => (window.location.href = walletLinkUrl)}
175+
onClick={() => (window.location.href = walletAuthUrl)}
160176
>
161-
Select Infura Account
177+
Select MetaMask Developer Account
162178
</Button>
163179
</>
164180
)}

‎src/lib/constants.ts‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -469,15 +469,4 @@ export const REQUEST_PARAMS = (method = "POST", headers = {}) => ({
469469

470470
export const LINEA_PROD_URL = "https://linea-mainnet.infura.io";
471471
export const LINEA_DEV_URL = "https://linea-mainnet.dev.infura.org";
472-
export const LINEA_REQUEST_URL = LINEA_PROD_URL;
473-
export const AUTH_WALLET_ENS = "auth.wallet.ens";
474-
export const AUTH_WALLET_PROJECTS = "auth.wallet.projects";
475-
export const AUTH_WALLET_USER_PLAN = "auth.wallet.uksTier";
476-
477-
export const getWalletEns = () => {
478-
return sessionStorage.getItem(AUTH_WALLET_ENS);
479-
};
480-
481-
export const getUksTier = (): string => {
482-
return sessionStorage.getItem(AUTH_WALLET_USER_PLAN);
483-
};
472+
export const LINEA_REQUEST_URL = LINEA_PROD_URL;

‎src/lib/siwsrp/auth.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,17 @@ export const AUTH_WALLET_PAIRING = 'auth.wallet.pairing'
1414
export const AUTH_WALLET_SESSION_NAME = 'auth.wallet.session'
1515
export const AUTH_WALLET_TOKEN = 'auth.wallet.token'
1616
export const AUTH_WALLET_PROJECTS = 'auth.wallet.projects'
17+
export const AUTH_WALLET_USER_PLAN = "auth.wallet.uksTier";
18+
export const AUTH_WALLET_ENS = "auth.wallet.ens";
19+
20+
export const getWalletEns = () => {
21+
return sessionStorage.getItem(AUTH_WALLET_ENS);
22+
};
23+
24+
export const getUksTier = (): string => {
25+
return sessionStorage.getItem(AUTH_WALLET_USER_PLAN);
26+
};
27+
1728

1829
const getHydraEnv = (env: string): HydraEnv => {
1930
const platform = Platform.INFURA;
@@ -35,11 +46,11 @@ const getHydraEnv = (env: string): HydraEnv => {
3546

3647
const storage: SDK.AuthStorageOptions = {
3748
getLoginResponse: async () => {
38-
const storedResponse = localStorage.getItem(AUTH_WALLET_SESSION_NAME);
49+
const storedResponse = sessionStorage.getItem(AUTH_WALLET_SESSION_NAME);
3950
return storedResponse ? JSON.parse(storedResponse) : null;
4051
},
4152
setLoginResponse: async (val: SDK.LoginResponse) => {
42-
localStorage.setItem(AUTH_WALLET_SESSION_NAME, JSON.stringify(val));
53+
sessionStorage.setItem(AUTH_WALLET_SESSION_NAME, JSON.stringify(val));
4354
},
4455
};
4556

@@ -88,6 +99,4 @@ export const getUserIdFromJwtToken = () => {
8899

89100
export const clearStorage = () => {
90101
sessionStorage.clear();
91-
localStorage.removeItem(AUTH_WALLET_SESSION_NAME);
92-
localStorage.removeItem(AUTH_WALLET_PAIRING);
93102
};

‎src/theme/Root.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ import { MetaMaskSDK, SDKProvider } from "@metamask/sdk";
1212
import {
1313
REF_ALLOW_LOGIN_PATH,
1414
REQUEST_PARAMS,
15-
AUTH_WALLET_PROJECTS,
16-
AUTH_WALLET_ENS,
17-
getWalletEns,
18-
getUksTier,
1915
} from "@site/src/lib/constants";
2016
import {
2117
clearStorage,
2218
getUserIdFromJwtToken,
2319
saveTokenString,
2420
getTokenString,
21+
getUksTier,
22+
AUTH_WALLET_PROJECTS,
23+
AUTH_WALLET_ENS,
24+
getWalletEns
2525
} from "@site/src/lib/siwsrp/auth";
2626
import AuthModal, {
2727
AUTH_LOGIN_STEP,
@@ -56,10 +56,12 @@ interface IMetamaskProviderContext {
5656
setMetaMaskProvider: (arg: SDKProvider) => void;
5757
uksTier: string;
5858
sdk: MetaMaskSDK;
59+
setNeedsMfa: (arg: boolean) => void;
60+
needsMfa: boolean;
5961
setWalletLinked: (arg: WALLET_LINK_TYPE) => void;
6062
walletLinked: WALLET_LINK_TYPE | undefined;
61-
setWalletLinkUrl: (arg: string) => void;
62-
walletLinkUrl: string;
63+
setWalletAuthUrl: (arg: string) => void;
64+
walletAuthUrl: string;
6365
userAPIKey?: string;
6466
setUserAPIKey?: (key: string) => void;
6567
fetchLineaEns?: (walletId: string) => Promise<void>;
@@ -79,10 +81,12 @@ export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
7981
metaMaskProvider: undefined,
8082
setMetaMaskProvider: () => {},
8183
sdk: undefined,
84+
setNeedsMfa: () => {},
85+
needsMfa: false,
8286
setWalletLinked: () => {},
8387
walletLinked: undefined,
84-
setWalletLinkUrl: () => {},
85-
walletLinkUrl: "",
88+
setWalletAuthUrl: () => {},
89+
walletAuthUrl: "",
8690
userAPIKey: "",
8791
setUserAPIKey: () => {},
8892
fetchLineaEns: () => new Promise(() => {}),
@@ -115,7 +119,8 @@ export const LoginProvider = ({ children }) => {
115119
const [walletLinked, setWalletLinked] = useState<
116120
WALLET_LINK_TYPE | undefined
117121
>(undefined);
118-
const [walletLinkUrl, setWalletLinkUrl] = useState<string>("");
122+
const [needsMfa, setNeedsMfa] = useState<boolean>(false);
123+
const [walletAuthUrl, setWalletAuthUrl] = useState<string>("");
119124
const [userAPIKey, setUserAPIKey] = useState("");
120125
const { siteConfig } = useDocusaurusContext();
121126
const { DASHBOARD_URL, GF_SURVEY_KEY, LINEA_ENS_URL } = siteConfig?.customFields || {};
@@ -185,6 +190,7 @@ export const LoginProvider = ({ children }) => {
185190
setUksTier(undefined);
186191
setProjects({});
187192
setWalletLinked(undefined);
193+
setNeedsMfa(false);
188194
setUserAPIKey("");
189195
clearStorage();
190196
} catch (err) {
@@ -276,8 +282,10 @@ export const LoginProvider = ({ children }) => {
276282
sdk,
277283
walletLinked,
278284
setWalletLinked,
279-
walletLinkUrl,
280-
setWalletLinkUrl,
285+
needsMfa,
286+
setNeedsMfa,
287+
walletAuthUrl,
288+
setWalletAuthUrl,
281289
userAPIKey,
282290
setUserAPIKey,
283291
fetchLineaEns,

0 commit comments

Comments
 (0)