How To: Create a User Authentication System for Your Meteor Application

Our “How To” articles are intended to help entrepreneurs and developers increase their knowledge of the Meteor Platform, a tool that accelerates early product development, by walking through small exercises, or katas.  This article is re-purposed from an exercise we used with the Apprentices in the Summer Cohort 2015, to give you a taste of what it’s like to learn in our Apprentice100 program.

How do you ensure that only the user who should have access to sensitive parts of your application does have access? With Meteor, it’s simple to create a user authentication system and apply it to your application to control user access to pages, modules, and even information on a page. In this kata, you are expected to add a basic user authentication system to an initial “routerExample” application on localhost. After completing this exercise, you should be able to implement, utilize, or debug an authentication system for their Meteor project. You should also be able to create simple, Bootstrap-styled forms.

Pre-Requisites:

  • Knowledge of command line and access to the tool on your machine
  • An internet connection
  • Access to Meteor.com documentation
  • You must also set up your own local Dev environment including:
    • Sublime Text (or other text editor/IDE)
    • Meteor and related packages
    • Chrome (for Chrome developer tools)

Step Zero: Set up the pages you want to protect

First, we need some pages you might want to control access to. We’re going to add three new routes to routes.js and to nav.html as well, then create three new template folders and templates:

  • User Private Data page
  • Personal Profile form
  • Company Profile form

First, add the routes and navigation elements. Referring back to the prior exercise may be helpful.

Next, add three new template folders (using mkdir) and a new HTML template in each directory (using touch):

   mkdir privateData
   touch privateData/private.html
   mkdir personal
   touch personal/personal.html
   mkdir company
   touch company/company.html

Add your HTML template to each. For your private data page, setup a page similar to your existing templates. On the form pages, leverage Bootstrap to speed up the process of getting a great looking form. First, install the Bootstrap package via the command line:

   meteor add twbs:bootstrap

Next, create an attractive form:

   <template name='personal'>
      <h1>Personal Profile</h1>
      <form class="well" role="form">
         <div class="form-group"> 
         <label for="userName">User Name:</label>
         <input class="form-control" type="text" name="userName">
         <label for="firstName">First Name:</label>
         <input class="form-control" type="text" name="firstName">
         <label for="lastName">Last Name:</label>
         <input class="form-control" type="text" name="lastName">
         <label for="email">Email:</label>
         <input class="form-control" type="email" name="email">
         <button class="form-control btn btn-default">Save</button>
         </div>
      </form>  
   </template>
draft html template

Now you have several form fields.

 

Step One: Implementing user authentication

Now you have something to protect! Load the back-end (accounts-password) and front-end (accounts-ui) packages for login. Note: As you can see here, you can add multiple packages in one statement!

   meteor add accounts-password accounts-ui

Now that you have your required packages available, add the inclusion {{>loginButtons}} to your navigation bar:

   <template name='nav'>
      <nav class="navbar navbar-default">
         <div class="container-fluid">
            <div>
               <ul class="nav navbar-nav">
                  <li class="active"><a href="{{ pathFor 'home'}}">Home</a></li>
                  <li><a href="{{ pathFor 'destination'}}">Destination</a></li>
                  <li><a href="{{ pathFor 'personal'}}">Personal Profile</a></li>
                  <li><a href="{{ pathFor 'company'}}">Company Profile</a></li>
               </ul>

               <div class="nav nav-bar">
                  <p class="navbar-text navbar-right">{{>loginButtons}}</p>
                  <!-- This inclusion activates registration and login. -->
               </div>
            </div>
         </div>
      </nav>
   </template>

Now, you’ve got a navigation bar at the top of the screen. Here’s what it should look like, with user account login added:

menu bar

Now, control page access by inserting the block helper #if – {{#if currentUser}} into your templates. Add {{else}} to display a warning or alternate content.

   <template name='personal'>
      {{#if currentUser}}
         <br>
         <h1>Personal Profile</h1>
         .. page content..
         </form>
      {{else}}
         <p>Access denied.</p>
      {{/if}}
   </template>

 

Step Two: Use username, instead of email, for login.

Finally, let’s configure your accounts-ui package to use username instead of password for login. First, create a new JavaScript file in your client folder to store these configurations.

cd workspace/routerExample
touch client/routerExample.js

In this file, configure your password signup fields to use USERNAME_ONLY.

Accounts.ui.config({
   passwordSignupFields: "USERNAME_ONLY"
});

Your “create account” feature in your login panel will now ask for username instead of the default, email.

To display username in your UI, use the inclusion {{currentUser.username}} in your HTML.

 

Step Success: Try it out!

Illustration of a user authentication system and some basic  front-end forms.

You’ve successfully built a working user authentication system and some basic front-end forms.

About derekkoch

derekkoch
Derek is CEO and Founder of Independent Software. Independent Software’s mission is to “help entrepreneurs win”; the company works with early-stage ventures to build new web and mobile software products, place talent through the A100 software apprenticeship program, and access the statewide startup community through the company's online magazine, The Whiteboard. Derek and the company also partner with such organizations as UP Global, Startup America, CTNext, the Grid, and the Connecticut Technology Council, Derek works to create and advance initiatives that help entrepreneurs manage and lead successful startup ventures rooted in Connecticut. Derek holds a master's degree in Management from Northwestern University's Kellogg School. He lives in Connecticut with his wife and their two sons.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>