From 83f20439c3bd114bd4a710a23d9c8f00353ccfb4 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Tue, 3 Feb 2026 17:21:23 +0100
Subject: [PATCH] refactor: Update Web3Auth instance to allow null value

---
 README.md                     | 10 ++++++++++
 src/config/iq-login.config.ts |  7 ++++---
 src/hooks/use-web-3-auth.tsx  |  6 +++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 62af0eb..94670cd 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,8 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id
 
 2. Add the package to your Tailwind CSS configuration:
 
+For Tailwind CSS v3:
+
 ```ts
 // tailwind.config.ts
 import type { Config } from "tailwindcss";
@@ -36,6 +38,14 @@ const config: Config = {
 export default config;
 ```
 
+For Tailwind CSS v4:
+
+Add this line to your CSS entry point (e.g., `app/globals.css`):
+
+```css
+@source "../node_modules/@everipedia/iq-login";
+```
+
 3. Wrap your application with the IqLoginProvider in your layout file:
 
 ```tsx
diff --git a/src/config/iq-login.config.ts b/src/config/iq-login.config.ts
index bba90fb..0824e7e 100644
--- a/src/config/iq-login.config.ts
+++ b/src/config/iq-login.config.ts
@@ -31,7 +31,7 @@ if (!WEB_3_AUTH_CLIENT_ID) {
 
 export interface IqLoginConfig {
 	wagmiConfig: Config;
-	web3AuthInstance: Web3AuthModal.Web3Auth;
+	web3AuthInstance: Web3AuthModal.Web3Auth | null;
 	chains: [Chain, ...Chain[]];
 }
 
@@ -42,10 +42,11 @@ export function createIqLoginConfig(
 		chains.map((chain) => [chain.id, http()]),
 	);
 
-	const web3AuthInstance = createWeb3AuthInstance(chains[0]);
+	const web3AuthInstance =
+		typeof window !== "undefined" ? createWeb3AuthInstance(chains[0]) : null;
 
 	const connectors =
-		typeof window !== "undefined"
+		web3AuthInstance && typeof window !== "undefined"
 			? [
 					injected(),
 					walletConnect({
diff --git a/src/hooks/use-web-3-auth.tsx b/src/hooks/use-web-3-auth.tsx
index 20778c6..50142d2 100644
--- a/src/hooks/use-web-3-auth.tsx
+++ b/src/hooks/use-web-3-auth.tsx
@@ -22,13 +22,17 @@ export function Web3AuthProvider({
 	chains,
 }: {
 	children: React.ReactNode;
-	web3AuthInstance: Web3Auth;
+	web3AuthInstance: Web3Auth | null;
 	chains: Chain[];
 }) {
 	const [user, setUser] = useState<Partial<UserInfo> | null>(null);
 	const [chainsAdded, setChainsAdded] = useState(false);
 
 	useEffect(() => {
+		if (!web3AuthInstance) {
+			return;
+		}
+
 		web3AuthInstance.on("connected", async () => {
 			setUser(await web3AuthInstance.getUserInfo());