From 9c6fefd83948331a6d52dbaa9200853115669893 Mon Sep 17 00:00:00 2001 From: Spencer Schoeneman Date: Mon, 4 Dec 2023 06:46:40 -0600 Subject: [PATCH] add authSlice - set auth vars on login/logout --- packages/nextjs/auth/authSlice.ts | 37 +++++++++++++++++++ .../nextjs/components/dash-wind/app/store.ts | 6 +++ .../dash-wind/containers/Header.tsx | 10 ++--- .../dash-wind/features/user/Login.tsx | 12 ++++-- packages/nextjs/pages/_app.tsx | 10 +---- packages/nextjs/pages/index.tsx | 14 ++++++- 6 files changed, 69 insertions(+), 20 deletions(-) create mode 100644 packages/nextjs/auth/authSlice.ts diff --git a/packages/nextjs/auth/authSlice.ts b/packages/nextjs/auth/authSlice.ts new file mode 100644 index 0000000..b9f85db --- /dev/null +++ b/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; diff --git a/packages/nextjs/components/dash-wind/app/store.ts b/packages/nextjs/components/dash-wind/app/store.ts index c5b1657..f4a9a68 100644 --- a/packages/nextjs/components/dash-wind/app/store.ts +++ b/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,6 +32,10 @@ interface CombinedReducer { isLoading: boolean; leads: never[]; }>; + auth: Reducer<{ + isConnected: boolean; + provider: AuthProvider; + }>; } const combinedReducer: CombinedReducer = { @@ -38,6 +43,7 @@ const combinedReducer: CombinedReducer = { rightDrawer: rightDrawerSlice, modal: modalSlice, lead: leadsSlice, + auth: authSlice, }; // export default configureStore({ diff --git a/packages/nextjs/components/dash-wind/containers/Header.tsx b/packages/nextjs/components/dash-wind/containers/Header.tsx index a8fb6e9..c6825dc 100644 --- a/packages/nextjs/components/dash-wind/containers/Header.tsx +++ b/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("/"); } diff --git a/packages/nextjs/components/dash-wind/features/user/Login.tsx b/packages/nextjs/components/dash-wind/features/user/Login.tsx index e82f273..422073c 100644 --- a/packages/nextjs/components/dash-wind/features/user/Login.tsx +++ b/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); diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx index de6cd63..59df41e 100644 --- a/packages/nextjs/pages/_app.tsx +++ b/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); } diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index 1638fd0..8a51d66 100644 --- a/packages/nextjs/pages/index.tsx +++ b/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