I need to implement a functionality in Next.js (Pages Router).
Requirements :
I need to manage only 1 session at a time. If someone logs from another browser/another device user will get a toast message that this session is already active.
My Approach :
1. During login, check from User's Collection (MongoDB) if the specific user has an active session or not. (isActive : true/false)
2. If not, create an id and store in session storage along with firing an POST API to modify is User's Collection (isActive : true) and then to navigate to dashboard.
3. When closing browser directly/closing the tabs/signout it will clear out SessionStorage along with firing an API to modify User's collection isActive : false.
4. In case of direct closure (closing browser/tabs directly--x btn) I thought of using useEffect in _app.js file and follow the above process and put the logic in useEffect's return when the component is unmounted.
5. The problem is there can be multiple tabs opened in the same browser.
6. Is my approach is completely wrong. Or am I missing something here. What should be the ideal approach?
7. If I am lacking fundamentals please do point out. I'm a beginner and really need help on this
Thanks.