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.
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:
Sass
This application uses SASS, a CSS preprocessor. Follow the instructions for your platform to install it:
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.