W e can use Firebase to store data. With Firebase we can easily do CRUD and it provides login with the different option. We are creating Ionic apps with firebase and we will be doing following as
- Login and register user in our app through Firebase.
- Register user can create and view Shopping List through CRUD on Firebase database.
Step 1: Creating our app from blank template
We can use SDK Firebase package, but angularfire2 are easier to code in our project.
Step 2: Creating / Configuring Firebase
We need to create a project, as we have three option to select as Android, Apple and web apps. As our Ionic project, we have to select the web. Add authentication to our project, click on Authentication and select option sign in options as Email and password as
Firebase provides a lot of authentication option as login through social network authentication eg Facebook and Google etc. We can control the access of Firebase database inside the firebase through setting rules. If we are not using any authentication then we set all user can read/write as in
Step 3: Configure our app.module.ts.
Before we configure, first create a file app.firebase.config.ts file containing the Firebase API. Add the following code in app/app.firebase.config.ts
This information we will get from our Firebase project and add this code in app.module.ts file. Add the following code in app.module.ts file
Step 4: Create Firebase Service provider
Create a Firebase service provider to access/ CRUD operation on Firebase database. First set the database rule to allow all user to read/write true. We will control the access later through creating Login/Register page
Add the following code in src/providers/firebase-service.ts
Here we are implementing CRUD operation on our Firebase database, we can easily understand the code of service.
Step 5: Create UI of our data on Home page
We will use the home page to display/ UI to allow the user to create/delete the shopping list. Add the following code in src/home/home.html
We are creating FirebaseListObservable in src/home/home.ts file as
Step 6: Adding Login /Register in Apps
Firebase supports login and authentication internally and also provides support for integrating with social login providers. Most applications need some kind of login mechanism internally; with Firebase it’s super easy to set this up. Whenever we login using Firebase a session is created and a unique ID uid is returned by Firebase, which is distinct across all providers and never change for a specific authenticated user.
We will create two-page Login and Register page as
Now set the login page to root and edit root page from home to login in app.component.ts file
Step 7: Creating User Model
Inside src folder create a new folder called models and add the new file for user model as a src/models/user.ts. Add the following code
Step 8: Create UI and typescript code for Login/Register page
Add the following code in src/pages/login/login.html file
Add the following code in src/pages/login/login.ts file, as for login we have to create service in real apps, as for this example we will put Firebase authentication in login.ts file only.
Note : When the user passes the authentication, we will redirect the user to home page, where home page containing the shopping list. In the login page, we have two buttons one for login and one for register new user. The information of the new user will be stored in Firebase database. Clicking on Register button on login page will navigate to the regiseter page.
Add the following code in src/pages/register/register.html file
Add the following code in src/pages/register/register.ts file
In real application we have to create separate Firebase service code in service folder, for now just for example we are keeping service code with register/login page.
Step 9: Modify the home page
Once valid user login, we will redirect to home page, here we add ToastController.
Add the following code modify the code in home.ts file, we have added ToastController to display the message below on above image.