diff --git a/apps/events/src/Boot.tsx b/apps/events/src/Boot.tsx
index 7c7565d5..fa287f79 100644
--- a/apps/events/src/Boot.tsx
+++ b/apps/events/src/Boot.tsx
@@ -1,6 +1,7 @@
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 
-import { AuthProvider } from './components/auth';
+import { Identity } from '@graphprotocol/hypergraph';
+import { PrivyProvider } from '@privy-io/react-auth';
 import { routeTree } from './routeTree.gen';
 
 // Create a new router instance
@@ -15,8 +16,25 @@ declare module '@tanstack/react-router' {
 
 export function Boot() {
   return (
-    <AuthProvider>
-      <RouterProvider router={router} />
-    </AuthProvider>
+    <PrivyProvider // note: PrivyProvider is only needed for the login page and the logout button in the navigation
+      appId="cm4wx6ziv00ngrmfjf9ik36iu"
+      config={{
+        // Display email and wallet as login methods
+        loginMethods: ['email', 'wallet', 'google', 'twitter', 'github'],
+        // Customize Privy's appearance in your app
+        appearance: {
+          theme: 'light',
+          accentColor: '#676FFF',
+        },
+        // Create embedded wallets for users who don't have a wallet
+        embeddedWallets: {
+          createOnLogin: 'users-without-wallets',
+        },
+      }}
+    >
+      <Identity.GraphLogin storage={localStorage}>
+        <RouterProvider router={router} />
+      </Identity.GraphLogin>
+    </PrivyProvider>
   );
 }
diff --git a/apps/events/src/components/auth.tsx b/apps/events/src/components/auth.tsx
deleted file mode 100644
index 6eb7e8a8..00000000
--- a/apps/events/src/components/auth.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Identity } from '@graphprotocol/hypergraph';
-import { PrivyProvider, usePrivy, useWallets } from '@privy-io/react-auth';
-import { useEffect, useState } from 'react';
-import { createWalletClient, custom } from 'viem';
-import { mainnet } from 'viem/chains';
-
-function DoGraphLogin() {
-  const { login } = Identity.useGraphLogin();
-  // biome-ignore lint/correctness/useExhaustiveDependencies: this is an issue and will make sure login is not run in a useEffect
-  useEffect(() => {
-    console.log('Logging in to The Graph');
-    login();
-  }, []);
-  return <div />;
-}
-
-function Auth({ children }: { children: React.ReactNode }) {
-  const { signMessage, authenticated } = usePrivy();
-  const { wallets } = useWallets();
-  const [signer, setSigner] = useState<Identity.Signer | null>(null);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: todo [this is kinda ugly]
-  useEffect(() => {
-    if (wallets.length > 0) {
-      (async () => {
-        const embeddedWallet = wallets.find((wallet) => wallet.walletClientType === 'privy') || wallets[0];
-        const privyProvider = await embeddedWallet.getEthereumProvider();
-
-        const walletClient = createWalletClient({
-          chain: mainnet,
-          transport: custom(privyProvider),
-        });
-
-        // create a signer-like interface compatible with Identity.Signer
-        const newSigner: Identity.Signer = {
-          getAddress: async () => {
-            const [address] = await walletClient.getAddresses();
-            return address;
-          },
-          signMessage: async (message: string) => {
-            if (embeddedWallet.walletClientType === 'privy') {
-              const { signature } = await signMessage({ message });
-              return signature;
-            }
-            const [address] = await walletClient.getAddresses();
-            return await walletClient.signMessage({ account: address, message });
-          },
-        };
-
-        setSigner(newSigner);
-      })();
-    }
-  }, [wallets, setSigner, signMessage]);
-
-  return (
-    <>
-      {signer && authenticated ? (
-        <Identity.GraphLogin storage={localStorage} signer={signer}>
-          <DoGraphLogin />
-          {children}
-        </Identity.GraphLogin>
-      ) : (
-        // @ts-expect-error signer is not required should be fixed in GraphLogin
-        <Identity.GraphLogin storage={localStorage}>{children}</Identity.GraphLogin>
-      )}
-    </>
-  );
-}
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  return (
-    <PrivyProvider
-      appId="cm4wx6ziv00ngrmfjf9ik36iu"
-      config={{
-        // Display email and wallet as login methods
-        loginMethods: ['email', 'wallet', 'google', 'twitter', 'github'],
-        // Customize Privy's appearance in your app
-        appearance: {
-          theme: 'light',
-          accentColor: '#676FFF',
-        },
-        // Create embedded wallets for users who don't have a wallet
-        embeddedWallets: {
-          createOnLogin: 'users-without-wallets',
-        },
-      }}
-    >
-      <Auth>{children}</Auth>
-    </PrivyProvider>
-  );
-}
diff --git a/apps/events/src/components/logout.tsx b/apps/events/src/components/logout.tsx
index 5fe9a2df..e66d0ce0 100644
--- a/apps/events/src/components/logout.tsx
+++ b/apps/events/src/components/logout.tsx
@@ -7,9 +7,9 @@ export function Logout() {
   const { logout: graphLogout } = Identity.useGraphLogin();
   const { logout: privyLogout } = usePrivy();
   const router = useRouter();
-  const disconnectWallet = () => {
-    graphLogout();
-    privyLogout();
+  const disconnectWallet = async () => {
+    await privyLogout();
+    graphLogout(); // needs to be called after privy logout since it triggers a re-render
     router.navigate({
       to: '/login',
     });
diff --git a/apps/events/src/routes/__root.tsx b/apps/events/src/routes/__root.tsx
index 1283ca0e..b66c7700 100644
--- a/apps/events/src/routes/__root.tsx
+++ b/apps/events/src/routes/__root.tsx
@@ -6,7 +6,6 @@ import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 export const Route = createRootRoute({
   component: () => {
     const { authenticated, getIdentity, getSessionToken } = Identity.useGraphLogin();
-
     const graphIdentity = getIdentity();
     const loggedInSessionToken = getSessionToken();
 
@@ -28,7 +27,7 @@ export const Route = createRootRoute({
       <>
         <div className="flex flex-col min-h-screen">
           <header className="px-4 lg:px-6 h-14 flex items-center">
-            <Link to="/" className="flex items-center justify-center">
+            <Link to={authenticated ? '/' : '/login'} className="flex items-center justify-center">
               Home
             </Link>
             <nav className="ml-auto flex gap-4 sm:gap-6">
diff --git a/apps/events/src/routes/login.lazy.tsx b/apps/events/src/routes/login.lazy.tsx
index f992bd73..531a3aab 100644
--- a/apps/events/src/routes/login.lazy.tsx
+++ b/apps/events/src/routes/login.lazy.tsx
@@ -1,60 +1,110 @@
 import { Button } from '@/components/ui/button';
 import { availableAccounts } from '@/lib/availableAccounts';
 import { Identity } from '@graphprotocol/hypergraph';
-import { usePrivy } from '@privy-io/react-auth';
-import { Link, createLazyFileRoute } from '@tanstack/react-router';
+import { usePrivy, useWallets } from '@privy-io/react-auth';
+import { createLazyFileRoute, useRouter } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { createWalletClient, custom } from 'viem';
+import { mainnet } from 'viem/chains';
 
 export const Route = createLazyFileRoute('/login')({
   component: () => <Login />,
 });
 
 function Login() {
-  const { ready, authenticated, login } = usePrivy();
-  // Disable login when Privy is not ready or the user is already authenticated
-  const disableLogin = !ready || (ready && authenticated);
-  const { setIdentityAndSessionToken, authenticated: graphAuthenticated } = Identity.useGraphLogin();
+  const { ready: privyReady, login: privyLogin, signMessage, authenticated: privyAuthenticated } = usePrivy();
+  const { ready: walletsReady, wallets } = useWallets();
+  const { setIdentityAndSessionToken, login: hypergraphLogin } = Identity.useGraphLogin();
+  const { navigate } = useRouter();
+  const [hypergraphLoginStarted, setHypergraphLoginStarted] = useState(false);
+
+  useEffect(() => {
+    if (
+      !hypergraphLoginStarted && // avoid re-running the effect to often
+      privyAuthenticated && // privy must be authenticated to run it
+      walletsReady && // wallets must be ready to run it
+      wallets.length > 0 // wallets must have at least one wallet to run it
+    ) {
+      setHypergraphLoginStarted(true);
+      (async () => {
+        try {
+          const embeddedWallet = wallets.find((wallet) => wallet.walletClientType === 'privy') || wallets[0];
+          const privyProvider = await embeddedWallet.getEthereumProvider();
+          const walletClient = createWalletClient({
+            chain: mainnet,
+            transport: custom(privyProvider),
+          });
+
+          const signer: Identity.Signer = {
+            getAddress: async () => {
+              const [address] = await walletClient.getAddresses();
+              return address;
+            },
+            signMessage: async (message: string) => {
+              if (embeddedWallet.walletClientType === 'privy') {
+                const { signature } = await signMessage({ message });
+                return signature;
+              }
+              const [address] = await walletClient.getAddresses();
+              return await walletClient.signMessage({ account: address, message });
+            },
+          };
+
+          await hypergraphLogin(signer);
+          navigate({ to: '/' });
+        } catch (error) {
+          alert('Failed to login');
+          console.error(error);
+        }
+      })();
+    }
+  }, [hypergraphLoginStarted, walletsReady, wallets, signMessage, hypergraphLogin, navigate, privyAuthenticated]);
 
   return (
     <div className="flex flex-1 justify-center items-center flex-col gap-4">
-      {(!ready || !authenticated) && !graphAuthenticated ? (
+      <div>
+        <Button
+          disabled={!privyReady || hypergraphLoginStarted}
+          onClick={(event) => {
+            event.preventDefault();
+            privyLogin({});
+          }}
+        >
+          Log in {hypergraphLoginStarted && <Loader2 className="ml-2 w-4 h-4 animate-spin" />}
+        </Button>
+
         <div>
-          <Button disabled={disableLogin} onClick={login}>
-            Log in
+          <h1>Choose account</h1>
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              setIdentityAndSessionToken(availableAccounts[0]);
+              navigate({ to: '/' });
+            }}
+          >
+            {availableAccounts[0].accountId.substring(0, 6)}
+          </Button>
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              setIdentityAndSessionToken(availableAccounts[1]);
+              navigate({ to: '/' });
+            }}
+          >
+            {availableAccounts[1].accountId.substring(0, 6)}
+          </Button>
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              setIdentityAndSessionToken(availableAccounts[2]);
+              navigate({ to: '/' });
+            }}
+          >
+            {availableAccounts[2].accountId.substring(0, 6)}
           </Button>
-
-          <div>
-            <h1>Choose account</h1>
-            <Button
-              onClick={(event) => {
-                event.preventDefault();
-                setIdentityAndSessionToken(availableAccounts[0]);
-              }}
-            >
-              {availableAccounts[0].accountId.substring(0, 6)}
-            </Button>
-            <Button
-              onClick={(event) => {
-                event.preventDefault();
-                setIdentityAndSessionToken(availableAccounts[1]);
-              }}
-            >
-              {availableAccounts[1].accountId.substring(0, 6)}
-            </Button>
-            <Button
-              onClick={(event) => {
-                event.preventDefault();
-                setIdentityAndSessionToken(availableAccounts[2]);
-              }}
-            >
-              {availableAccounts[2].accountId.substring(0, 6)}
-            </Button>
-          </div>
         </div>
-      ) : (
-        <Link className="text-blue-500 hover:text-blue-600 underline" to="/">
-          Go to Home
-        </Link>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/packages/hypergraph/src/identity/graph-login.tsx b/packages/hypergraph/src/identity/graph-login.tsx
index f9664e08..387dcee5 100644
--- a/packages/hypergraph/src/identity/graph-login.tsx
+++ b/packages/hypergraph/src/identity/graph-login.tsx
@@ -34,7 +34,6 @@ import type { Identity, Keys, Signer, Storage } from './types.js';
 export type LoginProps = {
   children: React.ReactNode;
   storage: Storage;
-  signer: Signer | null;
   syncServer?: string;
   chainId?: number;
 };
@@ -51,7 +50,7 @@ const GraphLoginContext = createContext<{
   getAccountId: () => string | null;
   getIdentity: () => Identity | null;
   isAuthenticated: () => boolean;
-  login: () => void;
+  login: (signer: Signer) => Promise<void>;
   logout: () => void;
   authenticated: boolean;
   setIdentityAndSessionToken: (account: Identity & { sessionToken: string }) => void;
@@ -60,7 +59,7 @@ const GraphLoginContext = createContext<{
   getAccountId: () => null,
   getIdentity: () => null,
   isAuthenticated: () => false,
-  login: () => {},
+  login: () => Promise.resolve(),
   logout: () => {},
   authenticated: false,
   setIdentityAndSessionToken: () => {},
@@ -71,19 +70,14 @@ const GraphLoginContext = createContext<{
 // 2) a)Try to get identity from the sync server, or
 //    b) If identity is not found, create a new identity
 //      (and store it in the sync server)
-export function GraphLogin({
-  children,
-  storage,
-  signer,
-  syncServer = 'http://localhost:3030',
-  chainId = 80451,
-}: LoginProps) {
+export function GraphLogin({ children, storage, syncServer = 'http://localhost:3030', chainId = 80451 }: LoginProps) {
   const [state, setState] = useState<GraphLoginState>({
     authenticated: false,
     accountId: null,
     sessionToken: null,
     keys: null,
   });
+
   const getSessionToken = () => {
     return state.sessionToken;
   };
@@ -290,7 +284,7 @@ export function GraphLogin({
     }
   };
 
-  const login = async () => {
+  const login = async (signer: Signer) => {
     if (!signer) {
       return;
     }