magento2 check if customer is logged in or not in knockout template

Question

How do I check if customer is logged in or not in knockout template?

my template

<!-- ko if: customer().firstname -->

<!-- /ko -->

my js

 define(
    [
        'ko',
        'jquery',
        'Magento_Ui/js/form/element/abstract',
        'mage/url',
        'Magento_Customer/js/customer-data',
        'mage/translate'
    ],
    function (Component,storage,ko,jquery,Abstract, url, customerData, $t) {
        'use strict';

        return Component.extend({
            message: function() {
            loggedMessage : $t('Welcome, %1!')
            },
            htmlLoggedMessage: ko.observable(),
            isLoggedIn: ko.observable(),
            customer: ko.observable({}),
            initialize: function() {
                this._super();
                if(this.isCustomerLogged != 0) {
                    this.isLoggedIn(true);
                }
                this.checkCustomerLocalStorage();
            },
            /**
             * Check customer localstorage
             */
            checkCustomerLocalStorage: function () {
                var self = this;
                var time = setInterval(function () {
                    self.customer = customerData.get('customer');
                    if (localStorage["mage-cache-storage"] != '{}') {
                        clearInterval(time);
                    }
                    if (self.customer().fullname) {
                        var name = self.customer().fullname;
                        var message = self.message.loggedMessage.replace('%1', name);
                        self.htmlLoggedMessage(message);
                    }
                }, 1000);
            }
        });
    }
);

I followed this link but its still entering in to if condition:

How to check if customer is logged in or not in magento 2?

Answer 1

You need to pass dependency of customer object, 'Magento_Customer/js/model/customer',

define(
[
    'ko',
    'jquery',   
    'Magento_Customer/js/model/customer',
    'mage/translate'
],
function (ko,jquery, customer,$t) {
    'use strict';
    return Component.extend({        
        isCustomerLoggedIn: customer.isLoggedIn, /*return  boolean true/false */
        initialize: function() {
            this._super();
            /* check using below method */
            var isLoggedIn = this.isCustomerLoggedIn();
        }
    });
}

Now you can check it using customer.isLoggedIn() returns boolean value.

define(
[
    'ko',
    'jquery',
    'Magento_Ui/js/form/element/abstract',
    'mage/url',
    'Magento_Customer/js/customer-data',    
    'Magento_Customer/js/model/customer',
    'mage/translate'
],
function (Component,storage,ko,jquery,Abstract, url, customerData, customer,$t) {
    'use strict';

    return Component.extend({
        message: function() {
        loggedMessage : $t('Welcome, %1!')
        },
        htmlLoggedMessage: ko.observable(),
        isLoggedIn: ko.observable(),
        isCustomerLoggedIn: customer.isLoggedIn,
        customer: ko.observable({}),
        initialize: function() {
            this._super();
            if(this.isCustomerLoggedIn()) {
                this.isLoggedIn(true);
            }
            this.checkCustomerLocalStorage();
        },
        /**
         * Check customer localstorage
         */
        checkCustomerLocalStorage: function () {
            var self = this;
            var time = setInterval(function () {
                self.customer = customerData.get('customer');
                if (localStorage["mage-cache-storage"] != '{}') {
                    clearInterval(time);
                }
                if (self.customer().fullname) {
                    var name = self.customer().fullname;
                    var message = self.message.loggedMessage.replace('%1', name);
                    self.htmlLoggedMessage(message);
                }
            }, 1000);
        }
    });
}

Answer 2

It is quite simple, inside Magento_Customer/js/view/customer class there is a method firstname and we can use it to check if a customer is logged in or not.

<!-- ko if: customer().firstname  -->
    <?= __('Out') ?>
<!-- /ko -->
<!-- ko ifnot: customer().firstname  -->
    <?= __('In') ?>
<!-- /ko -->
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "customer": {
                        "component": "Magento_Customer/js/view/customer"
                    }
                }
            }
        }
    }
</script>

Answer 3

Here is another example(customer.isLoggedIn with ko.observable()):-

define([
    'ko',
    'jquery',
    'uiComponent',
    'Magento_Customer/js/model/customer',
], function (ko, $, Component, customer) {
    'use strict';

    var checkoutConfig = window.checkoutConfig,
        ConfigIsEnabled = checkoutConfig ? checkoutConfig.AppIsEnabled : {};

    return Component.extend({
        defaults: {
            template: 'Magento_CustomModule/checkout/app-agreements'
        },
        isVisible: ko.observable(),
        isCustomerLoggedIn: customer.isLoggedIn,

        initialize: function () {
            this._super();

            if (!this.isCustomerLoggedIn()) {
                this.isVisible(false);
            } else {
                this.isVisible(ConfigIsEnabled);
            }
        }
    });
});