when you want interaction between client side and server side you should use ajax .

i think this [Link][1] will be very helpful to you :)
Put this in your javascript

    var data = {
        action: 'is_user_logged_in'
    };
    jquery.('.x-btn-widgetbar').click(function(){
       jQuery.post(ajaxurl, data, function(response) {
          if(response == 'yes') {
               // user is logged in, do your stuff here
           } else {
               // user is not logged in, show login form here
                   window.location = <login url here >;

           }
       });
   })


put this in your functions.php

    function ajax_check_user_logged_in() {
        echo is_user_logged_in()?'yes':'no';
        die();
    }
    add_action('wp_ajax_is_user_logged_in', 'ajax_check_user_logged_in');
    add_action('wp_ajax_nopriv_is_user_logged_in', 'ajax_check_user_logged_in');

  [1]: https://wordpress.stackexchange.com/questions/69814/check-if-user-is-logged-in-using-jquery