Setup FIREBASE and create a Chat APP using Javascript

First thing first is to sign up for the Firebase. Firebase is made by Google and have many functionality , as example real-time database, login, storage etc.

Once you sign up you now able to login. Add project and fill up the details

Create you HTML file and in the head section put the code that the Firebase generated

Then, to enable the login functionality that we can use for this project, go to Authentication menu and Sign in Method tabs. Enable the Email/Password.

In the body section you can use the code below to play around

<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="ld">

<a href="#" onclick="logout()">Logout</a>
<div id="posts">

<script type="text/javascript">
var request ="firebaseLocalStorage", 3);
document.getElementById("ld").innerHTML = '<input type="text" name="body" value="" id="body">'+
'<input type="submit" name="" value="Submit" id="submit">';
var userid = firebase.auth().currentUser.uid;
var body = $("#body").val();
writeNewPost(userid, body);
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', {
signInOptions: [
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
forceSameDevice: false,
emailLinkSignIn: function() {
return {
url: window.location.href
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
var email = window.localStorage.getItem('emailForSignIn');
if (!email) {
email = window.prompt('Please provide your email for confirmation');
firebase.auth().signInWithEmailLink(email, window.location.href)
.then(function(result) {
.catch(function(error) {

// Write Post //
function writeNewPost(uid, body) {
var postData = {
uid: uid,
body: body
var newPostKey = firebase.database().ref().child('posts').push().key;
var updates = {};
updates['/posts/' + newPostKey] = postData;
return firebase.database().ref().update(updates);

// Get All Post //
function getAllPost(){
var playersRef = firebase.database().ref("posts/");
var p = '';
playersRef.on("child_added", function(data, prevChildKey) {
var newPlayer = data.val();
console.log("body: " + newPlayer.body);
p += '<p>' + newPlayer.body + '</p>';
document.getElementById("posts").innerHTML = p;


function logout(){
.then(function() {
alert("Success Logout");
.catch(function(error) {
// An error happened


Make sure to create your real-time database and insert the rules as below. The rules allow only authenticated person can read and write.

"rules": {
".read": "auth != null",
".write": "auth != null"

To play around you can check this example:

Note: Make sure you whitelist the domain Firebase console.

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *