Meteor Log Out Do Not Sync Between Tabs

I am using Meteor with React and is facing a problem on log out function. When I open more than 2 tabs on the same browser, If I logged out from one tab then the other opening tabs

Solution 1:

I found the cause. It was because I try to avoid sending data on Meteor.publish() if users is not logged in. The problem is I do not return anything on that case. My solution is return this.ready() when the user is not logged in like this:

Meteor.publish("myCollections", function (){
    if (!this.userId) returnthis.ready();

    return MyCollections.find({owner: this.userId});
});

Solution 2:

From the meteor documentation, you can use Meteor.logoutOtherClients() before calling Meteor.logout().

Solution 3:

Normal (as in non-incognito) browser tabs share the same session resume token. The Meteor server will update them all when the user status changes for the associated session.

It is possible to reactively track the login status using 2 reactive calls:

• Meteor.userId() - return the user's id or null if no user is logged in.
• Meteor.loggingIn() - returns true if the user is currently in the transient state of logging in and false otherwise.

The status may take a few seconds to update across tabs, but it will happen eventually. It is up to you to detect those changes and act upon them.

You can easily test this by running the following reactive code in the consoles of 2 open tabs connected to the same Meteor server:

Tracker.autorun(function() {
  if (Meteor.loggingIn()) {
    console.info('logging in');
  } elseif (Meteor.userId()) {
    console.info('logged in');
  } else {
    console.info('logged out');
  }
});

Try to log in and log out from one of the tab and watch the other follow along.

Using this technique, you could track the login state and change your application state and do something accordingly (e.g, redirect/render a different view or layout) when the login state changes.