This tutorial is part 2 of a 5 part series. If you would like to see part 1 you can go to it here.
Part 1: Installing necessary components. Generating a blank app through Angular CLI. Add Bootstrap for styling. Create Firebase account. Install and setup Firebase through NPM.
The code for part 1 can be found here.
Part 2: Add user login through their Google account. Create the Login Page and Home Page Components. Add asynchronous monitoring of the logged in status. Redirect to the Home Page when logged in and to the Login Page when the user logs out.
The code for part 2 can be found here.
Part 3: We will add a simple chat app that stores messages into a Firebase Realtime Database.
The code for part 3 can be found here.
Part 4: We add Email/Password user authentication using Firebase.
The code for part 4 can be found here.
Part 5: COMING SOON Adding the ability for a user to edit or delete any messages that they have sent.
In this section we will cover adding user authentication using Firebase’s Authentication. We will see how easy it is to log someone into our app using their Google Account, all without having to worry about any OAuth protocol. Firebase handles all of that for you.
We will also set up Routing and Navigation using Angular Router.
CRUD stands for Create, Read, Update and Delete. Firebase take a lot of the complexity out of a web app, which makes development a lot easier!
Here is what we will be creating:
Once the user is logged in, we display a
Logout button and are set up to add the chat features!
Firebase is a swanky service that is offered by Google that allows the developer to not have to worry about many mundane tasks that slow down development. The Firebase services that we will be using is the Realtime Database, which syncs across all devices in milliseconds. We will also be using their authentication API’s and I will also use theirr hosting to host the final version of the app.
I have been using Firebase for a few months now and I am a huge fan of it. It greatly speeds up development and can grow as big as your app does. All without having to have the knowledge of a System Administrator (or hiring one) to maintain the growth of your app.
We can take advantage of the awesome Dependency Injection that Angular 2 has to offer by putting our service calls in a provider. This makes our app scalable and allows the functions in the provider to be used in any Component in our app!
src/app directory make a new folder called
providers. Inside of that folder create a file called
af.ts. Add this to
Here we declared two functions
logout(), that do precisely what they say. We now need to add our provider to
There is one more thing that we must do inside of the Firebase Console for our login to work. When logged into the Firebase Console click
Authentication on the side menu. Then at the top click
SIGN-IN METHOD. In this view we see all the possible ways Firebase allows Authentication to be done. Click on the Google tab and enable it.
In Angular 2 everything is a Component. Components can be reused throughout the app which is extremely useful. The first thing that we need to have is our basic login page. The Angular CLI has a component generator that comes with it. We can run the following command to generate a
ng generate component loginPage
src/app we now have a folder called
login-page. This component is already set up with a
.html file for our HTML,
.ts file for our “controller”, a
.css file that can be used to style our component and then a
.spec.ts file that is used for unit testing.
.spec.tsfile is out of the scope of this tutorial. But your can read more about it here.
When using the Angular CLI it automatically adds our new component to
src/app/app.module.ts. I always double check to make sure it was added along with the Import statement.
app.module.ts should now have these added to it:
Now we need to use dependency injection to inject the service provider we just created (AF) and Angular Router in our constructer so that we can use them. We will create a function called
login() that will be triggered when they click the login button. Inside of that function we will call the login function we just made. On success we will send them to our homepage (which we will create next).
Add the following HTML and CSS to the respective files labeled in the comments below:
Now lets add some CSS to make our login page look better:
We will do this using the Angular CLI again, the same way we created our Login Component.
ng generate component homePage
We also need to verify that our new component was added to
We don’t need to make any changes (yet) to
home-page.component.ts, but I am slightly OCD and did add some slight styling to
Angular Router give us a way to make our app a Single Page Application (SPA). To add Angular Router to our project add an import statement in
src/app/app.module.ts. We will also need to add an array that will hold all of our routes.
This is what our
app.module.ts looks like now:
path: ''will redirect us to our HomePageComponent from our root url.
To make our app display the contents of the components that we are routing to. We need to add this to our host view. For us that is `src/app/app.component.html’. After our navbar add the following html:
We need to make our app function more intelligently. Notice that our base url take you to the
HomePageComponent, but what if the user is not logged yet? In that case we need to redirect them to the login page. We need to make some changes to
AngularFire2 has two services built in that allow us to asynchronously sync data to Firebase. They are
af.database. The one that we use here is
af.auth and will allow us to use the Authorization features.
af.database allows us access to the db, which we will use in part 3 of this tutorial.
When we subscribe to
af.auth we can monitor in real time if a user is logged in or not. If they are not logged in we redirect them to the
We also made a logout function that would log the user out. Notice that we have a boolean value named
isLoggedIn, that gets set according to the logged in state of the user. We will use this to add a
Logout button in our navbar, only if the user is logged in. To implement this lets change
From the project folder run
ng serve and then view our app in the browser. When you login to the app Firebase automatically creates a new user.
Now once we are logged in this is the view that we will see:
Now we are using Firebase to Authenticate the user and direct them to the homepage. In the next tutorial we will add the final part of our messaging app. If you have any questions please don’t hesitate to ask me! :)