Firebase is a NoSQL database platform from Google for creating real-time applications. Firebase does a great job of handling registration for you.
- [Narrator] Firebase is a noSQL database platform from Google for creating real time applications. Now it does a great job of handling registration for you. So in this video, I'm going to show you how to add Firebase into this application. Now to use it, you're going to need to have a Google account. So if you have anything like Gmail or YouTube, you should be good to go. You can also sign up for that straight from the Firebase homepage at this URL. Now I've already got an account so I can see that right here where I would sign in, I have this Go To Console button.
So let's go ahead and click on that. As you can see, I've got a couple of databases that I've already created from previous projects. So your screen might look a little bit different. What you need to do is look for a button called Create New Project or something like that. And then click on that to create a project for our current database. Now here you're going to need a project name. And you probably want to keep that pretty simple. We're going to call this angularregistration and I'll just put an 07 next to it.
And then I'm going to hit Create Project. Now once you do that, you should get to a screen that looks like this. And as you can see there's three different main ways of working with Firebase. You can use Firebase for iOS, Android, or for the web. Since we have an angular project, obviously we want to work with Firebase for the web, so you can click on this icon right here. And in this popup, you should see a bunch of code that you'll need to insert into your application.
So let's go ahead and do that, I'm just going to hit this Copy button right here. And then I'm going to switch over to my application, it's going to be important that I put this in the right place. We want to make sure that we already load angular before we do any of this. But we don't want to do this after any of our application codes, I'll put it right here. And let's go ahead and indent it a little bit better. So I'll grab all this and just indent that to the right. I like to keep a little bit of space in between these main sections, so this is where I import all of my angular code.
This is going to be where I import the libraries that I need and then I have my application code right after that. Now Firebase provides different types of authentication that you can easily add to your application. So let's authenticate through popular services like Facebook, Twitter, GitHub, Google, or in our case, through an email address. So let's go back into Firebase and let's close this out. And you can see that there's an authentication tab right here.
We can click on that. And the first thing we need to do here is set up a sign in method. So here you can see that there are different providers that you can use. We're really just concerned with adding email on Passports, so let's go ahead and enable that. I'll click on this little icon right here. And then switch this switch to enabled. And then I'm going to hit Save. Now another thing I want to note here is that on the top there is a link to Web Setup, so if I click on this you'll see that it's pretty much the same code that we already copied.
If you ever get out of this authentication section and you don't know where to find that code, that's a good place to find it. Go to Authentication and then click on Web Setup. Let's go back to our homepage. Firebase's different API's for different frameworks like Android, iOS, Amber, and AngularJS. To get the code you need to go to the AngularFire quick start page, so we'll go back over here, just click on the icon on the top left. And then click on API Reference.
And then you want to click on this Libraries menu right here. So if we click on Libraries you'll be able to find the SDK's and the framework links to go into each specific framework. So the one that we're interested is called AngularFire and if you click on this link to the right, you'll be taken to a GitHub repo. Now this is where you want to go if you want information and how to add Firebase to AngularJS, and what you're going to need to do is scroll down and get the link for AngularFire, which is this one right here.
We'll start doing that in the next video.
- Adding a basic MVC structure
- Using routes
- Creating controllers
- Processing form input
- Integrating Firebase
- Storing registration information in the database
- Logging users in and out of an app
- Improving registration flow