I’m working on a React project where I need to manage user sessions using JWT tokens, specifically handling the session based on the number of browser tabs open with my application. Here’s the scenario:

User opens three tabs: One tab with a website not related to my application (e.g., google.com) and two tabs with my React application.
Session management requirement: If the user closes both tabs of my React application (while the unrelated website tab is still open), the user should be logged out and required to log in again when they open a new tab with my application.
In essence, as long as there is at least one tab open with my application, the user remains logged in. However, if all tabs with my application are closed, the session should be invalidated.

I would like to know the best way to handle this scenario. What is the recommended approach to achieve this behavior in a React application? Are there any best practices or libraries that can help with this?

Some points I am particularly interested in:

-How to track the number of open tabs with the application.
-Suggestions for managing the JWT token securely.
-Recommendations for state management to handle authentication state across multiple tabs.

Any guidance, code snippets, or examples would be greatly appreciated. Thank you!