2.3 Add User Accounts

Next up is user accounts. Of course, pretty much every web application needs a way for users to create accounts to sign in and to sign out. Now, Meteor makes this super simple. We'll start by installing a few packages. Let's do, meteor add. And we'll add the package, accounts-password. Now, Meteor has a bunch of packages that allow you to create user accounts using different sign in services like Google, or Facebook, or GitHub. We're going to create our own local accounts. And so we're going to use the accounts-password package. Now the other package that you would normally use is accounts-ui, which is the default you UI for Meteor sign ins. However, since we're using Bootstrap, we're going to use someone else's package. And this is ian:accounts-ui-bootstrap-3. And this is basically just a little bit of UI that's tailored to work with Bootstrap's navigation. All right, now that we have that installed, let's come back to our layout template here. We have our navigation element here in our code. And we have an unordered list where we can put links. But underneath this unordered list, let's add a div. And this div is going to have a couple of classes here. We're gonna have a div of collapse and navbar-collapse, so that we have a pop up window here for our account sign in. Let's also add an id of navigation. Inside of this let's create an unordered list. And this unordered list will need a couple of classes as well, as you might expect. And we're going to give these the two that we gave to the other unordered list, so nav and navbar-nav. But then we're also going to add navbar-right so that this will be pulled over to the right. And then within here we're just going to render a template. And that is going to be the loginButtons' template. And this will give us the fields and buttons that we need to create user accounts. Now there's one more thing I wanna do, and that's a bit of account configuration. By default Meteor requires that users have an email address to sign up. We don't need to require that. We're just gonna allow a straight username. So we need to configure this. And this is of course client-side code. So in the client directory let's create a main.js file. And let's say Accounts.ui.config. And we will pass this function a configuration object. And we're going to set the property passwordSignupFields. And we're going to set it to USERNAME_ONLY, all uppercase. Okay, so with that in place, the Meteor server will refresh our page. And when we come back to the page here, you can see that in the top right corner of our navigation, we have the Sign in / Join button. And if I click that, a little modal window appears. Now of course, we don't have any accounts yet, so I will click the Create account button. And let me go ahead and create an account. And I click Create, and you can see that we're signed in. And we know this because now this button has our name and not the message to sign in. And of course I can go ahead and sign out. And we can now use the regular sign in process to sign in. And it looks like we can successfully create users. Let's do one more, and I will create a user named, cameron. And actually, I need to create the account, not sign in. So we'll say, cameron, as the username. And I will choose a password, and we'll go ahead and create it. And there we go, you can see now we're signed in as cameron. And we can go ahead and sign out. Okay, that's it. Meteor makes it really easy for us to create our user accounts. So now that we have user data, let's focus on some of the other data that we'll need to be able to store and retrieve for this application.