Accounts packages

Removing insecure

If you look in your apps directory you will see a hidden folder called .meteor. Inside this folder is where your built application resides, along with a bunch of settings and version files.

If you open .meteor/packages you can see the packages you have added. It should look like this:

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-platform
msavin:mongol
insecure

meteor-platform is as it sounds: the actual Meteor platform, which basically is a collection of packages. So think of it more as a container. To see every single package being used in your app, you can open the .meteor/versions file. Here you can see some of the star players like minimongo, spacebars and ddp.

As I mentioned earlier insecure is another one of those 'training wheels' packages like the already removed autopublish. Basically Meteor expects you to have user accounts, and until you define permissions for what users can or can't do, the functions like update(), or create() on your collections simply won't work.

The Meteor team probably realised this could be a hindrance when you want to just get up and running or demoing the speed of Meteor, so they added the insecure package to stop people from having to worry about permissions straight off the bat. This means when you create a new app you can just do whatever you want on the client - anyone can open the console and remove every bit of data in the database if they wanted. The app is, in essence, insecure.

But now it's time for us to take off our final training wheels and start adding user permissions.

meteor remove insecure

And with that command our app has greatly tightened it's security - you will now find that if you try and create or edit anything it won't work.

Signing in

Firstly lets allow people to sign in. Looking at our trusty Meteor docs we can see that there are a number of accounts related packages. Firstly, there is the essential accounts-base package. This will give us stuff like:

Meteor.user
Meteor.userId
Meteor.users # this is our users collection
{{currentUser}} # this is a spacebars helper
{{loggingIn}} # so is this...

However this alone is not enough. We need to decide on a login provider - how we want our users to sign up and sign in. For example, if we want to just allow them to sign up through our website we can add the accounts-password package. If we want them to be able to sign in via Facebook we can add the accounts-facebook package. Meteor have provided several mainstream sign in options:

• accounts-password
• accounts-facebook
• accounts-github
• accounts-google
• accounts-meetup
• accounts-twitter
• accounts-weibo

Now normally we'd have to code a sign up and sign in page. However, Meteor, maintaining it's speedy image, has a package that provides us with a simple dropdown form that handles everything for us. Other people have taken this a step further and styled the dropdown to work in mainstream CSS frameworks like Bootstrap or Foundation.

In terms of data, this is what a user will look like in the database:

A user's data structure in Mongo

{
  _id: "bbca5d6a-2156-41c4-89da-0329e8c99a4f",  // Meteor.userId()
  username: "cool_kid_13", // unique name
  emails: [
    // each email address can only belong to one user.
    { address: "[email protected]", verified: true },
    { address: "[email protected]", verified: false }
  ],
  createdAt: Wed Aug 21 2013 15:16:52 GMT-0700 (PDT),
  profile: {
    // The profile is writable by the user by default.
    name: "Joe Schmoe"
  },
  services: {
    facebook: {
      id: "709050", // facebook id
      accessToken: "AAACCgdX7G2...AbV9AZDZD"
    },
    resume: {
      loginTokens: [
        { token: "97e8c205-c7e4-47c9-9bea-8e2ccc0694cd",
          when: 1349761684048 }
      ]
    }
  }
}

Back to our project

For now we're going to keep it simple and go with just a password. Type this into your terminal:

meteor add accounts-password

This will add accounts-base automatically, as it's a dependency of accounts-password.

We'll stick with the default styled UI:

meteor add accounts-ui

The accounts-ui package simply gives us a new template called loginButtons that we can include somewhere. Lets include it in our main.html file:

client/main.html

<head>
  <title>Foosboom</title>
</head>

<body>
  <h1>Foosboom</h1>

  {{> loginButtons}}  
  {{> teams}}
  {{> games}}
</body>

Admittedly, it's quite ugly. But CSS is cumbersome so we'll leave it be.

Meteor.user(), Meteor.userId() and more

Now that we have our accounts packages installed we have access to a couple of new helpful functions such as Meteor.user() and Meteor.userId(). Try registering a user and running these commands in the browser terminal.

We also now have a third collection with our users collection. It can be found at Meteor.users. So we can do things like Meteor.users.find({email: "[email protected]"}).

Finally our templates have been upgraded too. We now can use {{currentUser}}, which simply returns true if there is a user logged in. And also {{loggingIn}}, which also returns a Boolean - true if a user is currently logging in (good for showing spinners).

While we won't do anything with this new functionality just yet I'll be using them here and there in the future - so just thought I'd let you know what they do now.