Google Auth Firebase

Neev Shah — Wed, 29 Sep 2021 08:58:35 +0000

In this blog I am going to cover some basic concepts about the Firebase Authentication with google-auth. So lets zoom in and write some code.

First off all lets create a login and dashboard screen.

Here in login screen div we have a button and then when we click on that button a pop up window will open and after selecting/creating/logging in with our google account it will redirect to our dashboard and show us our profile details like profile-picture, email and username. We will display it using the innerhtml method. Now lets create a firebase project

After creating it lets create a web app

Give it a name and click next.
Now lets enable Authentication and authentication with google

Next: lets import authentication and our app

<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"></script>

Now lets create a javascript file and paste our config. You can find your config in project settings.

Then we will get the elements from the html file and add a event listener to render the function.

Following: We will render the google sign in with pop up and tell it to show the user details and if there is a error just show it in the console.

Now we will show the user details from the console to innerhtml

In the above picture we are telling it to see for login's and if there is a login from the device then render the

  showUserDetails

function or else let the user login.
Finally lets give some functionality to the logout button.

Here the logout button will render the LogoutUser function and tell it to log out using

  firebase.auth().signOut()

then after logging out just show the LoginScreen and if there is a error just display it in the console.

If you like this blog consider following me on github: https://github.com/nfhneevns and you can find the source code: https://github.com/nfhneevns/google-auth-blog

Thank you! For reading and I will see you in the next one.

Building a chat app with Firebase DB

Neev Shah — Mon, 27 Sep 2021 12:32:54 +0000

In this blog I am going to cover some basic stuff about the Firebase real-time database. So let's get started by creating basic HTML elements:

Notice we have created a input and a button and that is because for entering a message and sending it. One more thing is that we have used

  <form>

and that is because we want to show the input and the button in the same line.

Next lets setup a new Firebase project and a app:

Now lets create a new web app in the console:

Give it a name and you can enable Firebase hosting if you want but I don't want to do it now so I will uncheck it.

Then to use the Real-time database we will have create it so lets do that

after you have set up the database lets write some code
First of all lets import our database and our app

Now we will have to import our cdn in our JavaScript file and you can find that cdn in your project settings

Now let's configure firebase database and you can do it by copy pasting this snippet:

  const db = firebase.database();

Now to get users data we will render a prompt:

Then we will listen for submit event on the form and call the postChat function:

  document.getElementById("message-form").addEventListener("submit", sendMessage);

Next: We will send the message to the database

Now we will add a auto scroll to bottom functionality so that the user doesn't has to scroll down for a whole lot of time:

Now lets display the messages from our collection:

Now when you send a message it automatically updates in our database in the messages collection

Now lets add some bootstrap to enhance the user experience

Yes! I love it
You can find the whole source code here: https://github.com/nfhneevns/chat-app-blog
To support me you can follow me on GitHub: https://github.com/nfhneevns

Thank you!

DEV Community: Neev Shah

Google Auth Firebase

Building a chat app with Firebase DB