add authSlice - set auth vars on login/logout

packages/nextjs/auth/authSlice.ts

@@ -0,0 +1,37 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { IProvider } from "@web3auth/base";
+
+export type AuthProvider = IProvider | null;
+
+export interface AuthRootState {
+  auth: {
+    isConnected: boolean;
+    provider: AuthProvider;
+  };
+}
+
+interface AuthState {
+  isConnected: boolean;
+  provider: AuthProvider;
+}
+
+export const authSlice = createSlice({
+  name: "auth",
+  initialState: {
+    isConnected: false,
+    provider: null as AuthProvider,
+  },
+  reducers: {
+    setAuthProvider: (state: AuthState, action: PayloadAction<{ provider: AuthProvider }>) => {
+      state.provider = action.payload.provider;
+    },
+
+    setIsConnected: (state: AuthState, action: PayloadAction<{ isConnected: boolean }>) => {
+      state.isConnected = action.payload.isConnected;
+    },
+  },
+});
+
+export const { setAuthProvider, setIsConnected } = authSlice.actions;
+
+export default authSlice.reducer;

packages/nextjs/components/dash-wind/app/store.ts

@@ -6,6 +6,7 @@ import { Reducer, ThunkAction, configureStore } from "@reduxjs/toolkit";
 import { createWrapper } from "next-redux-wrapper";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import { Action } from "redux";
+import authSlice, { AuthProvider } from "~~/auth/authSlice";
 
 interface CombinedReducer {
   header: Reducer<{
@@ -31,13 +32,18 @@ interface CombinedReducer {
     isLoading: boolean;
     leads: never[];
   }>;
+  auth: Reducer<{
+    isConnected: boolean;
+    provider: AuthProvider;
+  }>;
 }
 
 const combinedReducer: CombinedReducer = {
   header: headerSlice,
   rightDrawer: rightDrawerSlice,
   modal: modalSlice,
   lead: leadsSlice,
+  auth: authSlice,
 };
 
 // export default configureStore({

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 { setAuthProvider, setIsConnected } from "~~/auth/authSlice";
 import { web3auth } from "~~/auth/web3auth";
 // import UserIcon from "@heroicons/react/24/outline/UserIcon";
 import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
@@ -40,12 +41,9 @@ function Header() {
   };
 
   async function logoutUser() {
-    if (web3auth.connected) {
-      await web3auth.logout();
-    }
-    // TODO
-    // set provider to null
-    // set logged in state to false
+    await web3auth.logout();
+    dispatch(setAuthProvider({ provider: null }));
+    dispatch(setIsConnected({ isConnected: false }));
     router.push("/");
   }
 

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

@@ -5,7 +5,9 @@ import InputText from "../../components/Input/InputText";
 import ErrorText from "../../components/Typography/ErrorText";
 import { UpdateFormValues } from "../../types/FormTypes";
 import LandingIntro from "./LandingIntro";
+import { setAuthProvider, setIsConnected } from "~~/auth/authSlice";
 import { web3auth } from "~~/auth/web3auth";
+import { useMyDispatch } from "~~/components/dash-wind/app/store";
 
 function Login() {
   const INITIAL_LOGIN_OBJ = {
@@ -18,15 +20,17 @@ function Login() {
   const [loginObj, setLoginObj] = useState(INITIAL_LOGIN_OBJ);
 
   const router = useRouter();
+  const dispatch = useMyDispatch();
 
   // 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
+        const web3authProvider = await web3auth.connect();
+        dispatch(setAuthProvider({ provider: web3authProvider }));
+        if (web3auth.connected) {
+          dispatch(setIsConnected({ isConnected: true }));
+        }
         router.push("/dapp/dashboard");
       } catch (error) {
         console.error(error);

packages/nextjs/pages/_app.tsx

@@ -8,7 +8,7 @@ import { Toaster } from "react-hot-toast";
 import { Provider } from "react-redux";
 import { useDarkMode } from "usehooks-ts";
 import { WagmiConfig } from "wagmi";
-import { web3AuthInit, web3auth } from "~~/auth/web3auth";
+import { web3AuthInit } 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";
@@ -48,14 +48,6 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppPropsWithLayout) => {
     const init = async () => {
       try {
         await web3AuthInit();
-        // TODO
-        // set Provider state
-        // ...
-        if (web3auth.connected) {
-          // TODO
-          // set logged In state
-          // ...
-        }
       } catch (error) {
         console.error(error);
       }

packages/nextjs/pages/index.tsx

@@ -1,13 +1,25 @@
-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
 // import Link from "next/link";
 import { useRouter } from "next/router";
 import type { NextPageWithLayout } from "./_app";
+import { setAuthProvider, setIsConnected } from "~~/auth/authSlice";
 import { web3auth } from "~~/auth/web3auth";
 import { MetaHeader } from "~~/components/MetaHeader";
+import { useMyDispatch } from "~~/components/dash-wind/app/store";
 import CleanLayout from "~~/components/layouts/CleanLayout";
 
 const LandingPage: NextPageWithLayout = () => {
   const router = useRouter();
+  const dispatch = useMyDispatch();
+
+  useEffect(() => {
+    dispatch(setAuthProvider({ provider: web3auth.provider }));
+
+    if (web3auth.connected) {
+      dispatch(setIsConnected({ isConnected: true }));
+    }
+  }, [dispatch]);
+
   function launchDapp() {
     if (web3auth.connected) {
       // redirect to dashboard if logged in