How To Authenticate with Firebase and Ionic 3 — Email/Password and Google Sign-In

This tutorial describes how to use Firebase Password Authentication and Google Login in an Ionic 3 application using AngularFire2.
In general, we will:

• Use the Supermodular2 starter app.
• Install the AngularFire2 and Firebase libraries
• Implement the login functionality with Firebase Password Authentication and Google.

Note: The complete source code of this tutorial is available in the ionic3-firebase-auth Github repository.

Download code

Prerequisites

To follow along with this tutorial, you will need:

• Supermodular2: This is a free starter template that allows you to start a new Ionic 3 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 3 app with an extremely modular architecture and best software development practices applied. In the next section, we will go through all the steps needed for downloading and running the app.
• Firebase account: An account will be needed in order to configure a project that will be connected with the mobile app.

Step 1: Preparing your local environment

NodeJS

First, make sure that NodeJS is installed on your computer. If NodeJS is not installed, please install the latest LTS version of NodeJS.

Git

Git should be installed in your computer. Follow the instructions for your platform to install it:

• https://git-scm.com/downloads

Sass

This application uses SASS, a CSS preprocessor. Follow the instructions for your platform to install it:

• http://sass-lang.com/install

Cordova and Ionic

This is an Ionic Cordova based application, so Ionic and Cordova CLIs, should be installed on your computer for this application to run.
In order to install Ionic and Cordova CLIs, run the command:

$ npm install -g cordova ionic

Step 2: Clone GitHub repository

Open your terminal and copy the following command to clone the Supermodular2 project:

$ git clone https://github.com/appseed-io/supermodular2.git

Step 3: Install project’s libraries

Using your terminal window, navigate to the supermodular2 folder. Install the NodeJS dependencies required by the project:

$ npm install

Step 4: Run / Build the application

In your terminal, navigate to the supermodular2 folder and run the application in the browser by typing the following command:

$ ionic serve

A browser window will open as shown in picture below.

Step 5: Configure Firebase

This application uses Firebase for the user authentication. Visit https://console.firebase.google.com/ and create a new project.

Step 6: Enable Sign in

This application handles authorization with two providers: Email/Password and Google.
At first, we need to enable them on Firebase. From the Firebase Console, select Authentication. Then, go to SIGN-IN METHOD and enable Email/Password and Google.

Step 7: Connect your Firebase project with the app

In order to be able to use Firebase in our application, we need to make the application “aware” of the Firebase project we created earlier. Navigate to Project Overview and select Add Firebase to your web app.

From the appeared popup, copy the following snippet.

Create an firebaseConfig variable, in the config.ts file under src/folder. Inside the firebaseConfig variable, create a property called fire and paste the snippet you copied earlier, as shown below:

Step 8: Install AngularFire2 and Firebase module

For this application to work we need to use two libraries:

• Firebase, the JavaScript SDK that implements the client-side libraries used by applications using Firebase services.
• AngularFire2, the officially supported AngularJS library for Firebase. It lets us associate Firebase references with Angular models so that they will be kept in sync with the database and with all other clients currently using your application.

Using your terminal window, navigate to the supermodular2 folder and install AngularFire2 and Firebase by executing the following command:

$ npm install firebase angularfire2 --save

Import firebaseConfig and Firebase module

Copy the code in app.modules.ts under src/app as shown below:

Add the AngularFireAuth to the providers.

Step 9: Implement Password based login

Using Firebase authentication, we can let the users authenticate using their email address and password.

Scaffold login page

From your terminal execute the following command:

$ ionic g page login

A login folder under src/pages has been created including the following files:

• login.html
• login.ts
• login.module.ts
• login.scss

Import Login Page

Edit app.module.ts under src/app and add the following line as shown below:

Add LoginPage to the declarations.

Add LoginPage to the entryComponents.

Edit the app.component.ts file under src/app and import the LoginPage as shown below:

Next, we will set the LoginPage as the landing page of our app. Edit the initializeapp() function located in the app.component.ts file under src/app and paste the following code:

Run / Test

Now, you can run the application and make sure that the login page works. In the terminal execute the following command:

$ ionic serve

You should be able to see a blank login page.

Create template

Now lets create the template that the user will login in. Open login.html under src/pages/login and replace the following code:

In short, we are using four functions in this template: login(), resetPassword(), loginWithGoogle() and signup(). We will implement those later. These functions are called each time the user hits the related button we included in this template.

Validate the login form

Let’s prepare the login.ts file for validating the data the user enters in the form. Before the user logs in, we check he has entered a valid email address and a password of more than 6 characters. Note that in this snippet we also enter HomePage as we will need it in the next step.

Go to src/pages/login and edit the login.ts file to look like the following code:

The login() function

In the login.ts file under src/pages/login, add the following code inside the LoginPage class.

This function passes the email and password that the user has provided. Then, it calls the signInWithEmail function. If a login attempt is successful, the user is redirected to the HomePage we imported earlier. Else, an error message is returned. We will explain the signInWithEmail function later in this tutorial.

Step 10: Implement Auth Service

In this section, we will implement a service to handle all the authentication tasks, such as signInWithEmail() used for password authentication, signUp() for registering a new user, signOut() for logging the user out and signInWithGoogle() to sign in with Google Authentication. In those, we will use the related methods provided by the Firebase SDK. We will explain in detail all these functions in the following steps of this tutorial.

Create AuthService

Create a new file called auth.service.ts under src/services and copy the code below.

For the time being, we import the firebase module and implement the signInWithEmail function that pases the email and password (credentials) provided by the user to signInWithEmailAndPassword function provided by Firebase SDK.

Calling Login method of Firebase SDK

