Adding a login page to an Ionic Tabs project

Categories

One of the most common questions I receive from readers of this site is how to add a login screen to a Tabs project layout so that the tabs are only visible AFTER a user has successfully logged in.

In this tutorial I'll show you how to accomplish that while also integrating a simple Firebase authentication service into the demonstration app we'll be building.

What to expect

By the end of the tutorial you should be able to launch the application in your desktop browser and see the following login form:

Upon successful authentication with the Firebase service you will then be redirected to the application's tabbed layout like so:

We won't be fleshing out the logged-in part of the application with any functionality as the sole purpose of this tutorial is to demonstrate how to integrate a log-in mechanism with a Tabs based layout.

Notice the logout option at the bottom right hand side of the screen? We'll use this to redirect the application back to the login page - using a combination of Firebase and Ionic's NavController API.

Ready to get started?

First things first

Before we begin you'll need to you have your own Firebase account ready for use and ensure that your system environment has the necessary software installed (I.e. Node, Ionic CLI etc) and configured for development/testing.

Assuming these are in place the project we'll be creating will make use of the following:

Firebase authentication

Angular FormBuilder API

Angular Services

The completed application will then be deployed within the desktop browser of your choice (I.e. Chrome, Firefox, Safari etc) so there won't be any need for generating iOS and/or Android build packages.

Setting up Firebase

Navigate to the Firebase website in your browser and, if already registered with the service, log in to your account (if you're not registered then go ahead and create an account, it's free!)

Once logged in you should see all of your existing projects (if you have any) displayed on your account home page like so:

Let's begin creating a brand new project by selecting the CREATE NEW PROJECT button and, in the modal window that appears, entering your project name (name this whatever you feel works best) and selecting the Country/region from the drop down menu:

Once your project has been created you can choose how to add Firebase to your application by simply choosing from the following options:

Add Firebase to your iOS app

Add Firebase to your Android app

Add Firebase to your web app

Go ahead and select the Add Firebase to your web app option as this will provide us with the necessary configuration values to integrate Firebase into our Ionic application regardless of platform (I.e web, iOS or Android):

From the modal window that appears, copy the following configuration keys and values:

apiKey

authDomain

databaseURL

storageBucket

messagingSenderId

Simply copy but do NOT edit these values as you WON'T be able to connect with your Firebase app without them:

Once copied paste these configuration keys/values into a text file for safekeeping (we'll subsequently enter these into an environment.ts file once we've created our Ionic project from the command line).

Next we need to configure the authentication options for the project.

From the left-hand menu in the Firebase console select Authentication.

Click onto the SIGN-IN METHOD tab on the Authentication screen and, from the listed Sign-in providers, select the E-mail/Password option:

Enable this authentication option:

Once saved select the USERS tab, click onto the ADD USER button and enter your e-mail/password for this project:

And that's all we'll need as far as Firebase configuration is concerned!

With the Firebase aspect of our project in place we can now move onto the next step in the tutorial - creating our Ionic project.

Setting up the project codebase

Open up your command line software, navigate to where you store digital projects on your system, and issue the following instruction to create a new Ionic project - imaginatively titled tabs-demo- using the tabs template option:

ionic start tabs-demo tabs

Once completed, change into the project and generate the following resources:

ionic g page login
ionic g provider auth

Followed by installing the necessary node packages that will allow us to make use of the Firebase Web API (and also avoid any polyfill errors that might be thrown up during application build processes):

npm install --save firebase
npm install --save promise-polyfill

Next we need to make some amendments to the application's root module - src/app/app.module.ts - so that the HttpModule is declared in the imports section (WHY this isn't automatically declared when a provider is generated through the Ionic CLI I don't know but, currently, if the HttpModule isn't imported and declared an error is thrown during build processes).

With said amendment in place your application's root module should resemble the following:

With the foundational elements for our project now in place let's move onto configuring the necessary methods for the Firebase authentication service.

Defining project authentication

In the Setting up Firebase section we defined the sign-in provider for use with this project - which involves supplying an e-mail/password value for our account.

In order to authenticate access for our project we'll make use of a small subset of the auth() service methods supplied by the Firebase Web API.

These will be crafted into our own custom authentication methods that we'll shortly write within the tabs-demo/src/providers/auth/auth.ts service.

By placing these within a service we ensure that our authentication logic will be delivered from one file and not scattered/repeated over multiple components - which makes for sensible and effective code management (particularly if the project should grow/be accessed by other developers).

The Auth service is fairly minimal (as we're only using a small subset of the available methods supplied by the Firebase auth() class) and simply handles the following requirements:

Authenticates the user with the signInWithEmailAndPassword method

Logs the user out from Firebase

Can't get much simpler than that - as demonstrated within the tabs-demo/src/providers/auth/auth.ts service:

These should be fairly simple and straightforward to understand (the method names and commenting should guide you if you're unsure as to what each section of the above service is designed to do) so we can now move onto configuring the LoginPage component.

Logging in

As the LoginPage component is the sole point of access for our project we'll need to implement an e-mail/password sign-in form that makes use of the loginWithEmailAndPasswordmethod from our AuthProvider service. In doing so we'll also take advantage of Angular's FormBuilder class to ensure that the sign-in form is unable to be submitted until the e-mail/password fields have been completed.

In full then (and it's actually quite a minimal amount of code we're adding to the class) our tabs-demo/src/pages/login/login.ts component should resemble the following:

We could enhance the handling of rejected promises in the logIn method by utilising something along the lines of Ionic's AlertController class to display an error dialog on the screen should Firebase authentication fail.

I'll leave this to you to experiment with adding to the project.

In the corresponding HTML template for the component - tabs-demo/src/pages/login/login.html - we'll add the necessary templating for the form (along with an Ionic brand logo) which makes use of Ionic's pre-built components and integrates in with the FormBuilder object created in the component's class:

Is stored within a custom directory titled images (that you'll need to create within the tabs-demo/src/assets directory) and consists of the Ionic Framework logo (which you can simply download from Google Images and use in the project thereafter).

The LoginPage HTML template makes use of 2 CSS classes - login and logo - which define the styling for the page, both of which are declared within the component Sass file tabs-demo/src/pages/login/login.scss like so:

With the project logic now in place we can test that this works by running the application in our system browser with the following Ionic CLI command:

ionic serve

Which, if our code is error free, should display the LoginPage component for the application like so:

From there it's simply a case of providing the e-mail/password credentials you registered with the Firebase service in the Setting up Firebase section of this tutorial to access the 'logged in' part of the application like so:

If you're seeing this then you've successfully implemented a log-in mechanism into an Ionic Tabs page layout!

In summary

During this tutorial we've looked into using Firebase to authenticate logging in to an Ionic application built using a Tabs template.

This has involved 'hiding' the Tabs layout until the user has passed Firebase authentication - the functionality for which is supplied courtesy of a custom AuthProvider service.

We could enhance and extend the above tutorial to include features such as the following:

Functionality to register an account which allows user's to join the service

Provide feedback for authentication errors (I.e. screen alerts or notifications informing the user of what has happened and what they might do to rectify this)

Add social sign-in features to the LoginPage component which would allow user's to sign-in using social media providers such as Facebook, Twitter or Google+

There are lots of ways in which this tutorial could be built on so feel free to explore and play!

If you enjoyed what you've read here then please sign up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for information about working with forms and components in Ionic (doesn't cover Firebase).

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...

Thank you for signing up to the mailing list!

Error!

You might also like...

In the previous tutorial I showed you how to add a firebase login screen that would be displayed before a tabs template layout. In this tutorial I'll guide you through doing the same but with a sidemenu template layout instead...