Adding an option to enable auto-logout when the wallet is disconnected

src/components/Web3RouteGuard.tsx

@@ -1,5 +1,6 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, PropsWithChildren, ReactNode } from 'react';
+import { useEffect, PropsWithChildren, ReactNode, useCallback } from 'react';
+import { useAccountEffect } from 'wagmi';
 
 import { useWeb3AuthToken } from '../hooks/useWeb3AuthToken';
 
@@ -8,21 +9,33 @@ type Web3RouteGuardProps = {
   loginSearchParams?: string[][];
   token: Parameters<typeof useWeb3AuthToken>[0];
   fallback?: ReactNode | undefined;
+  logoutOnDisconnect?: boolean;
 };
 
 export const Web3RouteGuard = ({
   loginRoute,
   loginSearchParams = [],
   token: tokenOptions,
   fallback,
+  logoutOnDisconnect = false,
   children,
 }: PropsWithChildren<Web3RouteGuardProps>) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const { isVerifying, isAuthenticated } = useWeb3AuthToken(tokenOptions);
+  const { isVerifying, isAuthenticated, clear } = useWeb3AuthToken(tokenOptions);
   const currentUrl = `${pathname}?${searchParams}`;
 
+  useAccountEffect({
+    onDisconnect: useCallback(() => {
+      if (!logoutOnDisconnect) {
+        return;
+      }
+
+      clear();
+    }, [logoutOnDisconnect, clear]),
+  });
+
   useEffect(() => {
     if (isAuthenticated || isVerifying) {
       return;