Meteor application – User connexion

Posted by on Août 22, 2013 in Javascript, Meteor | 7 Comments

Last week I have read a very interesting blog post on smashing magazine about a tool to make quick web application : Meteor. So I have decided to give it a try and make my first Meteor application, a Reading list manager for actual books (you know, the one with the paper pages). My application is not ready yet but I wanted to share with you  what I have learn in a series of blog post.

Installation & configuration

The instalation is prety quick, and that’s the all point. Just type the following line in your terminal (if you are on windows, I’m so sorry for you… :p).

Installation :

Create  the app :

Browse in your application’s folder and launch the app :

Add package :

Here are the packages I use for my app :

Accounts packages are used to manage users accounts (obviously…). I use them to allow my user to connect using custom passwords, twitter accounts or facebook accounts. The Bootstrap package simply add the Twitter bootstrap css framwork to your project.

Organise your files :

I advise you to create 2 folders, one client and one server to differentiate the javascript executed on the client and server side (Meteor automaticaly use them). If you don’t do that, you have to use the methods Meteor.isServer and Meteor.isClient (you can see them in the pregenerated files when you create a new app).

Let’s go coding !

First of all, the html.

Meteor use a very simple template system has you can see in my code :

In this snippet, I begin by defining the good old head and body elements, but insted of directly adding my code inside, I ask them to display a template with the syntax {{> my_template}}. This allows you to make very simple conditional display has you can see in my body template witch test if the user is connected before displaying the  reading_list_add and reading_list template.

User connection with custom password

If we look in my user_info template, here is what we found :

The if condition allows you to display a different template if the user is connected or not.

In the case the user is not conneted, we simply display a loggin link with {{loginButtons}}. This handy keyword allows you to automaticaly display a loggin/subscribe form if you have installed the right packages (see above). You can also configure the loggin form. In my case I have add this line of code in my js client file  to allows user to connect with username OR email :

When you have done this, here is what you’ve got :

Formulaire connexion meteor

It’s magical !

You can also use Twitter or Facebook accouts for connection, but I will discuss that in another post.

If the user is connected, we display the user_loggedin template. This template display the text  « Logging in… » if the user is… logging in (crazy !) and if he is connected, it display the user variable and the loggout link.

First of all we have to define our user variable in the client side js :

This snippet just says that in the  user_loggedin template, the user variable is the username of the current connected user.

And finaly, we have to code the logout event like this :

When the user click on the loggout link, we just call Meteor.logout and that’s it !

We are done for today,  I hope this is pretty clear for you.

Stay tuned for the next tutorial 🙂