Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Feb 6th 2018
In this tutorial, we are going to build an Angular 5 authentication system using Google’s Cloud Firestore. Most of the applications we build require some kind of authentication, and the simplest and fastest way to get started with that is by using the Firestore – a flexible, scalable database for mobile, web and server development. You will learn to develop a fully functioning Angular 5 authentication system using Firestore.
We will be using the official tool for Angular and Firebase integration – AngularFire that allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database. We will also be using Angular IDE through this tutorial, though you can use Webclipse or MyEclipse too, following exactly the same steps. Ensure that the latest version of Angular CLI is installed on your computer. You also need a Google account to be able to sign in to Firebase Console, where you will be creating the app that we will work with, in this tutorial.
Create an Angular Project and a Firebase App
Before beginning, do ensure you are in the Angular Perspective (Window > Perspective > Open Perspective > Other > Angular) for an optimum workspace layout and development experience.
Open Angular IDE, and from the top menu select File, then New, then Angular Project. In the New Angular Project wizard, enter AngularAuth as the project name, 1.6.5 as the Angular CLI version, and you can choose whatever Node and NPM versions you wish, or stick with the defaults. Click Next, then click Finish.
Once the project is created, the next thing to do is to create an app in Firebase, so navigate to the Firebase Console and then click on Add Project to create a new project. Give it a name (we called it AngularAuth), and then click on Create Project.
With Angular IDE, you don’t need to have any prerequisites installed to get started with Angular development. We’ll download your preferred versions of Node, NPM and the Angular CLI for you – or you can use versions you already have installed. The best part: your projects remain 100% compatible with the Angular CLI, so you can switch between the CLI and IDE as desired.
After the project has been created, you will be redirected to the project’s overview page. That’s it for now with Firebase, so let’s go back to the Angular IDE to create some components.
We need a Homepage, Login page, and Sign Up page to showcase how our Angular 5 Authentication is working, so we need to create an Angular component for each of these pages. We will use one of the features that makes Angular IDE so awesome – the Create Component shortcut. Navigate to File > New > Component to create a new component.
Give the first component the name homepage, as in the screenshot below, and uncheck the Create Component with Unit Test flag, because Unit Testing is beyond the scope of this tutorial, but we can leave the Generate Component using the prefix location flag, which is the default from Angular. The prefix is simply the word that goes before the selector of every component you generate with the CLI. If you want to know more about it or change the prefix, read more on StackOverflow.
Click Finish when you are done. This will automatically run the command ng g component homepage –spec false in Angular IDE’s terminal.
Now, let’s go ahead and remove the default content that came with the new application. Navigate to src/app/app.component.html to see the code. Select all content of this file and delete it. The app.component.html file now becomes the new base/host for our homepage. Go ahead and add the selector of the homepage component there. To do that, type the following code:
The app-homepage is the selector for the homepage component we created earlier.
Next, we will create the other two components needed to run the app and then install AngularFire2 and Firebase. Instead of using the wizard, this time let’s do this with the command line. Open the Terminal+ view, make sure the AngularAuth project is selected in the Project combo and execute the following command:
ng g c login --spec false && ng g c signup --spec false && npm install firebase angularfire2
The above command will create a LoginComponent, SignupComponent and then install firebase and angularfire2 npm packages. We achieved quite a bit with that one command, nice!
Integrating with Firebase
Now, with the installed npm packages we need configure our Firebase application to enable it to be able to communicate with your Angular application.
Back in the Firebase Console, click Add Firebase to your web app to get a popup similar to the image below. Copy the config object from this popup, we’ll be using it in our Angular application.
Now, let’s import the AngularFire modules to the app.module.ts file. We’re also going to paste in the config object we copied in the earlier step. Please note that we’ve renamed it to firebaseConfig.
Your app.module.ts file will look like the one below. Please remember to use your own config object, the one in the snippet below has invalid values.
Next, we will set up the Authentication methods, by clicking on the Authentication link shown in the screenshot above. Once there, enable Sign-in for Email/Password and Google and then save.
To enable for other providers, you need an API key and API secret which can be easily generated by visiting the developers’ section of each of the providers.
Next, click on the Database on the sidebar at Firebase and then click on TRY FIRESTORE BETA. Choose Start in test mode and then click ENABLE.
Upon creation of the Database, check the Rules tab and make sure the content is similar to this:
Now let’s go ahead and use AngularFire and Firebase in our project. First, we need to create a service file that will serve all the methods that we need to log in and log out. Go to the Angular IDE and follow the directions, as shown in the screenshots below.
Now, let’s go to the auth.service.ts file and add some code to it.
console.log('The given name is '+value.additionalUserInfo.profile.given_name),
console.log('Something went wrong: ',error);
Now let’s create two more components, the EmailComponent and ProfileComponent, using the same method as before. Next, we’ll create the AppRoutingModule where we will create our routes. Create the app-routing.module.ts file in the src/app folder and fill it out with the following content:
Now all we need to do is add the service we created earlier to the providers array in app.module.ts and import the AppRoutingModule we just created. Your app.module.ts file will now look like this (remember, the firebaseConfig object in the snippet below contains bogus values, ensure you have the valid values from your Firebase console):
<a routerLink="/signup"routerLinkActive="active"class="create-account-txt">No Account? <strong>Create one here</strong></a>
Before we go ahead and verify that everything is working, we need to change the content of the app.component.html file: Replace <app-homepage></app-homepage> with <router-outlet></router-outlet>
We should also add some styling to the form by editing the src/styles.css file. Add the following CSS code to it:
Lastly, the profile component, which is the simplest of all. There we just need to add a Sign Out button that will take the user back to the Login Page.
Welcome to your secret profile!
<button (click)="signOut()">Sign Out</button>
Serving the Angular 5 Authentication Example Application
Finally let us run the Angular app with the server view in Angular IDE. If you don’t already see it, select Window, then Show view, then Servers; right click on AngularAuth and click Start Server.
Use the Run or Debug context menu actions to automatically open the app in Chrome, or manually open http://127.0.0.1:4200 in your browser to see the app in action. Note that the Angular application is served at port 4200 by the ng serve command, executed by the Start Server action – which is why we use this port to access the app.
Now the login page looks like this:
If you click Login with Google, a new window will pop up, asking you to log-in with your Google account – you will have to go through whatever authentication you have set up for your account, like specifying an additional code for 2FA or allowing the login on your phone. Once you have successfully logged in, you will be taken to our sample profile page, with the option to Sign Out.
If you keep the console in chrome open, notice the line “The given name is: Bob” – this is because of a console.out statement we added to the service which picks out the given name from the account:
console.log('The given name is ' + value.additionalUserInfo.profile.given_name)
In the next tutorial, we’ll wire this into the page, but for now your Angular app does have access to some account information.
It’s pretty cool that we’ve been able to get Google sign-on working with relatively few lines of code, thanks to our Firebase integration. Of course, we didn’t do anything with the connected profile and we have left a few components un-implemented (like the Sign up and Email components), we’ll flesh those out in the next article in this series.