Determine if the user is logged in on the client side

matteocontrini

Hi,
how can the client app know if the current user is logged in or a guest?

This must be easy to do but I can't find how to do it right now. I've looked a bit into the "app" global variable but I can't find what I'm looking for.

Thanks!

Xelson

if(app.session.user) // client is logged in

matteocontrini

Xelson exactly, thanks. Do you know when this property can be assumed to be populated? It seems that app.session is null when the extension is being initialized. What "event" should an extension listen to know if the current user is logged in or not?

Xelson

matteocontrini maybe after the DOM tree is initialized? I have no problem using this property in any component initialization init()

clarkwinkelmann

matteocontrini you should check that inside your extend calls or inside your components methods. For example if you want to add a link only for logged in user, check if the user is connected inside the function just before adding the link to the ItemList.

What do you do based on the login status ? We can point you to an example if we know where you need it.

datitisev

matteocontrini It seems that app.session is null when the extension is being initialized.

This property is added to the app object when Flarum itself initializes - to be able to use it, you have to add your extension initializer to app.initializers, as that makes sure the data has been populated.

matteocontrini

clarkwinkelmann What do you do based on the login status ? We can point you to an example if we know where you need it.

I'm testing out Google Analytics dimensions and I'd like to set a flag that tells whethet the current user is logged in.

To do so, I need to run the "gtag" function from Google Analaytics, only once when the page loads and after the app.session is populated. Do I need to insert a component somewhere to do this? What would you recommend?

Thanks!

tankerkiller125

matteocontrini The Analytics extension already does this I believe, I know for certain that it does this for Matmo (Piwik).

clarkwinkelmann

matteocontrini tankerkiller125 indeed, we implemented something similar for the Flagrow Analytics extension.

But actually, we do it "server side". We use a listener to inject additional JS in the page to initiate the tracker, just like you would do by pasting the code at the bottom of your HTML: https://github.com/FriendsOfFlarum/analytics/blob/master/src/Listeners/AddTrackingJs.php That's where we check if the current user is logged in and whether we need to add their identifier to the payload.

In order to track subsequent page loads, we use the init method of the page component https://github.com/FriendsOfFlarum/analytics/blob/master/js/src/forum/index.js You could also use this method for all tracking including first page loaded if you don't want to inject javascript into the HTML. You could check if the user is logged in inside that init extend.

matteocontrini

clarkwinkelmann thanks, I was just looking at that code now!

Since I'm already using the Analytics extension, and assuming that gtag allows to set the config multiple times, I guess I could do something like this (in another extension):

extend(Page.prototype, 'init', function (vdom) {    
    gtag('config', app.data.googleTrackingCode, {
        'custom_map': {'dimension1': 'isLoggedIn'}
    });

    gtag('event', 'isLoggedInEvent', {'isLoggedIn': !!app.session.user });
});

(https://developers.google.com/analytics/devguides/collection/gtagjs/custom-dims-mets)

Actually, I'm going to test it now... 🙂

matteocontrini

datitisev yeah right, I was running the code directly inside the initializer function, but that's too early.

I think I'm settling with this now:

extend(app, 'mount', function () {
  //
});

Is this a good way to run some code as soon as the app is ready?

datitisev

matteocontrini Ah yes, I see now that the session is added after the initializers run. You'll want to check for the session whenever you are adding your things - e.g. Page.prototype.init as you do above, etc... and not check at the beginning. However, if there's no other place to do that, the app mount should work yeah.

matteocontrini

datitisev the problem is that the Page.prototype.init function is called every time the page changes, while I was looking for a way to run something just once when the page loads (and the app is booted).

It seems to work with the app mount.

Thank you very much everyone! 😃