And where supplied passwords have been entered incorrectly the user is made aware of this fact:

Simple but super helpful from a user experience perspective (and that is SO important when developing applications).

Ready to go?

Let's get started!

Laying the foundation

As with all things Ionic we start off by firing up our system command line utility and creating a project using the Ionic CLI:

ionic start angular-fire blank

Here we're simply creating a new project, using a blank template, called angular-fire (kind of catchy huh?)

Answer any prompts that the CLI might throw up while creating the project (such as asking your permission to install local plugins) and, once successfully completed, install AngularFire with the following command:

npm install firebase angularfire2 --save

When completed create the following service (which we'll use to manage all authentication related tasks for the project):

ionic g provider authenticata

With the structure for the project now in place we can turn our attention towards providing the necessary credentials for our Firebase account.

Setting the environment

Inside your angular-fire/src directory create an environments sub-directory which will be used to store your firebase account/project credentials in the following environment.ts file:

With those credentials now in place save the environment.ts file to the angular-fire/src/environments directory and proceed on to the next, and final, configuration for the project - setting up the application's root module.

Rooting your project

Within the angular-fire/src/app/app.module.ts file we need to import the different Firebase modules, environment configuration script and Authenticata service that the application will require and be making use of.

Finally, the logOut method, which acts as a wrapper around the logOut method for the Authenticata service, manages logging out from the Firebase service and re-enabling the log-in form within the page template:

Now all we need to do is run our application in the system browser with the following command:

ionic serve

Which, if all has been coded correctly, should display the following form:

Upon successful authentication you should be greeted with a screen akin to the following:

In summary

As you can see authenticating Firebase access is incredibly simple thanks to AngularFire's Authentication module.

In the above tutorial we've only covered using the signInWithEmailAndPassword method but there are additional options for logging in using an OAuth flow through providers such as Twitter, Github and Facebook for example.

Hopefully you've found the above tutorial useful and, if so, please feel free to share your comments, thoughts and suggestions in the comments area below.

Please note that the e-book advertised below does NOT cover Firebase or AngularFire but I will be working on an Ionic/Firebase related e-book shortly.

If you're interested in learning more please sign up to my FREE mailing list where you can receive updates on current/forthcoming e-books and blog articles.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...

Software bugs are never fun to deal with but in the following article I show you how to quickly solve an issue that you might encounter with type definitions errors when using the firebase npm package...