In this article, let me show you how to create an Ionic application with E-mail Authentication in Firebase.
Before moving to the configuration part. Just take a look at what is Ionic and Firebase?
What is Ionic?
Ionic Framework is an open-source UI toolkit that allows high-quality mobile and
desktop applications to be developed using web technologies. Ionic Architecture is
based on the application’s interface or user experience. It is easy to learn, easy to
integrate, or can be used standalone without a front frame using a simple script
including other libraries or frameworks, such as Angle. Ionic Framework currently
has official Angular and React integrations and support for Vue is in the pipeline.
What is Firebase?
Firebase is a Backend-as-a-Service (Baas). It provides developers with a variety of
tools and services to help them develop quality apps, grow their user base, and earn
a profit. It is built on Google’s infrastructure.
Firebase is categorized as a NoSQL database program, which stores data in JSON like documents.
Prerequisites
* Google Account
Before Starting make sure that you have gmail account. If not, you can simply obtain a google account here.
* Latest version of Ionic
Make sure that you have latest version of @ionic/cli installed. You can update it by running below code.
1
npm install -g @ionic/cli
To check your Ionic version by simply runnig below code.
1
ionic -v
Create new Ionic App
Now we should create a new ionic application using Angular framework. To specify the intergration you can use --type=angular. In here use we use blank template for our application. You can create blank Ionic app by inserting blank keyword. Just simply running below command in your terminal you can create new Ionic application.
When it comes to Firebase official package for Angular is called as angualrfire. This package allow Angular project to use all Firebase service. To use Firebase services we should install @angular/fire and firebase packages by running below command.
1
npm install firebase @angular/fire --save
Create Firebase project
Next we need to create Firebase App using our Firebase Console . Login to your Firebase console and crate new project using Add project section
After filling out all the required parts, you will redirect in to a page like below.
Then you should click "Web App" > icon to get configuration text, which we will add in to our Ionic Application to communicate with Firebase. After that you have to fill out all the required details related your web app and register it with Firebase.
After you registered your web app with Firebase, they provide the SDK.
Now we have to enable the Email Authentication from our Firebase console. To enable it, click the the Authentication tab in the left menu and it will redirect you in to a page like below.
Then select Email/Password from sign-in-providers section and Enable the E-mail Authentication.
Now we have all done with our Firebase console. Now we can moving to our programming part.
Add Firebase configuration to Ionic App
To add Firebase configuration to our Ionic application, you should update the "src/environments/environment.ts" by adding cofiguration text we got in previous section.
Note: You should replace above values with your project credentials.
Now you should delete your home page in your project directory because we are creating new three new pages according to our project requirments.
Create new pages using CLI
In this project we need three pages. They are Login, Register and Dashboard page. To Create this pages easily you can use below commands.
Now we should create a new service to communicate with the Firebase Authentication methods and keep login, register and logout logic separate. you can generate service using below command.
1
ionic g service services/authentication
In this Authenticateservice, we keep the methods for login, register, get user details and logout. To register a new member, we call createUserWithEmailAndPassword() function with email and password which is provided by users from register page.
signInWithEmailAndPassword() use to manage the login of Users.
We have userDetails() function to return the details of logged in user.
At finally we have signOut() method to remove user session from Firebase Authentication Service.
Paste below code in your authentication.service.ts file.
Now we need to make changes in out app.module.ts and app.routing.module.ts. In our app.module.ts, we need to import AngularFireModule and AngularFireAuthModule modules.And also we need to import to our environment file which contains configuration for Firebase.Paste below code in your app.module.ts
To validate forms in Login and Register, we use React approach. So, we need to import ReactiveFormsModule in our import array in login.ts and register.ts.
In this post, I showed you how to integrate Google Firebase service in Ionic Application to create login and registration functionality. We can include more Firebase services like Firestore, Messaging, Social login which we will discuss in coming articles.