Finally, in auth.service.ts under src/services implement the signInWithEmail() function for calling signInWithEmailAndPassword() function, provided by the Firebase SDK for authenticate a user. Add the following code as shown below:

Import AuthService

Now we need to import the AuthService that we created previously. In app.module.ts under src/app copy the highlighted code:

Add AuthService to providers

Then we need to import it in app.component.ts under src/app and declare it as private in the constructor.

Declare it as private in constructor and import it in login.ts under src/pages/login as shown below:

Run / Test

Now, you can run the application and make sure that the login works. If you click the login button and no user is in the Firebase database, an error will be displayed.
In the terminal execute the following command:

$ ionic serve

Step 11: Implement signup

In this section, we will enable the user to create a new account.

Scaffold signup page

Using your terminal execute the following command:

$ ionic g page signup

A signup folder under src/pages will be created, including the following files:

• signup.html
• signup.ts
• signup.module.ts
• signup.scss

Import signup page

We need to import the signupPage in app.modules.ts under src/app.
To do this, copy the following code:

Add SignupPage to entryComponents.

We also need to import SignupPage in login.ts file under src/pages/login. In order to do this copy the following code as shown below:

Create template

Now let’s create the template that the user will use to sign up. Open signup.html under src/pages/signup and replace its content with the following code:

In short, the signup() function is called when the user taps the signup button. The signup() function is described below.

Validate the sign up form

Before the user signs up, we check that they have entered a valid email address and a password of more than 6 characters. Go to src/pages/signup and edit the signup.ts file to look like the following code:

The signup() function

Use the signup() function to create a new user in the database of your Firebase Project. Copy the following code in the signup.ts file under src/pages/signup.

This function passes the email and password that the user has provided, to the signUp() function. If a sign up attempt is successful, the user is redirected to the HomePage we imported earlier. Else, an error message is returned. The signUp function is explained later in this tutorial.

Next, import the AuthService created earlier and declare it as the auth variable in the constructor. Copy the code from the following gist and paste it in the signup.ts file under src/pages/signup where highlighted in the screen capture below.

Calling Signup method of Firebase SDK2

Finally, in auth.service.ts under src/services implement the signUp() function for calling createUserWithEmailAndPassword() function, provided by the Firebase SDK for registering a new user. Add the following code as shown below:

Navigate to SignupPage

In order for the user to be able to navigate to the SignupPage, we created a button in the login page that calls the signup() function.

To implement this function, open login.ts file under src/pages/login and add the following code:

Run / Test

Now, you can run the application and make sure the Signup page works. In the terminal execute the following command:

$ ionic serve

In the login page, tap the SIGN UP button and the sign up page will load. Now, a new user is able sign up.

Step 12: Adding Login and Logout menu items

Until now, the application has the basic structure for signing in and registering a new user. It’s time to add the menu item to allow the user to navigate through the side menu to the Login page where they can choose how they are going to sign in.

Create items in markup

Open app.html under src/app and add the following code:

In short, login() prompts to the login page, getEmail() displays the logged-in user's email, The authenticated property checks whether the user is logged in and logout() disconnects the logged-in user. We will explain these further below.

Implement authenticated getter

In auth.service.ts under src/services add the following code:

Implement getEmail() function

In auth.service.ts under src/services, add the following code:

Implement login() function

In app.component.ts under src/app, add the following code:

This function is called when the user taps the login button in the side menu. The purpose of this function is to close the current menu and redirect the user to the LoginPage.

Implement logout() function

In app.component.ts under src/app, add the following code:

This function is called when the user taps the logout button in the side menu. It aims to close the current menu, sign out the user and redirect them to HomePage. The signOut() function is implemented below.

Implement signOut() function

The signOut() function disconnects the logged-in user from the application using the signOut() function provided by the Firebase SDK.
In auth.service.ts under src/services, add the following code:

Step 13: Checking if user is logged in on app load

Let’s add some logic to the application so when it starts it will check whether the user is logged in or not. This is why we will add the initializeApp() function.
Edit app.component.ts file under src/app as shown below:

This function checks whether a user is logged in or not and redirects them to the appropriate starting page every time they open the app.

Run / Test

Now, you can run the application and make sure that the additional functionality we implemented so far works. Try to signup a new user. You should be able see the signed in email account above the logout button. In this example, it is geo[at]geo.gr. In your terminal, execute the following command:

$ ionic serve

Step 14: Authenticate Using Google Sign-In

You can let your users authenticate with Firebase using their Google Accounts by integrating Google Sign-In into your app. In the login.ts file under src/pages/login add the following code:

This function is called when the user taps the LOG IN WITH GOOGLE button and calls the signInWithGoogle() function that is explained below.

The signInWithGoogle() function

In auth.service.ts under src/services, add the following code:

The signInWithGoogle() function creates an instance an instance of the Google provider object, as provided by Firebase. Then, using the Google provider object, user is prompt to sign in with their Google Account. There are two ways of doing that. Either by opening a new pop-up window which is the prefered method when we are in a browser environment or by redirecting to the sign-in page inside the application page which is prefered on mobile devices.

Final Result

Overall, in this tutorial we’ve learned:

• How to create a new Firebase Project
• Extend an Ionic app with AngularFire2
• Integrate login and signup functionality using Password and Google authentication.

The complete source code of this tutorial is available in the ionic3-firebase-auth Github repository. To see how the app should work after all the code we added, download the code of this repository and run the app.

Found this tutorial interesting?

To find many more features and make the most of Firebase for your Ionic 3 mobile app, check out Ionic 3 Toolkit Firebase.

References

Ionic, Angular2, Source code of this tutorial, cover photo.