Ionic

Ionic 4 Chat App with Firebase

Share your learning

Disclaimer: This is a simple ionic 4 chat app with firebase for fun only.

Objective: This is ionic based chat app with firebase. There are two authorities one is admin and second is user. User can chat only with admin and admin can chat with all users of the app.

Clone from GitHub

git clone https://github.com/SATPAL-BHARDWAJ/ionic-messenger-firebase.git

Create account with firebase

  1. Login with firebase console
  2. Get the google-service.json file and upload it to the root directory of the project.
  3. Go to the root directory of the project and run following command to install firebase package
npm install firebase

Configuration

Go to api.service.ts and add following configuration

const config = {
  apiKey: "your_api_key",
  authDomain: "project_id.firebaseapp.com",
  databaseURL: "https://project_id.firebaseio.com",
  projectId: "project_id",
  storageBucket: "project_id.appspot.com",
  messagingSenderId: "sender_id"
}; 

Build user and admin app

We are using this single code for both user and admin.

User

- Go to config.xml 
- change to app id to io.ionic.userMessenger
- go to api.service.ts
- set admin: boolean = false;

Then run build command

ionic cordova build android

Admin

- Go to config.xml
- app id will be io.ionic.adminMessenger
- go to api.service.ts 
- set admin: boolean = true;

Then run build command

ionic cordova build android

You can also check our other Ionic related updates here.

Output

You can subscribe our blog to get the notification of the new version of this app.

If you have any question or suggestion, you can comment below. I really want to hear from you.

Satpal

View Comments

  • admin authentication error
    user can easily logged in by their credentials but admin panel says "there is no user record to this identifier the user may have been deleted"
    please help

Recent Posts

How to Switch PHP Versions in XAMPP Easily: Managing Multiple PHP Versions on Ubuntu

Today we are going to learn about managing multiple PHP versions on ubuntu with xampp.…

1 year ago

How to Use Coding to Improve Your Website’s SEO Ranking?

Let's understand about how to use coding to improve your website's SEO. In today’s computerized…

1 year ago

Most Important Linux Commands for Web Developers

Let's understand the most important linux commands for web developers. Linux, as an open-source and…

1 year ago

Top 75+ Laravel Interview Questions Asked by Top MNCs

Today we are going to discuss top 75+ Laravel interview questions asked by top MNCs.Laravel,…

1 year ago

Mailtrap Integration for Email Testing with Laravel 10

Today we will discuss about the Mailtrap integration with laravel 10 .Sending and receiving emails…

1 year ago

Firebase Cloud Messaging (FCM) with Ionic 6: Push Notifications

Today we are going to integrate FCM (Firebase Cloud Messaging) push notifications with ionic application.Firebase…

1 year ago