**Building a Simple Chat Application with Firebase**

To build a simple chat application, we first need to set up our Firebase project. We will create a new Firebase project and enable the Realtime Database. This will allow us to store and retrieve data in real-time.

Once our project is set up, we can start building our chat application. We will create a new JavaScript file for our chat application and import the necessary libraries from Firebase.

The first step is to set up authentication with Firebase. We will use the `auth` library to authenticate users before allowing them to send messages. This ensures that only authorized users can interact with our chat application. For example, if a user logs in with their email and password, we can check if they have authenticated successfully using `auth.user equals to user.allRight`.

Next, we need to store information about each message sent by the user. We will create an object for each message that includes the content of the message, the author's display name, the author's user ID, and when the message was created. This ensures that we have all the necessary information about each message.

We can access the data stored in our Firebase database using the `onValue` method. We will use this method to retrieve all messages sent by a specific user. For example, if a user logs in with their email and password, we can get their display name, user ID, and other relevant information using `auth.user`.

We will then use the data stored in our Firebase database to render the chat application. We will create an array of message objects that include the content of each message, the author's display name, and when the message was created.

To make the messages look nicer, we can add a special class depending on who created the message. For example, if the user who logs in has sent a message, we will apply a different style to that message otherwise we will apply a different style.

We can toggle this class by using a ternary operator and binding it with the `class` property of our message object. We will use an array of classes and supply them to our message objects.

To make the chat application look nice, we need to write CSS for these two classes. For example, we can apply different colors to each class to differentiate between them.

Finally, we need to fix a scrolling issue when new messages are added to the chat application. We will create a new method called `scrollToBottom` that scrolls to the bottom of our message history container. This method will be called after someone sends a message or receives a new message.

We can use the `box` variable, which contains all our message history, to scroll to the bottom. We will call this method every second using a timer, so it doesn't take some time to render the data before scrolling to the bottom.

With these steps, we have built a simple chat application using Firebase and JavaScript.

