fix(wallet): prevent login popup on load and emit ACCOUNTS_CHANGED on LOGGED_IN

- Add silent option to GetUserFunction to avoid popup when checking session on page load
- Add LOGGED_IN listener in ZkEvmProvider to emit ACCOUNTS_CHANGED after redirect login
- Fixes Issue 1: popup opening automatically on load
- Fixes Issue 2: UI not updating after login via redirect

Author: rodrigo-fournier-immutable

packages/passport/sdk/src/Passport.ts

@@ -257,9 +257,11 @@ export class Passport {
 
       // Use connectWallet to create the provider (it will create WalletConfiguration internally)
       const provider = await connectWallet({
-        getUser: (forceRefresh) => (forceRefresh
-          ? this.auth.forceUserRefresh()
-          : this.auth.getUserOrLogin()),
+        getUser: (forceRefresh, getUserOptions) => {
+          if (forceRefresh) return this.auth.forceUserRefresh();
+          if (getUserOptions?.silent) return this.auth.getUser();
+          return this.auth.getUserOrLogin();
+        },
         clientId: this.passportConfig.oidcConfiguration.clientId,
         chains: [chainConfig],
         crossSdkBridgeEnabled: this.passportConfig.crossSdkBridgeEnabled,

packages/wallet/src/connectWallet.test.ts

@@ -128,11 +128,11 @@ describe('connectWallet', () => {
         );
       });
 
-      it('uses getUserOrLogin from internal Auth', async () => {
+      it('uses getUser from internal Auth when silent (avoids popup on page load)', async () => {
         await connectWallet({ chains: [zkEvmChain] });
 
-        // Internal Auth's getUserOrLogin should be called during setup
-        expect(mockAuthInstance.getUserOrLogin).toHaveBeenCalled();
+        // Internal Auth's getUser should be called during setup (silent mode to avoid popup)
+        expect(mockAuthInstance.getUser).toHaveBeenCalled();
       });
 
       it('derives passportDomain from chain apiUrl', async () => {
@@ -491,7 +491,7 @@ describe('connectWallet', () => {
 
     describe('error handling', () => {
       it('handles auth failure gracefully', async () => {
-        mockAuthInstance.getUserOrLogin.mockRejectedValueOnce(new Error('Auth failed'));
+        mockAuthInstance.getUser.mockRejectedValueOnce(new Error('Auth failed'));
 
         const provider = await connectWallet({ chains: [zkEvmChain] });
 

packages/wallet/src/connectWallet.ts

@@ -148,9 +148,13 @@ function createDefaultGetUser(initialChain: ChainConfig, options: ConnectWalletO
     });
   }
 
-  // Return getUser function that wraps Auth.getUserOrLogin
+  // Return getUser function that wraps Auth.getUserOrLogin/getUser based on options
   return {
-    getUser: async () => auth.getUserOrLogin(),
+    getUser: async (forceRefresh?: boolean, getUserOptions?: { silent?: boolean }) => {
+      if (forceRefresh) return auth.forceUserRefresh();
+      if (getUserOptions?.silent) return auth.getUser();
+      return auth.getUserOrLogin();
+    },
     clientId,
   };
 }
@@ -222,8 +226,9 @@ export async function connectWallet(
     clientId = defaultAuth.clientId;
   }
 
-  // 4. Get current user (may be null if not logged in)
-  const user = await getUser().catch(() => null);
+  // 4. Get current user (may be null if not logged in).
+  // Use silent: true to avoid triggering login popup on page load.
+  const user = await getUser(undefined, { silent: true }).catch(() => null);
 
   // 5. Create wallet configuration with concrete URLs
   const passportDomain = initialChain.passportDomain || initialChain.apiUrl.replace('api.', 'passport.');

packages/wallet/src/types.ts

@@ -23,6 +23,7 @@ export type { RollupType } from '@imtbl/auth';
 // Wallet events
 export enum WalletEvents {
   ACCOUNTS_REQUESTED = 'accountsRequested',
+  LOGGED_IN = 'loggedIn',
   LOGGED_OUT = 'loggedOut',
 }
 
@@ -35,8 +36,10 @@ export type AccountsRequestedEvent = {
 };
 
 // WalletEventMap for internal wallet events
+// LOGGED_IN uses same event name as AuthEvents.LOGGED_IN (auth.eventEmitter is shared)
 export interface WalletEventMap extends Record<string, any> {
   [WalletEvents.ACCOUNTS_REQUESTED]: [AccountsRequestedEvent];
+  [WalletEvents.LOGGED_IN]: [User];
   [WalletEvents.LOGGED_OUT]: [];
 }
 
@@ -214,6 +217,17 @@ export interface PopupOverlayOptions {
   disableBlockedPopupOverlay?: boolean;
 }
 
+/**
+ * Options for GetUserFunction calls.
+ */
+export interface GetUserOptions {
+  /**
+   * When true, do not trigger login (e.g. open popup) if user is not authenticated.
+   * Returns null instead. Use during page load to avoid unwanted popups.
+   */
+  silent?: boolean;
+}
+
 /**
  * Function type for getting the current user.
  * Used as an alternative to passing an Auth instance.
@@ -222,8 +236,13 @@ export interface PopupOverlayOptions {
  * @param forceRefresh - When true, the auth layer should trigger a server-side
  *   token refresh to get updated claims (e.g., after zkEVM registration).
  *   This ensures the returned user has the latest data from the identity provider.
+ * @param options - Optional. When options.silent is true, return null if not
+ *   authenticated instead of triggering login (avoids popup on page load).
  */
-export type GetUserFunction = (forceRefresh?: boolean) => Promise<User | null>;
+export type GetUserFunction = (
+  forceRefresh?: boolean,
+  options?: GetUserOptions,
+) => Promise<User | null>;
 
 /**
  * Options for connecting a wallet via connectWallet()

packages/wallet/src/zkEvm/zkEvmProvider.ts

@@ -121,8 +121,9 @@ export class ZkEvmProvider implements Provider {
       this.#callSessionActivity(user.zkEvm.ethAddress);
     }
 
-    // Listen for logout events
+    // Listen for auth events
     walletEventEmitter.on(WalletEvents.LOGGED_OUT, this.#handleLogout);
+    walletEventEmitter.on(WalletEvents.LOGGED_IN, this.#handleLoggedIn);
     walletEventEmitter.on(
       WalletEvents.ACCOUNTS_REQUESTED,
       trackSessionActivity,
@@ -133,11 +134,25 @@ export class ZkEvmProvider implements Provider {
     this.#providerEventEmitter.emit(ProviderEvent.ACCOUNTS_CHANGED, []);
   };
 
+  #handleLoggedIn = (user: User) => {
+    if (user && isZkEvmUser(user)) {
+      this.#providerEventEmitter.emit(ProviderEvent.ACCOUNTS_CHANGED, [
+        user.zkEvm.ethAddress,
+      ]);
+      this.#callSessionActivity(user.zkEvm.ethAddress);
+    }
+    // If user doesn't have zkEvm yet, app must call eth_requestAccounts to register
+  };
+
   /**
    * Get the current user using getUser function.
+   * @param silent - When true, use getUser(undefined, { silent: true }) to avoid
+   *   triggering login popup on read-only checks (e.g. eth_accounts).
    */
-  async #getCurrentUser(): Promise<User | null> {
-    return this.#getUser();
+  async #getCurrentUser(silent = false): Promise<User | null> {
+    return silent
+      ? this.#getUser(undefined, { silent: true })
+      : this.#getUser();
   }
 
   async #callSessionActivity(zkEvmAddress: string) {
@@ -174,7 +189,7 @@ export class ZkEvmProvider implements Provider {
   // Used to get the registered zkEvm address from the User session
   async #getZkEvmAddress() {
     try {
-      const user = await this.#getCurrentUser();
+      const user = await this.#getCurrentUser(true); // silent: avoid popup on read-only checks
       if (user && isZkEvmUser(user)) {
         return user.zkEvm.ethAddress;
       }