By default, if we were to put your metor app into use, there are some security issues inside the app itself that we’d have to deal with first.
First and foremost, what’s to stop someone from accessing our app and erasing their name from an item they borrowed? That scumbag STEVE might just keep our linear compression wrench forever if he were so inclined, and we’d have no way of proving whether or not he still had it.
Removing Insecure
The first step in accomplishing these two goals is to remove the insecure library from Meteor. By default, the insecure library is included so that we can go about building our application without having to worry about security until we’ve got our security strategy in place and written most of our code.
The time has come. We know what we want security-wise, so let’s go ahead and get rid of that library. Stop the Meteor application (press Ctrl+ C in the terminal window) and enter the following command (you need to be in your app directory):
meteor remove insecure
Our application is now secure. In fact, it’s actually too secure. Start Meteor again (type meteor in the terminal and press Enter) and navigate to our app in a browser window using http://localhost:3000. Once there, try to add a new item, or even delete an item. But nothing will happen—no deletions, no additions, and no changes. Nothing will work!
If you open the browser console, you’ll see that every attempt to update the database will be met with the update failed: Access denied message:
These messages are displayed because we removed the insecure package. Put another way, no client-initiated changes are allowed anymore. When the change request goes from the client to the server, there are no allow conditions; therefore, the request will be denied.
Adding an admin account
To re-enable the update functionality, we need to be able to create an admin account, give the admin account permissions to make changes, and provide the user with a way to recover a lost password.
We’ll first need to add three built-in Meteor packages. Stop the Meteor application, and in the terminal window, enter the following command:
meteor add accounts-password
This commands will add the necessary package (and dependency packages) to our Meteor application, enabling us to administer accounts.
Meteor also has a UI package that will create the login logic for us automatically so that we don’t have to write any custom accounts’ UI code. Let’s add this package while we’re at it:
meteor add accounts-ui
Now that we’ve added the accounts-uipackage, we just need to quickly configure the fields to be displayed and update our HTML template. To do so, perform the following steps:
1. Open ClientScript.js and append the following code to the very bottom of the file:
Accounts.ui.config({ passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL' });
This tells the accounts-ui package that we want to display the username and email fields in the sign-up form, with the email field being optional (as we would only need it to recover a lost password).
2. Now, open YourFile.html and enter the following code directly below the
<body>tag: <body> <div class="container"> {{> loginButtons}} </div>
This HTML code will add a login link and context menu box to the top left of our screen. Let’s see this in action. Save all your changes, start your Meteor app, and navigate to http://localhost:3000 in a browser. Notice the top
left of the following screenshot:
Click on Sign in and then click on Create account in the bottom right of the pop up window. Fill in the form, making sure to a username of admin and a valid email address so that you can recover your password, if needed. Enter and confirm your new password and then click on Create account:
You will now be logged in as admin, as shown in the following screenshot, and we can proceed with configuring permissions.
Good luck!. Then go to Part 2