From 0957d43a60ec452c0f0f8d54c44c0a82e44d19b5 Mon Sep 17 00:00:00 2001 From: Stephen Gordon Date: Wed, 7 Feb 2024 14:59:00 +0000 Subject: [PATCH] worked on login functionality --- src/GlobalRedux/Features/login/loginSlice.tsx | 24 ++++--- src/app/layout.tsx | 12 ++++ src/app/login/page.tsx | 72 +++++++++++++------ src/app/page.tsx | 1 - src/app/utils/useCreateKernal.tsx | 4 +- 5 files changed, 75 insertions(+), 38 deletions(-) diff --git a/src/GlobalRedux/Features/login/loginSlice.tsx b/src/GlobalRedux/Features/login/loginSlice.tsx index 670df67..6dfee9a 100644 --- 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) => { + 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 index 21e258e..5c78175 100644 --- 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 ( diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 74f0ee9..46d45d4 100644 --- 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(null); - + // Loading State + const [loading, setLoading] = useState(false); + // Login Success State const [loginSuccess, setLoginSuccess] = useState(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,12 +100,39 @@ 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) { @@ -114,17 +140,6 @@ export default function Page() { } }; - useEffect(() => { - const setReduxKernal = async () => { - try { - console.log('setting kernal'); - dispatch(setKernalClient(kernalClient)); - console.log('kernal set'); - } catch (error) {} - }; - setReduxKernal(); - }, [kernalClient]); - return (
@@ -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' : } + {!loading ? ( + 'Sign in with Google' + ) : ( + + )}
diff --git a/src/app/page.tsx b/src/app/page.tsx index 5b679e7..d5ea8ff 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -128,7 +128,6 @@ export default function HomePage() {
Logged in -
diff --git a/src/app/utils/useCreateKernal.tsx b/src/app/utils/useCreateKernal.tsx index 2ec21ab..6902ee7 100644 --- 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, });