add web3auth and basic route auth guard

packages/nextjs/auth/checkUserAuthentication.ts

@@ -0,0 +1,23 @@
+import { web3auth } from "~~/auth/web3auth";
+
+export default function checkUserAuthentication(path: string) {
+  console.log("from checkUserAuthentication - Path = ", path);
+
+  const protectedRoutes = [
+    "/dapp/dashboard",
+    "/dapp/welcome",
+    "/dapp/leads",
+    "/dapp/settings-team",
+    "/dapp/calendar",
+    "/dapp/transactions",
+    "/dapp/settings-profile",
+    "/dapp/settings-billing",
+    "/dapp/charts",
+    "/dapp/integration",
+  ];
+
+  if (!web3auth.connected && protectedRoutes.includes(path)) {
+    return false;
+  }
+  return true;
+}

packages/nextjs/auth/web3auth.ts

@@ -0,0 +1,23 @@
+import { Web3Auth } from "@web3auth/modal";
+
+export const web3auth = new Web3Auth({
+  clientId: "BM0SLNkhMCfIygw0Xi79dG6qbWGMN0o0mEeDjRT0dxlP3BEok9pnu5aqxCNfj2TZ9XT7sQaXm0ltuWbCQ1tsRNI", // Get your Client ID from the Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_devnet", // Web3Auth Network
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x13881", // Mumbai
+    rpcTarget: "https://rpc.ankr.com/polygon_mumbai",
+    displayName: "Mumbai Testnet",
+    blockExplorer: "https://mumbai.polygonscan.com/",
+    ticker: "MATIC",
+    tickerName: "Polygon",
+  },
+});
+
+export async function web3AuthInit() {
+  try {
+    await web3auth.initModal();
+  } catch (error) {
+    console.error(error);
+  }
+}

packages/nextjs/components/dash-wind/containers/Header.tsx

@@ -9,6 +9,7 @@ import Bars3Icon from "@heroicons/react/24/outline/Bars3Icon";
 import BellIcon from "@heroicons/react/24/outline/BellIcon";
 import MoonIcon from "@heroicons/react/24/outline/MoonIcon";
 import SunIcon from "@heroicons/react/24/outline/SunIcon";
+import { web3auth } from "~~/auth/web3auth";
 // import UserIcon from "@heroicons/react/24/outline/UserIcon";
 import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
 import { Address } from "~~/components/web-3-crew/Address";
@@ -38,10 +39,13 @@ function Header() {
     dispatch(openRightDrawer({ header: "Notifications", bodyType: RIGHT_DRAWER_TYPES.NOTIFICATION }));
   };
 
