API Connect

API Connect

Join this online group to communicate across IBM product users and experts by sharing advice and best practices with peers and staying up to date regarding product enhancements.

 View Only

Keeping browser tabs in sync in v10.0.10: Handling inactive sessions across tabs

By Harjappan Singh Maan posted 8 hours ago

  

In API Connect, a subtle but important challenge is managing user sessions across multiple browser tabs in the developer portal. Users often have several tabs open simultaneously — whether it's comparing products, filling out forms, or jumping between different parts of the portal.

But what happens when a user is logged out in one tab due to inactivity, or they manually log out in one window? Ideally, all other tabs should reflect this state immediately or shortly after. Otherwise, you risk confusing users or — worse — allowing unauthorized actions in a still-active tab.

In this post, we’ll walk through how to detect and respond to session logout events across tabs, with a check every 20 seconds to ensure all tabs are kept in sync.

The problem: Tabs out of sync

Imagine this scenario:

  1. A user logs into your developer portal.

  2. They open three tabs to multitask.

  3. In one tab, they are automatically logged out due to inactivity — or they click "Log out".

  4. In the other two tabs, the session still appears to be active. They can interact with the UI as if they're logged in.

This is not only confusing, but also potentially dangerous from a security perspective — particularly in sensitive applications (finance, healthcare, etc.).

To prevent this, we need a way to detect session changes across tabs and log out the user automatically when needed.

The solution: Shared session state + periodic checking in v10.0.10

We use a combination of browser storage and polling to handle this cleanly. This is achieved using the Session check module which is available to install in the list of modules on the admin Extend page.

Key ingredients:

  • localStorage or sessionStorage for tab-to-tab communication

  • Polling every 20 seconds to check session status with the server

Conclusion

Handling inactive sessions across browser tabs isn't just a matter of convenience — it's a fundamental part of building secure and intuitive web applications. By implementing a 20-second interval check, leveraging localStorage for tab communication, and ensuring that all tabs reflect session status changes, you can significantly enhance the reliability and safety of your portal.

This solution works well across all modern browsers and requires no external dependencies — just a bit of thoughtful coordination between your front-end and back-end code.

0 comments
1 view

Permalink