Only allow signed-in users to chat? Meteor chat app

Question

I'm working on a chat app using meteor with this tutorial and I want it to be so you have to sign in before you can add comments. The reason why I'm doing this is because I want everyone on my site to have a nickname instead of a name like anonymous385hg83f or something. The tutorial uses accounts-ui and here is the code for the chat app:

javascript:

// get the value for handlerbar helper user
Template.chatMessage.helpers({
  "user": function() {
    if(this.userId == 'me') {
      return this.userId;
    } else if(this.userId) {
      getUsername(this.userId);
      return Session.get('user-' + this.userId);
    } else {
      return 'anonymous-' + this.subscriptionId;
    }
  }
});

// when Send Chat clicked at the message to the collection
Template.chatBox.events({
 "click #send": function() {
  $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
    var message = $('#chat-message').val();
    chatCollection.insert({
      userId: 'me',
      message: message
    });
    $('#chat-message').val('');

    //add the message to the stream
    chatStream.emit('chat', message);
  },

  "keypress #chat-message": function(e) { 
    if (e.which == 13) {
      $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
      console.log("you pressed enter");
      e.preventDefault();
      //repeat function from #send click event here
      var message = $('#chat-message').val();
    chatCollection.insert({
      userId: 'me',
      message: message
    });
    $('#chat-message').val('');

    //add the message to the stream
    chatStream.emit('chat', message);
    }
  }
});

chatStream.on('chat', function(message) {
  chatCollection.insert({
    userId: this.userId,
    subscriptionId: this.subscriptionId,
    message: message
  });
});

I have no idea how to go about doing this. Does anyone know how to make it so a user has to sign up/sign in BEFORE they are able to chat?

Answer 1

I can think in two ways to do this. The first one is not display the chat to guests.

In your HTML file you can use:

{{#if currentUser}}
<!-- The code to show the chat -->
{{else}}
<!-- The code if is not logged in -->
You must login to use the chat
{{/if}}

Refered Docs from here

But you may let the guest try to enter a comment, to block him you can do this:

// when Send Chat clicked at the message to the collection
Template.chatBox.events({
    "click #send": function() {
        if (Meteor.user() == null) {
            alert("You must login to post");
            return;
        }
        $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
        var message = $('#chat-message').val();
        chatCollection.insert({
            userId: 'me',
            message: message
        });
        $('#chat-message').val('');

        //add the message to the stream
        chatStream.emit('chat', message);
    },

    "keypress #chat-message": function(e) {
        if (Meteor.user() == null) {
            alert("You must login to post");
            return;
        }
        if (e.which == 13) {
            $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
            console.log("you pressed enter");
            e.preventDefault();
            //repeat function from #send click event here
            var message = $('#chat-message').val();
            chatCollection.insert({
                userId: 'me',
                message: message
            });
            $('#chat-message').val('');

            //add the message to the stream
            chatStream.emit('chat', message);
        }
    }
});

Both are probably not the more user friendly way to do this, but they show how you can handle if the user is logged or not.

A good tutorial that will show you step by step how to do a chat is this