-  function logoutUser() {
-    if (typeof window !== "undefined") {
-      localStorage.clear();
+  async function logoutUser() {
+    if (web3auth.connected) {
+      await web3auth.logout();
     }
+    // TODO
+    // set provider to null
+    // set logged in state to false
     router.push("/");
   }
 

packages/nextjs/components/dash-wind/features/user/Login.tsx

@@ -1,9 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import InputText from "../../components/Input/InputText";
 import ErrorText from "../../components/Typography/ErrorText";
 import { UpdateFormValues } from "../../types/FormTypes";
 import LandingIntro from "./LandingIntro";
+import { web3auth } from "~~/auth/web3auth";
 
 function Login() {
   const INITIAL_LOGIN_OBJ = {
@@ -15,6 +17,24 @@ function Login() {
   const [errorMessage, setErrorMessage] = useState("");
   const [loginObj, setLoginObj] = useState(INITIAL_LOGIN_OBJ);
 
+  const router = useRouter();
+
+  // Web3Auth
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await web3auth.connect();
+        // TODO
+        // set provider state (?) already being done in _app.tsx
+        // set logged in state to true
+        router.push("/dapp/dashboard");
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    init();
+  });
+
   const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setErrorMessage("");
@@ -26,7 +46,8 @@ function Login() {
       // Call API to check user credentials and save token in localstorage
       localStorage.setItem("token", "DumyTokenHere");
       setLoading(false);
-      window.location.href = "/dapp/welcome";
+      router.push("/dapp/welcome");
+      // window.location.href = "/dapp/welcome";
     }
   };
 

packages/nextjs/components/web-3-crew/watchPathname.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/router";
+import checkUserAuthentication from "~~/auth/checkUserAuthentication";
+
+export default function WatchPathname() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  useEffect(() => {
+    console.log(`Route changed to: ${pathname}`);
+    if (pathname !== null) {
+      const userIsAuthenticated = checkUserAuthentication(pathname);
+      if (!userIsAuthenticated) {
+        router.replace("/login");
+      }
+    }
+  }, [pathname, router]);
+
+  return <></>;
+}

packages/nextjs/package.json

@@ -20,6 +20,8 @@
     "@reduxjs/toolkit": "^1.9.7",
     "@uniswap/sdk-core": "^4.0.1",
     "@uniswap/v2-sdk": "^3.0.1",
+    "@web3auth/base": "^7.2.0",
+    "@web3auth/modal": "^7.2.0",
     "axios": "^1.6.2",
     "blo": "^1.0.1",
     "chart.js": "^4.4.0",

packages/nextjs/pages/_app.tsx

@@ -5,13 +5,13 @@ import "@rainbow-me/rainbowkit/styles.css";
 import type { NextPage } from "next";
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
-// NEW
 import { Provider } from "react-redux";
 import { useDarkMode } from "usehooks-ts";
 import { WagmiConfig } from "wagmi";
-// NEW
+import { web3AuthInit, web3auth } from "~~/auth/web3auth";
 import { wrapper } from "~~/components/dash-wind/app/store";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
+import WatchPathname from "~~/components/web-3-crew/watchPathname";
 import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
@@ -43,12 +43,33 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppPropsWithLayout) => {
     setIsDarkTheme(isDarkMode);
   }, [isDarkMode]);
 
+  // Web3Auth
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await web3AuthInit();
+        // TODO
+        // set Provider state
+        // ...
+        if (web3auth.connected) {
+          // TODO
+          // set logged In state
+          // ...
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    init();
+  }, []);
+
   const getLayout = Component.getLayout || (page => page);
 
   const { store, props } = wrapper.useWrappedStore(pageProps);
 
   return (
     <WagmiConfig config={wagmiConfig}>
+      <WatchPathname />
       <NextNProgress />
       <RainbowKitProvider
         chains={appChains.chains}

packages/nextjs/pages/index.tsx

@@ -1,10 +1,22 @@
 import { ReactElement } from "react";
-import Link from "next/link";
+// import Link from "next/link";
+import { useRouter } from "next/router";
 import type { NextPageWithLayout } from "./_app";
+import { web3auth } from "~~/auth/web3auth";
 import { MetaHeader } from "~~/components/MetaHeader";
 import CleanLayout from "~~/components/layouts/CleanLayout";
 
 const LandingPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  function launchDapp() {
+    if (web3auth.connected) {
+      // redirect to dashboard if logged in
+      router.push("/dapp/dashboard");
+      return;
+    }
+    // redirect to login if not connected
+    router.push("/login");
+  }
   return (
     <>
       <MetaHeader /> {/* Look into MetaHeader - should it be moved to _app.tsx ??? */}
@@ -20,9 +32,12 @@ const LandingPage: NextPageWithLayout = () => {
             <span className="block text-3xl font-bold">Web3Crew Constellation Project</span>
           </h2>
         </div>
-        <Link href="/login" className="btn btn-primary rounded-lg">
+        <button onClick={launchDapp} className="btn btn-primary rounded-lg">
           Launch Dapp
-        </Link>
+        </button>
+        {/* <Link href="/login" className="btn btn-primary rounded-lg">
+          Launch Dapp
+        </Link> */}
       </div>
     </>
   );