"WEBVTTKind: captionsLanguage: enhey what's up welcome everybody so in this video we are going to build a chat application using vue.js and firebase so the main goal of this video is to help you get started with firebase especially firestore so you can use that as uh your backend for your view application all right so let's get started by creating new view project so uh we need to create a new project using view cli so in your system view cli should be installed so view create and name a project i will call it youtube all right yt firebase view chat so we'll manually select features so you might not see this first option so we'll need ah okay we'll need this router just hit 4 in your keyboard this is in food number and we'll need few x we don't need linter all right so that's it hit enter use history mode for router uh okay yes why did you config for in yeah in dedicated config files save this as a preset for feature uh no so it will create a new view project so if you are new to view uh you can go to viewcasts.com to learn basic of view okay so once it got installed let's cd into our just created project and then we need to run npm run serve yeah while it is compiling let's open up new tab and we'll open the project in sublime or you can use vs code so it got compiled and boot up this server at this location control click to go to and let's see yeah so this is the default application with view router it can go to home about all right so um let's go to sublime and yeah so this is our project structure we got uh main component here and route store and main.js we got views over here and necessary components over here so this is the structure which comes with uh view template so now what we'll do is we'll create a front end for our chat application so instead of creating that i will i will use our default template available at this location yeah so bootsnip.com you can get a different template made on bootstrap here so i will grab the html from here i will create a new view component so you can you can make on this home or i'll create a new file i will call it private chat dot view so this is over here all right i'll copy some code from here to there all right and we need to use this but we we don't need everything we just need containers so i'll just copy the container into my newly created chat component paste it there all right so our private chat component is ready we don't need name it's default all right so once private chat component is ready here we go to router.js and then we import this newly created component named private chat and we will so we'll replace home with our private set component all right so whenever you hit save you will get updated code over here yeah so currently we have no bootstrap 3 and we have sorry bootstrap 4 and we haven't copied css yet so let's copy them as well so ctrl a ctrl c into so we need to create a styles as well style and scoped for this component only and just paste it yeah better yeah also we need to import a bootstrap for so we we just need css we don't need this so i'll copy this into our index.html so index.html is inside public and here you need to uh your bootstrap css so i will paste it over here all right all right so now it looks better all right so now that our front end layout is in place now we need to make it dynamic so whenever we type something here and hit save we need to save this data somewhere so in order to do that we need to set up our firebase so let's get started with firebase if you go to firebase.google.com uh here if you hit get started it will give you demo and all so it will take you to your firebase console and here you need to create uh add a new project so so i have couple of but i'll create new for this one so you can name it anything you want i will name it view file store chat okay so i accept create project all right so let's hit continue and it will take us to the dashboard related to this project all right so first step is to so it as it is saying get started by adding firebase to your app so we need to add firebase to our app so there are a couple of options for ios android and for web so since we are developing for web if you hit this and you will get so there are a couple of options you can import like this or you can use uh doing from uh using npm so if you go to this uh get started with firebase for web app you get this information so we will install uh using npm so let's go to our terminal install firebase and all right so once firebase is installed let's go back to our project and yeah this time we'll just copy uh sorry here so just copy it into your into your main.js and here we will have this config variable with all our configuration and then we'll initialize it into firebase so before that we need to import firebase right import firebase from firebase all right so now firebase is initialized and next step is to so since we are using the database so we'll be using this database so there are two option cloud file store and real-time database yeah these two options so cloud files five stories in beta uh it is new so we'll use this one fire store so start in test mode enable all right so our file store database created so if you want you can go to docs and get started with it get started for web and over here cloud file store get started so it will uh give you step by step information so you don't need to do that we already installed firebase we require uh okay we require firebase so we also let's record this as well and then we need to initial we already initialized this and let's add these two as well so we initialized that app and so we created this tv and then we uh do this so otherwise you will get some uh warning in console so this will disable them so we created this variable db and we'll use this variable to access our database all right so we'll be uh using this tv variable from our other component you can import that there or you can assign this to window variables so that it will be accessible from anywhere yeah you can do that all right so once that is done our firebase setup is complete uh we don't need to do anything now our next step is to add data to our database when user enters something and hit enter okay so in order to add data to our database what we'll do is we have this simple input field and then we have this button all right so this is our form and we need to bind it to messes and we need to create that over here data return object and message by default will be null so whenever user uh type something it will have some value and then we'll submit that so we'll submit on enter so on key up dot enter we'll do save message and we'll create this method say message so we'll create that method over here methods save message all right so uh the way we create uh data in our database is uh in firestore is so let's let's comment it save to file store and here we need to send a request to file store to save our data so if you go to getting started section you'll have this so you can save it like db then collection name where you want to save and then call add method all right so and the parameter that you want to save and you'll get these callback all right so let's do that so let's do db dot collection and then collection name so we'll be storing those messages in chat so we'll create the so it will automatically create we just need to specify here and then we'll call add method and we need to supply object so we'll save like this key value here message is this dot message so this dot message is this message over here right so that's it so if you want to uh save anything any other uh parameter there you can subscribe here anything like so all right so for now let's say message uh let's go back to browser so here whenever someone alright so this is first message and hit enter so let's go to uh file store let's refresh so as you can see here it uh successfully created a new message so it created a collection named set that we specified it here and then it created a field message and unlike so so document is like a unique id it automatically generate this unique id so you can also specify if you want but it will if you leave a blank it will just automatically so this is our first message so after i enter message and it just persists here we need to clear this field let's do that so after the message is done let's make this dot message equals to null all right all right so this is the saving part uh saving new message yeah saving new messages once uh we saved it we need to pull the pull all messages and display it here so instead of showing this dummy data let's pull in from firebase so uh to get data you just need to reference the collection and then loop through each of them and display it here like so all right so let's do that so we will do that on our created life cycle so whenever this component created we will create will fetch all messages this dot fetch messages let's create that method fast messages and we'll face using db and then collection name so we are facing from the chat collection and then we need to do get so this will get all messages and after getting messages then what we'll do is so you can name it anywhere query snapshot and then we'll loop through it for each data or you can call it doc so basically it will give us all the talk over here like these docs then we loop through this doc and then get data in the dock so that is how it works so first we'll create a local all messages variable empty and then we'll push data there all messages start push talk dot data so this will be the object so this object so it will return exactly this object and we'll push it to all messages so after this loop is done we'll assign this dot messages equals to all messages so we need to create this uh messages data here property here so message is all messages so this will be the empty array and after it is done it will have a array of object of all messages all right so that should work let's go to browser open up inspector and on view tab let's go to private set or uh yeah so this is the component yeah see how it shows anonymous component so i think if you keep a name property here it will show the name let's keep it private chat name save it and there we go so as you can see the message is null and messages are there we got to see this data is a method so i was doing mistake my bad sorry about that yeah so now we get object of all messages as i array so now we can easily loop through it and display it here so let's do that next go to our our private set component and here we got all dummy messages let's get rid of them history incoming message outgoing let's get rid of it so let's give only one and then we'll loop through all right let's look through it v4 message in messages and here we'll display the message so we'll have access to uh message object so this will be the object and inside this object we have message property so message dot message that should work let's get rid of this image let's keep it minimal yeah so we we can see all messages here uh new one so currently it is not real time we'll make it in a moment we need to refresh the page and we should see yeah new one over here so as you can see it is not ordering by the time recent time so we need to order that by time as well so let's handle that first so uh in order to order them by time we need to so while fetching we need to order by but the problem here is we are not saving the time when we uh created this message so here we are just saving message let's save a new property as well named created at and this will be the new date so new date will be the date of creation like it will be the current date like now yeah so now now if we create a new message we'll have this created at uh property there and before getting we can do order by order by created at all right but you know what we need to clear up our database to start up because that will throw error because we have no created ad yet so let's clear everything and start from scratch refresh so brand new message refresh yeah hi man so there we go so hyman is only more recent all right so at least here it is working so now we need to make it real time because we have to hit enter and refresh every time to see new messages so to make it real time instead of doing this so here we are facing message right so instead of doing the uh get what we need to do is uh we need to do on snapshot so it will current a constant deletion for new changes so yeah we don't don't need to do then snap shot all right so on snapchat we'll have exact same thing and we will be doing exact same thing like previous so now this will make it real time let's test it refresh to make everything clear all right so uh real time there we go more messages all right so it is working so we see how we can face the message on real time so next thing uh what we need to do is uh we need the name of user who created the message right so that way we can identify who created the message so for that we need to make the authentication system so luckily we already firebase got authentication we don't need to do anything much so now we need to make the login system so that a user on the user can only access this space after logging in right so on the authenticated user will access and then create message then we'll store who created message in our collection and then we'll display it here all right so now let's build uh authentication system so for that let's do let's first create a login component so what we'll do here is uh so if you go to authentication there are different uh method for authentication we have a different sign-in method available like so let's go to authentication and then hit setup sign in method i'll show you so these are all options available to us we can do using email password form google and like this so uh so now most of the people have google account so i will make it simple we'll enable the google sign-in method and then we'll allow user to sign in using google so just enable and save it so now you can see google enabled so if you want to email password you can do that as well all right so under authentication so you can go through get started if you want to do email and password and setup login but in this video we'll be using google sign-in method so let's go to google sign-in and we will do exact same thing like first we need to initialize the provider so we'll put this code on our login component so before that let's create a login component so i'll duplicate this home or let's create a new file login dot view will have simple template and let's uh let's put it please login to continue login with your google account to continue all right so and we'll create here a button very simple login with google and when someone clicks on this button we'll undo we'll call this login method which will be creating over here methods and then method name will be login so uh here so first we need to initialize the uh provider like so so provider will be firebase auth so before that since we are using this firebase we need to import the firebase here import firebase from firebase and then there is uh this optional step if you want to do you can do like adding school read only so this is optional uh we won't do that we want to skip that and here comes the main step so uh now we need to call this sign in with pop up and we'll pass the provider that we just initialized and it will open the pop-up and ask you and do everything for you so yeah so this is quite easy so we'll copy this code into our component below here and i will make it look a bit nicer so sign in with pop and then after it results returns result we will then do this token if we need token then we will yeah so currently we don't need to do anything like so and just leave that so uh this bit of code will execute on success and this bit of code on failure so let's use es6 syntax result lecture and then what what we'll do here is after the successful login we will redirect user to the login sorry the main component all right so what we'll do here is this dot router dot push will push it to home component so now our login code is in place next we need to create this route right so otherwise how can we access that so uh login let's import that login as well login and then we'll create a new route just duplicate it and i'll name it login and it will be login there we go so that is done let's go to our application and let's see what we can improve so log in yeah please log in with google account to continue totally fine let's hit login with google so ask us to sign in so since it was running on http and localhost it will ask you to give you this warning just advance and go to the firebase app and allow yeah we trust it because it is our own application nothing harmful going on all right so it take uh took us to home component all right so in this in this window we are logged in and we can access so we need to fix one more thing so for example let's open up this on a guest window where we are not logged in and if we try to go to our home page it's running a lot right because we are not not authenticated we it need to uh take us to the login component so that we have to login in order to come here so to restrict the unauthenticated user from accessing the private set component we need to do we need to create here before route enter so the router method so below created we'll create that so view router allows this before route enter before route enter method with this so you can find this on documentation for reference so it will just hook up before everything like even even before create it it will get executed and here we'll check if user is authenticated or not so the way we do it is like so uh next vm so the vm is like this so we do not have access to this in this bit of block of code because this is even get initialized before this initialized and so we access this variable or even the router from using vm so uh next will be executed after uh we return next from uh here so for example um let's see let me give you example by doing it so uh we need to check if uh we have authenticated user or not so the way we do in firebase is like this firebase auth on auth state changed so this will give us user if user is authenticated of course so this is the method on all the state change it will uh give us so it will just tell us both if users logged in or if user loggers basically if auth changes like so for example if there is user so if it returns a user we will uh will tell router to go to the next request so it is just like middleware in laravel if you are familiar to it so if there is user that means user is authenticated we will go to next request which is it will allow us to move next else if there is no user then we will uh go to router so this router dot push to login component so as i have already mentioned we we have no access to this there that's why we use vm so basically this view router allows this kind of method to access the this from here there we go so now uh we are protecting from un authorized access so let's go to our guest window and let's try to access it once more uh looks like we missed something yeah so we need to import this firebase right so we missed that all right so once that is done let's press yeah so whenever we try to access the home page it is taking us to this login component cool so after we login we should get to that so we already tested that no need to test it now uh we now we need to do what we need to do is we need to store the authenticated user in our variable uh named yeah let's call it auth user yeah auth user is fine so by default it will be the empty object and so whenever the component is created so after component created we will assign that here so before fetching message so here uh firebase dot auth so if user then we can do this dot user uh sorry this dot auth user equals to user all right so that's it too else will make this dot auth user and also for example if user logged out this will fire up again fire up because we are constantly listening for autistic changed and then we'll have access to sorry we'll make the art user null so we need to store the information about who created message as well so let's do that here so i will call it author or message okay author so this dot auth user dot display name so by the way uh this is the format so auth user contains uh this display name uid so if you console log you can see that or i learned it from documentation yeah so like here so we got display name user email email verified so these all are options that are get by default all right so now that we are saving all necessary information about message so like message content uh author of message and then created it so now what we can do here is we can display the author or message like so message dot author also we can so message start created at but our uh yeah so this is the whole object yeah so we'll use other moments to make it look nicer in a moment for now let's get rid of this and also let's remove delete all documents we'll start over with author name as well okay hi hello there we go so if you log in with another user in other window we can get that so let's test it all right so i'm logged in with two different user over here and here let's set hey hit this there we go hi web tab there we go i can i can listen you yeah all right so let's add some special class depending on who created the message to make it look a bit nice so what we'll do over here is so while looping through all messages we need to find out who created so if uh the user who logged in has created a message we'll apply the different style to that otherwise we'll apply a different style all right so um here we are looping through all messages and we are applying this class so uh we will toggle this class so to do that uh vs allow us to dynamically apply the class so the way we do that is like so so we'll bind the class by keeping the dot and and here we'll supply this array and we'll use the ternary operator here so for example if message dot author is equals to uh user dot display name so so currently users display name in author message then we'll apply a one class sorry one class so then it will be the send message right so we'll apply this class otherwise we'll apply receipt message class so this is how we toggle class and yeah so now we need to write css for these two class over here to make it look the way we want so we will make sent message look one way and other look another way so we'll not go through styles yeah so i just applied different color for them now let's see how it looks delete art users sorry about that so message dot author should match auth user yeah like so so as you can see if new messages come it is not scrolling all the way down right so we need to fix this scrolling issue so to do uh to fix scrolling it is quite simple so after receiving new message we need to scroll to all the way to bottom so to scroll to bottom we need to create a new method scroll to bottom let's create a new method over here scroll to bottom yeah so uh yeah i defined a simple uh variable box and we are getting the box which contains all message which is this message history all right so it contains all the messages and we are just scrolling to top all the way down like box story scroll light and we need to call this scroll to bottom method after someone sent the message right so after someone add the message we'll have this 10 so after someone successfully send the message we'll distort scroll to bottom we'll call this method so this will fix when someone types and hit enter also uh we need to call this method after uh receiving message right so after we receive message we need to call that as well so here we are doing that and let's do set timer so we'll call this method after some time because because otherwise it takes some time to render the data so without rendering it will not scroll to bottom right so we'll make one one second delay so if you call this is scroll to bottom bottom without timeout so these all messes uh won't get rendered so this will call before this all get rendered so this is quick fix for that yeah so now it should scroll to bottom there we go so let's try i am typing some message there we go there we go without doing anything yeah so this is a simple chat application hope you learned something about firebase or file store how to use that to build simple applicationhey what's up welcome everybody so in this video we are going to build a chat application using vue.js and firebase so the main goal of this video is to help you get started with firebase especially firestore so you can use that as uh your backend for your view application all right so let's get started by creating new view project so uh we need to create a new project using view cli so in your system view cli should be installed so view create and name a project i will call it youtube all right yt firebase view chat so we'll manually select features so you might not see this first option so we'll need ah okay we'll need this router just hit 4 in your keyboard this is in food number and we'll need few x we don't need linter all right so that's it hit enter use history mode for router uh okay yes why did you config for in yeah in dedicated config files save this as a preset for feature uh no so it will create a new view project so if you are new to view uh you can go to viewcasts.com to learn basic of view okay so once it got installed let's cd into our just created project and then we need to run npm run serve yeah while it is compiling let's open up new tab and we'll open the project in sublime or you can use vs code so it got compiled and boot up this server at this location control click to go to and let's see yeah so this is the default application with view router it can go to home about all right so um let's go to sublime and yeah so this is our project structure we got uh main component here and route store and main.js we got views over here and necessary components over here so this is the structure which comes with uh view template so now what we'll do is we'll create a front end for our chat application so instead of creating that i will i will use our default template available at this location yeah so bootsnip.com you can get a different template made on bootstrap here so i will grab the html from here i will create a new view component so you can you can make on this home or i'll create a new file i will call it private chat dot view so this is over here all right i'll copy some code from here to there all right and we need to use this but we we don't need everything we just need containers so i'll just copy the container into my newly created chat component paste it there all right so our private chat component is ready we don't need name it's default all right so once private chat component is ready here we go to router.js and then we import this newly created component named private chat and we will so we'll replace home with our private set component all right so whenever you hit save you will get updated code over here yeah so currently we have no bootstrap 3 and we have sorry bootstrap 4 and we haven't copied css yet so let's copy them as well so ctrl a ctrl c into so we need to create a styles as well style and scoped for this component only and just paste it yeah better yeah also we need to import a bootstrap for so we we just need css we don't need this so i'll copy this into our index.html so index.html is inside public and here you need to uh your bootstrap css so i will paste it over here all right all right so now it looks better all right so now that our front end layout is in place now we need to make it dynamic so whenever we type something here and hit save we need to save this data somewhere so in order to do that we need to set up our firebase so let's get started with firebase if you go to firebase.google.com uh here if you hit get started it will give you demo and all so it will take you to your firebase console and here you need to create uh add a new project so so i have couple of but i'll create new for this one so you can name it anything you want i will name it view file store chat okay so i accept create project all right so let's hit continue and it will take us to the dashboard related to this project all right so first step is to so it as it is saying get started by adding firebase to your app so we need to add firebase to our app so there are a couple of options for ios android and for web so since we are developing for web if you hit this and you will get so there are a couple of options you can import like this or you can use uh doing from uh using npm so if you go to this uh get started with firebase for web app you get this information so we will install uh using npm so let's go to our terminal install firebase and all right so once firebase is installed let's go back to our project and yeah this time we'll just copy uh sorry here so just copy it into your into your main.js and here we will have this config variable with all our configuration and then we'll initialize it into firebase so before that we need to import firebase right import firebase from firebase all right so now firebase is initialized and next step is to so since we are using the database so we'll be using this database so there are two option cloud file store and real-time database yeah these two options so cloud files five stories in beta uh it is new so we'll use this one fire store so start in test mode enable all right so our file store database created so if you want you can go to docs and get started with it get started for web and over here cloud file store get started so it will uh give you step by step information so you don't need to do that we already installed firebase we require uh okay we require firebase so we also let's record this as well and then we need to initial we already initialized this and let's add these two as well so we initialized that app and so we created this tv and then we uh do this so otherwise you will get some uh warning in console so this will disable them so we created this variable db and we'll use this variable to access our database all right so we'll be uh using this tv variable from our other component you can import that there or you can assign this to window variables so that it will be accessible from anywhere yeah you can do that all right so once that is done our firebase setup is complete uh we don't need to do anything now our next step is to add data to our database when user enters something and hit enter okay so in order to add data to our database what we'll do is we have this simple input field and then we have this button all right so this is our form and we need to bind it to messes and we need to create that over here data return object and message by default will be null so whenever user uh type something it will have some value and then we'll submit that so we'll submit on enter so on key up dot enter we'll do save message and we'll create this method say message so we'll create that method over here methods save message all right so uh the way we create uh data in our database is uh in firestore is so let's let's comment it save to file store and here we need to send a request to file store to save our data so if you go to getting started section you'll have this so you can save it like db then collection name where you want to save and then call add method all right so and the parameter that you want to save and you'll get these callback all right so let's do that so let's do db dot collection and then collection name so we'll be storing those messages in chat so we'll create the so it will automatically create we just need to specify here and then we'll call add method and we need to supply object so we'll save like this key value here message is this dot message so this dot message is this message over here right so that's it so if you want to uh save anything any other uh parameter there you can subscribe here anything like so all right so for now let's say message uh let's go back to browser so here whenever someone alright so this is first message and hit enter so let's go to uh file store let's refresh so as you can see here it uh successfully created a new message so it created a collection named set that we specified it here and then it created a field message and unlike so so document is like a unique id it automatically generate this unique id so you can also specify if you want but it will if you leave a blank it will just automatically so this is our first message so after i enter message and it just persists here we need to clear this field let's do that so after the message is done let's make this dot message equals to null all right all right so this is the saving part uh saving new message yeah saving new messages once uh we saved it we need to pull the pull all messages and display it here so instead of showing this dummy data let's pull in from firebase so uh to get data you just need to reference the collection and then loop through each of them and display it here like so all right so let's do that so we will do that on our created life cycle so whenever this component created we will create will fetch all messages this dot fetch messages let's create that method fast messages and we'll face using db and then collection name so we are facing from the chat collection and then we need to do get so this will get all messages and after getting messages then what we'll do is so you can name it anywhere query snapshot and then we'll loop through it for each data or you can call it doc so basically it will give us all the talk over here like these docs then we loop through this doc and then get data in the dock so that is how it works so first we'll create a local all messages variable empty and then we'll push data there all messages start push talk dot data so this will be the object so this object so it will return exactly this object and we'll push it to all messages so after this loop is done we'll assign this dot messages equals to all messages so we need to create this uh messages data here property here so message is all messages so this will be the empty array and after it is done it will have a array of object of all messages all right so that should work let's go to browser open up inspector and on view tab let's go to private set or uh yeah so this is the component yeah see how it shows anonymous component so i think if you keep a name property here it will show the name let's keep it private chat name save it and there we go so as you can see the message is null and messages are there we got to see this data is a method so i was doing mistake my bad sorry about that yeah so now we get object of all messages as i array so now we can easily loop through it and display it here so let's do that next go to our our private set component and here we got all dummy messages let's get rid of them history incoming message outgoing let's get rid of it so let's give only one and then we'll loop through all right let's look through it v4 message in messages and here we'll display the message so we'll have access to uh message object so this will be the object and inside this object we have message property so message dot message that should work let's get rid of this image let's keep it minimal yeah so we we can see all messages here uh new one so currently it is not real time we'll make it in a moment we need to refresh the page and we should see yeah new one over here so as you can see it is not ordering by the time recent time so we need to order that by time as well so let's handle that first so uh in order to order them by time we need to so while fetching we need to order by but the problem here is we are not saving the time when we uh created this message so here we are just saving message let's save a new property as well named created at and this will be the new date so new date will be the date of creation like it will be the current date like now yeah so now now if we create a new message we'll have this created at uh property there and before getting we can do order by order by created at all right but you know what we need to clear up our database to start up because that will throw error because we have no created ad yet so let's clear everything and start from scratch refresh so brand new message refresh yeah hi man so there we go so hyman is only more recent all right so at least here it is working so now we need to make it real time because we have to hit enter and refresh every time to see new messages so to make it real time instead of doing this so here we are facing message right so instead of doing the uh get what we need to do is uh we need to do on snapshot so it will current a constant deletion for new changes so yeah we don't don't need to do then snap shot all right so on snapchat we'll have exact same thing and we will be doing exact same thing like previous so now this will make it real time let's test it refresh to make everything clear all right so uh real time there we go more messages all right so it is working so we see how we can face the message on real time so next thing uh what we need to do is uh we need the name of user who created the message right so that way we can identify who created the message so for that we need to make the authentication system so luckily we already firebase got authentication we don't need to do anything much so now we need to make the login system so that a user on the user can only access this space after logging in right so on the authenticated user will access and then create message then we'll store who created message in our collection and then we'll display it here all right so now let's build uh authentication system so for that let's do let's first create a login component so what we'll do here is uh so if you go to authentication there are different uh method for authentication we have a different sign-in method available like so let's go to authentication and then hit setup sign in method i'll show you so these are all options available to us we can do using email password form google and like this so uh so now most of the people have google account so i will make it simple we'll enable the google sign-in method and then we'll allow user to sign in using google so just enable and save it so now you can see google enabled so if you want to email password you can do that as well all right so under authentication so you can go through get started if you want to do email and password and setup login but in this video we'll be using google sign-in method so let's go to google sign-in and we will do exact same thing like first we need to initialize the provider so we'll put this code on our login component so before that let's create a login component so i'll duplicate this home or let's create a new file login dot view will have simple template and let's uh let's put it please login to continue login with your google account to continue all right so and we'll create here a button very simple login with google and when someone clicks on this button we'll undo we'll call this login method which will be creating over here methods and then method name will be login so uh here so first we need to initialize the uh provider like so so provider will be firebase auth so before that since we are using this firebase we need to import the firebase here import firebase from firebase and then there is uh this optional step if you want to do you can do like adding school read only so this is optional uh we won't do that we want to skip that and here comes the main step so uh now we need to call this sign in with pop up and we'll pass the provider that we just initialized and it will open the pop-up and ask you and do everything for you so yeah so this is quite easy so we'll copy this code into our component below here and i will make it look a bit nicer so sign in with pop and then after it results returns result we will then do this token if we need token then we will yeah so currently we don't need to do anything like so and just leave that so uh this bit of code will execute on success and this bit of code on failure so let's use es6 syntax result lecture and then what what we'll do here is after the successful login we will redirect user to the login sorry the main component all right so what we'll do here is this dot router dot push will push it to home component so now our login code is in place next we need to create this route right so otherwise how can we access that so uh login let's import that login as well login and then we'll create a new route just duplicate it and i'll name it login and it will be login there we go so that is done let's go to our application and let's see what we can improve so log in yeah please log in with google account to continue totally fine let's hit login with google so ask us to sign in so since it was running on http and localhost it will ask you to give you this warning just advance and go to the firebase app and allow yeah we trust it because it is our own application nothing harmful going on all right so it take uh took us to home component all right so in this in this window we are logged in and we can access so we need to fix one more thing so for example let's open up this on a guest window where we are not logged in and if we try to go to our home page it's running a lot right because we are not not authenticated we it need to uh take us to the login component so that we have to login in order to come here so to restrict the unauthenticated user from accessing the private set component we need to do we need to create here before route enter so the router method so below created we'll create that so view router allows this before route enter before route enter method with this so you can find this on documentation for reference so it will just hook up before everything like even even before create it it will get executed and here we'll check if user is authenticated or not so the way we do it is like so uh next vm so the vm is like this so we do not have access to this in this bit of block of code because this is even get initialized before this initialized and so we access this variable or even the router from using vm so uh next will be executed after uh we return next from uh here so for example um let's see let me give you example by doing it so uh we need to check if uh we have authenticated user or not so the way we do in firebase is like this firebase auth on auth state changed so this will give us user if user is authenticated of course so this is the method on all the state change it will uh give us so it will just tell us both if users logged in or if user loggers basically if auth changes like so for example if there is user so if it returns a user we will uh will tell router to go to the next request so it is just like middleware in laravel if you are familiar to it so if there is user that means user is authenticated we will go to next request which is it will allow us to move next else if there is no user then we will uh go to router so this router dot push to login component so as i have already mentioned we we have no access to this there that's why we use vm so basically this view router allows this kind of method to access the this from here there we go so now uh we are protecting from un authorized access so let's go to our guest window and let's try to access it once more uh looks like we missed something yeah so we need to import this firebase right so we missed that all right so once that is done let's press yeah so whenever we try to access the home page it is taking us to this login component cool so after we login we should get to that so we already tested that no need to test it now uh we now we need to do what we need to do is we need to store the authenticated user in our variable uh named yeah let's call it auth user yeah auth user is fine so by default it will be the empty object and so whenever the component is created so after component created we will assign that here so before fetching message so here uh firebase dot auth so if user then we can do this dot user uh sorry this dot auth user equals to user all right so that's it too else will make this dot auth user and also for example if user logged out this will fire up again fire up because we are constantly listening for autistic changed and then we'll have access to sorry we'll make the art user null so we need to store the information about who created message as well so let's do that here so i will call it author or message okay author so this dot auth user dot display name so by the way uh this is the format so auth user contains uh this display name uid so if you console log you can see that or i learned it from documentation yeah so like here so we got display name user email email verified so these all are options that are get by default all right so now that we are saving all necessary information about message so like message content uh author of message and then created it so now what we can do here is we can display the author or message like so message dot author also we can so message start created at but our uh yeah so this is the whole object yeah so we'll use other moments to make it look nicer in a moment for now let's get rid of this and also let's remove delete all documents we'll start over with author name as well okay hi hello there we go so if you log in with another user in other window we can get that so let's test it all right so i'm logged in with two different user over here and here let's set hey hit this there we go hi web tab there we go i can i can listen you yeah all right so let's add some special class depending on who created the message to make it look a bit nice so what we'll do over here is so while looping through all messages we need to find out who created so if uh the user who logged in has created a message we'll apply the different style to that otherwise we'll apply a different style all right so um here we are looping through all messages and we are applying this class so uh we will toggle this class so to do that uh vs allow us to dynamically apply the class so the way we do that is like so so we'll bind the class by keeping the dot and and here we'll supply this array and we'll use the ternary operator here so for example if message dot author is equals to uh user dot display name so so currently users display name in author message then we'll apply a one class sorry one class so then it will be the send message right so we'll apply this class otherwise we'll apply receipt message class so this is how we toggle class and yeah so now we need to write css for these two class over here to make it look the way we want so we will make sent message look one way and other look another way so we'll not go through styles yeah so i just applied different color for them now let's see how it looks delete art users sorry about that so message dot author should match auth user yeah like so so as you can see if new messages come it is not scrolling all the way down right so we need to fix this scrolling issue so to do uh to fix scrolling it is quite simple so after receiving new message we need to scroll to all the way to bottom so to scroll to bottom we need to create a new method scroll to bottom let's create a new method over here scroll to bottom yeah so uh yeah i defined a simple uh variable box and we are getting the box which contains all message which is this message history all right so it contains all the messages and we are just scrolling to top all the way down like box story scroll light and we need to call this scroll to bottom method after someone sent the message right so after someone add the message we'll have this 10 so after someone successfully send the message we'll distort scroll to bottom we'll call this method so this will fix when someone types and hit enter also uh we need to call this method after uh receiving message right so after we receive message we need to call that as well so here we are doing that and let's do set timer so we'll call this method after some time because because otherwise it takes some time to render the data so without rendering it will not scroll to bottom right so we'll make one one second delay so if you call this is scroll to bottom bottom without timeout so these all messes uh won't get rendered so this will call before this all get rendered so this is quick fix for that yeah so now it should scroll to bottom there we go so let's try i am typing some message there we go there we go without doing anything yeah so this is a simple chat application hope you learned something about firebase or file store how to use that to build simple application\n"