worked on login functionality

Stephen-Gordon · Feb 7, 2024 · 0957d43 · 0957d43
1 parent 0df9ed9
commit 0957d43
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 38 deletions.
diff --git a/src/GlobalRedux/Features/login/loginSlice.tsx b/src/GlobalRedux/Features/login/loginSlice.tsx
@@ -1,20 +1,22 @@
-'use client';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import { createSlice } from '@reduxjs/toolkit';
+interface LoginState {
+  isLoggedIn: boolean;
+}
+
+const initialState: LoginState = {
+  isLoggedIn: false,
+};
 
 export const loginSlice = createSlice({
   name: 'login',
-  initialState: {
-    value: false,
-  },
+  initialState,
   reducers: {
-    login: (state) => {
-      state.value = true;
-    },
-    logout: (state) => {
-      state.value = false;
+    setLogin: (state, action: PayloadAction<boolean>) => {
+      state.isLoggedIn = action.payload;
     },
   },
 });
-export const { login, logout } = loginSlice.actions;
+
+export const { setLogin } = loginSlice.actions;
 export default loginSlice.reducer;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -23,6 +23,7 @@ import { useSelector } from 'react-redux';
 import { RootState, persistor } from '@/GlobalRedux/store';
 
 import { PersistGate } from 'redux-persist/integration/react';
+import { usePathname, useRouter } from 'next/navigation';
 
 // !STARTERCONF Change these default meta
 // !STARTERCONF Look at @/constant/config to change them
@@ -78,6 +79,17 @@ export default function RootLayout({
 }) {
   const queryClient = new QueryClient();
 
+  const router = useRouter();
+  const pathname = usePathname();
+  /*   const loginState = useSelector((state: RootState) => state.login.value);
+
+  // Redirect to login if not authenticated
+  if (!loginState && pathname !== '/login') {
+    router.push('/login');
+    return null;
+  }
+  console.log(loginState);
+ */
   return (
     <html>
       <body>

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -8,24 +8,22 @@ import { useState, useEffect } from 'react';
 
 // Web3auth
 import { Web3AuthNoModal } from '@web3auth/no-modal';
-import { CHAIN_NAMESPACES, IProvider, WALLET_ADAPTERS } from '@web3auth/base';
+import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from '@web3auth/base';
 import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
 import { OpenloginAdapter } from '@web3auth/openlogin-adapter';
 
 import { useDispatch } from 'react-redux';
 
 // Components
-import Balance from '@/app/components/Balance/Balance';
 import useCreateKernal from '@/app/utils/useCreateKernal';
-import Link from 'next/link';
 
 // spinner
 import { RotatingLines } from 'react-loader-spinner';
 
 import { setKernalClient } from '@/GlobalRedux/Features/kernalClient/kernalClientSlice';
 
-import { parseEther } from 'viem';
 import { useRouter } from 'next/navigation';
+import { setLogin } from '@/GlobalRedux/Features/login/loginSlice';
 
 const chainConfig = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
@@ -54,15 +52,20 @@ const openloginAdapter = new OpenloginAdapter({
 web3auth.configureAdapter(openloginAdapter);
 
 export default function Page() {
+  // Kernal State
   const [kernalClient, setKernal] = useState<any>(null);
-
+  // Loading State
+  const [loading, setLoading] = useState<boolean>(false);
+  // Login Success State
   const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
 
+  // router
   const router = useRouter();
 
   // set the kernal client in redux
   const dispatch = useDispatch();
 
+  // initial useEffect to setup the sdk
   useEffect(() => {
     const init = async () => {
       try {
@@ -77,15 +80,11 @@ export default function Page() {
     init();
   }, []);
 
-  useEffect(() => {
-    if (loginSuccess) {
-      router.push('/home');
-    }
-  }, [loginSuccess]);
-
+  // Web3Auth login
   const login = async () => {
     try {
       console.log('logging in');
+      setLoading(true);
       const web3authProvider = await web3auth.connectTo(
         WALLET_ADAPTERS.OPENLOGIN,
         {
@@ -101,30 +100,46 @@ export default function Page() {
       console.log(error);
     }
   };
+  const setReduxKernal = async () => {
+    try {
+      console.log('setting kernal');
+      dispatch(setKernalClient(kernalClient));
+      console.log('kernal set');
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const setReduxLogin = async () => {
+    try {
+      console.log('setting login');
+      dispatch(setLogin(true));
+      console.log('login set');
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
+  // ZeroDev SDK setup
   const setUp = async () => {
     try {
       if (web3auth) {
         const kernal = await useCreateKernal(web3auth);
         setKernal(kernal);
+        if (kernal.account) {
+          setLoading(false);
+          setLoginSuccess(true);
+          setReduxKernal();
+          setTimeout(() => {
+            router.push('/home');
+          }, 2000);
+        }
         console.log('My account:', kernal.account.address);
       }
     } catch (error) {
       console.log(error);
     }
   };
 
-  useEffect(() => {
-    const setReduxKernal = async () => {
-      try {
-        console.log('setting kernal');
-        dispatch(setKernalClient(kernalClient));
-        console.log('kernal set');
-      } catch (error) {}
-    };
-    setReduxKernal();
-  }, [kernalClient]);
-
   return (
     <main>
       <Head>
@@ -135,7 +150,18 @@ export default function Page() {
           onClick={login}
           className='rounded-lg bg-blue-500 px-8 py-4 text-white transition-all duration-300 hover:bg-blue-700'
         >
-          {!loading ? 'Sign in with Google' : <RotatingLines />}
+          {!loading ? (
+            'Sign in with Google'
+          ) : (
+            <RotatingLines
+              visible={true}
+              height='96'
+              width='96'
+              color='grey'
+              strokeWidth='5'
+              animationDuration='1'
+            />
+          )}
         </button>
       </section>
     </main>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -128,7 +128,6 @@ export default function HomePage() {
       <div className='flex-container'>
         <div>
           Logged in
-          <button onClick={getDetails}>Details</button>
           <button onClick={setUp}>Setup</button>
         </div>
       </div>

diff --git a/src/app/utils/useCreateKernal.tsx b/src/app/utils/useCreateKernal.tsx
@@ -1,6 +1,4 @@
 'use client';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../GlobalRedux/store';
 import { IProvider } from '@web3auth/base';
 
 // rpc
@@ -30,7 +28,7 @@ const useCreateKernal = async (web3auth) => {
   const kernelClient = await createEcdsaKernelAccountClient({
     // required
     chain: sepolia,
-    projectId: 'f6375b6f-2205-4fc7-bc87-f03218789b86',
+    projectId: process.env.ZERODEV_ID,
     signer: signer,
   });