Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.8 Setting Up User Accounts

Meteor makes it very easy to set up user authentication for your website. In this lesson, you will learn just how easy it is to add user registrations and sign-in fields to your site.

4.8 Setting Up User Accounts

The last major topic I want to cover for this course, is the topic of user accounts. I want to add the ability for user to create an account and to log in to their account, and then make changes only to their own posts. So, if somebody else's post is on here and I'm logged in as Craig, I cannot edit the other person's post but I can edit my own posts. Well we're gonna discover that, with meteor it's really really easy to add user accounts. In fact, we can do so with, just a couple of very simple steps. So, all the changes we make in this lesson are gonna be saved in the site 13 folder. But I wanna get started in the command prompt. So I've still got one command prompt that's running or Meteor server. But in the other command prompt, I want to install this accounts ui package as well as an accounts password package. These two packages will give us everything we need to create user accounts and give us the ability to very easily log in, log out and things like that. So, let's run a command here, where inside our website folder, we're gonna run a command called meteor add accounts-ui and I'm also gonna add the package, accounts-password. So if you just, string these together separated by spaces, you can add multiple packages at once. So we're gonna add, accounts ui and accounts password, let's just hit enter, and it will add those packages to our website. And one of the things that these packages are gonna do for, is it's gonna give us access to a new template called login buttons, and we can very easily add that login buttons template to our page. So, let's talk about how to do that. Let's jump into our code, and for now I'm just gonna close everything I've got open, and I'm gonna go into our body.html. And in our body.html maybe let’s see. Yeah let’s do this underneath the Latest User Post header. So under this (h2), I’m gonna add another template here called loginButtons. And as I mentioned, this template is automatically available to us, once we install this accounts ui package and accounts password package. So, we don't have to do anything else to import this template or anything like that, we just add it here, and we should be good to go. So, if I save that and then go back to our website when it refreshes, you can now see this sign in link here and if we click on it, we can see a login field and at the bottom we see options to retrieve our forgotten password or create a new account. So we'll get to that news to second, but before we do that, by default our username is gonna be an email address. Well I don't want that, I just want a username, so the way we can customize that is inside our imports folder, we're gonna add a new folder, called startup. And then, inside the startup folder I'm gonna add a new file, and this file is gonna be called accounts-config.js. So make sure you name this the same way that I've named them here. So inside this JavaScript file, first of all, I'm gonna import Accounts, that's the name that we're using from the packages that we just installed on our website. We're gonna import, ( Accounts ) from 'meteor/accounts-base'. Then, we're gonna call on the config object for this Accounts object and the way we get to that is Accounts.ui.config, and then we have ( and { and inside those {, we can set up some configuration options. And the only configuration option I really wanna deal with here is called passwordSignupFields. And I'm gonna set this to a value and this is a string, so you need it inside quotes. And I'm gonna set this to a value, USERNAME_ONLY. That way, we can't use an email address as a username, instead we just use a username and it has to be a plain string and that will get us the configuration that we're looking for. So then, in order for this accounts config to work we need to import it using our main js file. Remember in our client folder, we haven't touched this one in a while, but in our client folder we have our main js file which is our main entry point for JavaScript in our app. So just above body.js, I'm going to do another import, and this time I'm going to import that accounts-config.js file. So I'm gonna say ../imports/startup/accounts-config.js; So once we import that in, then these new configuration settings will work. So now, if I go back to our app and refresh it, click on sign in, we don't currently have any usernames saved, so I can type in whatever I want here and click on sign in and it's gonna say user not found. So first, we're gonna have to create an account. So I wanna click on, Create account, and then it just adds another field to repeat our password. So let's change our username here and we change it to Craig. I'm gonna set up a password and then repeat the password, and click on, Create account and it creates it for us. And if you want to go into Mongo and look at your database, you can find the new collection that's there for our user accounts. And now, instead of sign in, it says Craig here and I can click on that and I can either change my password or I can sign out. So that's how we can set up this account ui and account password package for use with our website and in the next lesson, we will talk about what we can do, once we've done that.

Back to the top