feat(mm-registration): Register with MetaMask

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,15 +191,17 @@ 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
         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,
+            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 {

src/lib/constants.js

@@ -459,23 +459,29 @@ 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,
+];
 
-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;

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,
@@ -36,11 +37,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 +86,4 @@ export const getUserIdFromJwtToken = () => {
 
 export const clearStorage = () => {
   sessionStorage.clear();
-  localStorage.removeItem(AUTH_WALLET_SESSION_NAME);
-  localStorage.removeItem(AUTH_WALLET_TOKEN);
-  localStorage.removeItem(AUTH_WALLET_PROJECTS);
 };

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();