1. A way for end-users to signup (email & password is sufficient)
2. A way for users to login in and have a short profile (Name, UID, Photo, About)
5. Add API call when a user registers so that the user is created in CometChat
Each subfolder and file will be explained in detail in the following section:
img: contains images for the application such as logo, background, and so on.
favicon.ico: it is favicon.ico for the application.
index.html: root HTML file. HTML file for the home page.
login.html: HTML file for the login page.
.gitignore: this file contains files that will be ignored when committing the code. In this case, we do not want to commit the “config.js” file because it contains the secret keys of the JavasSrcipt chat application.
screenshots: this folder contains images that are used for README.md file.
README.md: describes the application and provides steps by steps to run the application.
Step 1: you need to have Node.js installed on your machine
From the dashboard, add a new app called "chat-widget".
Select this newly added app from the list.
From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, which will be used later.
Also, copy the REST_API_KEY from the API & Auth Keys tab.
Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
Create a file called “config.js” in the ”js” folder of your project.
Import and inject your secret keys in the “config.js” file containing your CometChat and Firebase in this manner.
Make sure to include this file in your gitIgnore file from being exposed online.
Setting Up Firebase Project
To begin using Firebase, you’ll need a Gmail account. Head over to Firebase and create a new project.
Firebase provides support for authentication using different providers. For example, Social Auth, phone numbers, as well as the standard email and password method. Since you will be using the email and password authentication method in this tutorial, you need to enable this method for the project you created in Firebase, as it is by default disabled.
Under the authentication tab for your project, click the sign-in method and you should see a list of providers currently supported by Firebase.
Next, click the edit icon on the email/password provider and enable it.
Now, you need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick web as the platform.
Once you’re done registering the application, you’ll be presented with a screen containing your application credentials.
Please update your created “config.js” file with the above corresponding information. If you do not see the information for the “databaseUrl” field in the config.js file, do not worry as we will discuss it in the “Configuring the Firebase” section.
Congratulations, now that you're done with the installations, let's do some configurations.
Configuring Styling for the Application
Setting Up Images for the Application
Configuring the Firebase
You need to create a “firebase.js” file inside the “js” folder and you need to enable Firebase realtime database by following the below steps.
Please follow the guidance from Firebase. After following all steps, you will see the database URL. If you just need to update the “databaseUrl” field in your “config.js” file with that value.
On the other hand, your Firebase real-time database will be expired in the future. To update the rules you just need to select the “Rules” tab and update the date/time in milliseconds as you can see in the image below.
While developing the application, you may see a warning message on the console.
@firebase/database: FIREBASE WARNING: Using an unspecified index. Your data will be downloaded and filtered on the client. Consider adding ".indexOn": "email" at /users to your security rules for better performance.
To resolve the issue, you need to update the rules for your real-time database as follow:
For more information about the warning message and how to fix, you can refer to this link.
This “firebase.js” file is responsible for interfacing with Firebase authentication and database services. Also, it makes ready our email/password authentication service provider enabling us to sign in with email/password. Secret keys will be retrieved from the config file. As mentioned above, please do not share your secret keys on GitHub.
The below images demonstrate the data structure of the application. A user should have an avatar, an email, an id.
The Login Page
Create login.html in the source folder. The source code can be found from here.
UUID: each created user should have a unique id. Hence, the UUID library is used to generate a unique key for each account.
Validator: it is used to validate the login/sign-up form. Because you need to ensure that the input information is valid before creating a new account or letting a user log in to the chat application.
Firebase: it helps us to interact with Firebase and use Firebase services such as Firebase Authentication, Firebase Realtime Database, and so on.
The Auth.js File
The Util.js File
The Login.js File
The file will take responsibility for handling the business logic for the login page. This file contains functions which can let the user register a new account or log in to the application. The full source code can be found from here.
After clicking the sign-up button, the “registerNewAccount” function will be triggered. It accepts a JSON object as a parameter and the JSON object contains the user’s information including the user’s email, user’s password, and user’s password confirmation. Before proceeding with further actions, the user’s information needs to be validated by using the “validateNewAccount” function. If the information is valid, the user’s avatar and user’s id will be generated. As mentioned before, each user should have a unique id. After that, the application will register a new account by using the Firebase Authentication service and then register an account on CometChat by using the “CometChatWidget”. You can refer to the below code snippet for more information.
How to Create Chat Widget on CometChat
Step 1: Go to the CometChat dashboard by using your created account and then go to your created app. Hopefully, you had one after finishing the “Configuring CometChat” section.
Step 2: You need to choose the “Chat Widget” option on the left sidebar. You will be redirected to the page in which you can create a new chat widget.
Step 3: On the current page, you need to choose the “New Chat Widget” option, CometChat system will create a new chat widget for you and redirect you to the created chat widget.
Step 4: You need to update your config.js with the following keys.
The Home Page
Step 1: Create index.html file in your project folder. The full source code can be found here.
The Index.js File
This file will take responsibility for showing greeting to the authenticated user on the header, handling the logic when clicking on the “Logout” button, and launching the CometChat Widget.
After clicking the “Logout” button, we should call the “logout” function which is provided by the CometChat team. If the function is executed successfully, we need to redirect the user to the login page. You can refer to the below code snippet.
About the Author
Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn.