React & Firebase Chat App Tutorial

[Music] all right welcome so today we're going to be building this chat up using react and firebase so on the right and left i'm logged into two different accounts using the sign in with google so if you click log out over here you can click sign in with google and then a pop-up window is going to show up and it's going to sign us in all right and over here i'm just going to send a message i'm going to hit enter to send or i can click the send button automatically sends it on this side and it scrolls me down and on this side it automatically updates with the corresponding style so for here i sent the message so it shows it on the right side with a blue background and on here i receive the message so it shows it with a white background and i can send a message here and it automatically updates over here as well now if we go over to the firebase database we can see that all these messages are actually stored inside the database so this is updating to the database right when we send the message and then we're getting it back from the database right after we send the message so we send the message update the database then get it back and you can deploy this to the web and this is scalable all right so let's get started all right so the first thing we're going to do is we're going to create our react app so we are going to go inside documents and you can create this react app anywhere and we're going to use mpx create reacts app and we're going to name this app fire chat all right while that's being created we're going to go over to firebase we're going to click go to console and we are going to add project we're going to call this project firechat and you can enable google analytics if you want and we're going to select a default account for firebase and now it is creating our project called firechat all right now our firebase project has been initialized and our reacts project has been initialized so we are going to do code dot to open this up in visual studio code all right now we're gonna run npm start and we're gonna delete all of our boilerplate code so inside source we do not need app.test.js index.css or these last three files so all we need is index.js app.js and uh css all right now those files are deleted and we're going to go inside app.css and we're just going to delete all the code inside of there and inside app.js we're going to delete all of the code here and we're just going to have a react fragment like this so just an empty tag and in index.js we are going to delete report web vitals we don't have index.css anymore and we don't want react strict mode and in app.js we are going to delete logo since we already deleted that and that is it all right now the app is running so we are going to go over to our firebase and we are going to click on this little html tag and it has uh an alt of web we're going to click on that and we can call this whatever we want to call it fire chat click register app and we are going to copy this key right here so from api key all the way down to measurement id just copy all of this and now we are going to create another file called firebase.js so inside this file we are going to import firebase from firebase and if you haven't installed this yet uh just do mpmi firebase so over here i'm going to do mpmi firebase and we need one more dependency before we start and that is going to be fire react firebase hooks so react firebase hooks just makes it easier to work with firebase uh inside react and it kind of makes the linkage between them easier so npm i firebase and react firebase hooks click enter while that's installing i'm going to finish our firebase.js so inside here we need to create a variable we're going to call this variable firebase app and we're going to set this variable to firebase dot initialize app and initialize app is going to be an object where we're gonna where we're gonna paste our key that we copy from before so we're gonna paste that to here and basically this variable firebase app is how we're going to have access to our firebase database so from this variable we can access the database and we can access the authentication and that way we can log in and out and add messages from this firebase app we are going to get something called firestore so if actually if we go over here we can see firestore database so that's the database we're going to be accessing we're going to call this variabledb for database and we're going to get firebase app.firestore and under here we're going to have another variable which is going to be auth for authentication and it's just going to be firebase.off and we're going to export these two variables so that we can use it all across our application we could manually import these inside the app.js but i kind of wanted to make it clean and have another file separate for it so that whenever we need to access one of these variables we can just import it and i'm going to actually drag this into source there we go so i'm going to export db and auth alright and now we're going to create a components folder and these components are going to include a sign in chat sign out and a send message so first we're just going to create the chat and sign in so sign in dot js and chat.js and we are going to run rfce so these are es6 es7 snippets that you can download from the extensions tab in visual studio code just download es7 react snippets and one of them is rfce which does that and we're going to run the same command in signin.js so rfce so in app.js i want to import both of these so i'm going to type in sign in and automatic import should come up so i'm just going to press tab and it's going to automatically import it from up there we'll do the same thing with chat automatic import all right so the first thing we want to develop is the sign in so we're going to go over to sign into js and basically we want to create a button and an import so for the button we're going to be using material ui so i'm just going to download that right now so mpmi material ui and material ui is just kind of like react bootstrap it's just a design library and you can just import buttons and inputs and everything is going to come already styled so obviously material ui isn't installed yet but we're still going to type the code for it so we're going to import a button from at material dash ui core like that and over here we are going to show that button like that and this button is going to say sign in with google so we're going to be using google authentication to sign in and speaking of that we are going to go over to our firebase database so over here and we're going to click authentication so this authentication tab right here we're going to click that and we're going to click get started and for google we are going to train this change this to enable so we're going to edit configuration and click this switch to make it enable so for the project support email we're just going to use our default email address and there you go google is enabled so on this button we're going to have an on click of sign in with google so this is a function we're just going to create so so up here we are going to need to import firebase so we can sign in and inside this function we need to set a variable called provider so this is going to be that little pop-up window that you use to sign in and we're going to set this to a new instance of firebase dot auth so we're going to import auth and dot google auth provider and so we're going to import auth from firebase.js so auth dot slash dot dot slash actually so we have to get out of the components folder and get into firebase.js all right and over here we are going to do auth dot sign in with pop-up and we're going to pass in our provider and that's all there is to signing in so now if we refresh this if we uh save this and save app.js so here we have the sign in with google and if we click this we get the ability to sign in with our google accounts so now we're going to be using react firebase hooks to check if we are signed in so i'm going to import use auth state from react firebase hooks and we're going to set a user to use auth state and inside use auth state we are going to pass auth so auth is going to be imported from firebase.js so we can import auth from dot dot slash just just dot slash this time firebase.js like that and we just pass in auth to this use auth state and this hook is going to figure out basically it's going to return true or false value so if we're going to if we're logged in user is going to return true if we're not logged in it's going to return false so if it is if user is true then i want to show uh the chat and if not then show the sign in so you can do a conditional render so user if user is true then show the chat otherwise show the sign in and if we save this this sign in with google should disappear and we have an error so module not found can't resolve react firebase hooks oh and the reason this error is occurring because i forgot to add slash off after the react fibers hooks so react firebase hooks slash off save that and let me just refresh this page and there we go sign in with google disappeared that's how we know we are actually accessing the chat component and just to prove that i'm just going to show chat to the screen and it should show chat right here there we go now we know now the app knows that we are signed in since user is returning true so now that we know we're signed in we're going to start we're going to start creating the chat actually before we create the chat i'm going to create the log out so before i forget actually we're going to call this sign out and the sign out is very very simple all we need is a button and uh we're gonna have an on click and the only thing we need for this button is an arrow function which is gonna run the function auth.signout and that just signs this up so it's very very simple obviously we need to import auth and we need to import the button from material ui like that and inside our chat.js we are going to show the log out actually i'm going to show it at the top or the sign out actually and for some reason this thinks it's called it's called sign up with capital o and inside now it's actually dot slash firebase.js so dot slash like that oh and the reason uh this button isn't showing out is because i forgot to show it so i forgot to add new text so we're just going to say sign out and there you go we have the sign on button we click this and it signs us out now we can sign in and now we have full user authentication so just an overview we started at firebase.js we took this key so this project id this app id app api key and all this other information that is unique just to our project that we created from before so we copy pasted this from this project this links firebase.js with this project that we created now we're accessing the database from the firebase by accessing firestore so this database firestore.database and we're accessing the authentication tab so this authentication tab by firebase.auth we are exporting these two variables over in app.js we are importing this auth and we are checking if we are signed in if we're signed in this use off state is going to return true if it's going to return if it returns false that means we're not signed in and it's going to show sign in if we go over to sign in sign in just has a function called sign in with google and we are just uh accessing firebase.auth so this auth over here dot google auth provider so the google auth provider is this google auth provider right here and then we're just going to sign in with pop-up auth signed into popup so it's just going to show a little pop-up window and then when we run off dot sign numerous popup and we pass in the provider that we created and to sign out all it is is just auth.signup so a lot of this is being taken care of by firebase in the back end and this is just very very simple this is honestly the simplest authentication i've ever dealt with and this just shows you how powerful firebase is that we can set up authentication honestly just a few lines all right so now we're going to start to add our messages so over in firebase we are going to create our database so we're going to click firestore database and we are going to click create database and you can choose your location all right now our database is created we're going to start a collection we're going to call this collection messages and we have to create an original document so we can you could just click auto id set one of the fields to text and set this value to i don't know whatever it doesn't matter and we can click save and now we have the messages collection so now we actually want to show this message in the chat.js so we're going to remove this little chat and now we're actually going to show all the messages so the first thing we're going to do is we're going to create a use state hook so we're going to import new state and over in chat we're going to set a state of messages and we're going to set this to a default value of an empty array all right and now we're going to add the use effect so the use effect runs once on when the page loads and every single time after that after one of the variables inside the use effect changes so whenever one of the variables mentioned inside these effect changes inside the array inside these effects changes then the whole use effect will run again so that array i was talking about is this right here and whatever values we pass into this the use effect is going to update accordingly with this array so if i pass in messages whenever messages change we're going to update these effects and we don't need to actually do that since firebase has something called on snapshot so anyway we are going to import db from firebase so like that auto import import db from dot firebase and we're going to access the database so over in firebase.js we set a const of db so this variable to firebase.app so accessing this app dot firestore so we're accessing this firestore and now we want to access the messages collection and the way we do that is just dot collection messages so over here we're just gonna set db dot collection messages and we're gonna order this so we're going to order this array by the created ad so we're going to create a created.timestep and basically what this is going to do it's going to put all the messages in order by which one was sent newest so the newest message is going to show up at the bottom and we're going to set a dot limit so we're going to limit the amount of messages taken in by this use effect to 50 messages so let's just say there's thousands of messages inside this chat you don't want to load all of them because that probably take like an hour before you can actually see your page you just want to load the newest one so we're just going to load 50. and from here we're going to use an event listener by firebase called on snapshot so whenever something changes inside the messages collection this on snapchat is going to run and on snapshot we're going to have an error function inside that arrow function we are going to pass snapshot so snapshot is just a snapshot of the data inside the collection and we're going to set our messages array to whatever that snapshot is so snapshot dot docs.map so we're getting into the document of the messages collection we're getting to this document and we're going to map out that all the documents in that collection and for each doc we just want to pass out its data so doc dot data like that and down here we want to map out messages so we're going to do messages dot map and for each message we're just going to return a div inside this div there's just going to be an image and a paragraph text so the image is going to be the profile picture and the paragraph tag is just going to be the text or the message that the person sent so from here we're going to destructure few variables so we're going to destructure id we're going to destructure text and we are going to destructure photo url so we're going to pass these in later so whenever a person a user sends their message we're going to send the data to the photo url the photo url the text and the i and the id is going to be automatically created by firebase so basically the text is whatever text the user types in into the input the photo url is the profile picture of the google account that they signed in with and the id is just the automatic id uh like this like this one over here just going to be an automatic id created by firebase so over here we're going to have an image tag and we're going to set the source to photo url and under the image tag we are going to have the paragraph that's just going to have our text and in this div we have to pass a key or else we're going to run into a warning so key with a unique id so that that's going to be the unique id of the collection that we of the documents inside the collection and i forgot to make this a self-closing tag over here so for the sign out i forgot to make this a self-closing tag all right and the reason the message isn't showing up is because we forgot to change the permissions so over in rules i have to change if false to if true so this is still in the cloud firestore so we go over to cloud firestore we click on our database and we go to rules and we change false to true we're going to press publish and the text shows up and the image isn't showing up because well it's not really it's not even a field we just have to create that and the text we haven't created the photo real field but we're not going to need to since the next step is to create a message so we're going to create another component called send message and we're going to run rfce and inside the chat under the messages.map we're going to show the send message and we're going to press tab here so it's going to auto import it so over here we have import send message from send message and we're going to create this we're going to make this a self-closing tag all right so at this point the next thing we need to do is to actually create the form so the form is going to have an input and a button so that's going to have the input to type in the message and the button to send the message so here we're going to have a form and we don't have an action right here right for now inside this form we're going to have an input and this input we're going to be getting it from material ui and same thing with the button and the button is just going to say sent the input is going to have a placeholder of message dot dot and we're going to change this input into a controlled component so whenever we type something in it's going to be stored in state and first thing we need to do is actually imports the react of the use state hook so we are going to const message that set message and we're going to set this to use state and we're going to set this to a default value of just an empty string and we're going to set the value of this input to message and on change so whenever we change the whenever there's an update in the input so whenever someone types something into the input we're going to run a function so just a little arrow function over here and that function is going to take a parameter of e for event and we're just going to do event dot we're going to set message to event dot target dot value so essentially if you don't know how controlled components work basically what's happening here is whenever you type into the input we're running this function on change and we're setting the message so this message state we're setting it to the value and the value is message so it's kind of creating a two-way data binding between the input and the state and now whenever we type something into the input it's going to be stored in state our error here is because we have an imported input and button from material ui so all right so now we have a controlled component so if we go over to a react app over here we have it doesn't look like anything's happening but what's actually happening is every single key key press we have down it's actually updating the message state with this text all right so the next thing we need to do is create the send message function so i want to have this button as a type of submit so that way when we press enter it's going to send the message so we're going to set type equals submit and we're going to set on submit to function called send message like so and we're going to create that function right now so that function is going to be an asynchronous function so we're going to have to add async before we call the function and we're going to call this function well we already called it send message and we need to pass in events so we can do event prevent default so that way the page doesn't refresh when we press the button and we're going to need to import db and auth from firebase firebase.js i mean so dot dot slash firebase and inside here we are going to destructure uh basically when we sign in with google so let me just save this so we can get that error we're gonna get another error okay let me just erase this all right so basically when we sign in with google authentication from google sends us some information actually sends us a lot of information but out of the information that it does send us we're only going to take two two values from it and that is the photo url which is the profile picture and the user id so that's the uni unique user's id and we're going to destructure those from auth dot current users so we can run auth dot current user to get the value back uh to get uh some information back from our current user so const user id photo url so we're going to auto import actually already imported off and we're going to do auth dot current user so that way we get this information back from our current user and now we're going to do a wait so 08 is just going to tell basically asynchronous function means it's going to be running in the background so it's not going to refresh the page and it's not going to stop other messages from coming in as you're sending this message but a weight kind of stops that so it's going to tell the the function to await so to what waits so it's going to make this synchronous and we're going to do db.collection so we're going to access that collection called messages and we're going to do add so we're just going to do dot add and inside add we're going to have an object and this object is just going to have all the values we want to pass so one of those values is going to be text and we're going to set text to message another one is going to be our photo url another one is going to be our user id and lastly we're going to have our created at field so we're going to do firebase.firestore dot field value dot server timestamp so basically we're accessing the firestore and we're accessing the field valve we're accessing a field value from firestore and one of those field values is called server timestamp and we can just get the server timestamp so whenever we send this message it's going to take the exact time that this message was sent from the millisecond and that way we can tell you which message was set first if for example two of them two messages were sent at the same minute it's going to order them correctly inside the array and lastly inside this function we're just going to empty message so after we send the message after we press send and it sends the message to the database we're just going to empty the input box so that the user can send another message if they want to now let's save this and i have to import firebase and i'm going to sign in with google and now i'm going to send a message show the moment of truth and there we go we get the message with my profile picture we have the message so now everything is working in this app except for one problem uh it looks horrible so to fix this we're gonna add all of our css so this is probably gonna be the hardest part honestly firebase and react is pretty simple so i'm just gonna be speeding this part up but all the styles are in the description below in the github repository although i'm just going to be adding all the class names right now and adding the styles some of the styles are inline styles especially for inputs and buttons from material ui since you can't edit it from a different file has to be inline styles for the styling to actually work so in the chat.js the way i differentiate if if a message is being sent or not is i actually destructure the user id so the uid and in here i have a class name and i have a default style of message but i also have a different different differentiating style that differentiates if it's sent or received so i have user id if the user id is equal to auth dot current user so the user id of the user that's sending this message is equal to the current user that's logged in so if you're the one who sent the message then show a class absent otherwise show a class of received and uh since we're using auth here for the first time we actually have to import it also we wrap we wrap this whole thing in one more div just so that each message gets its own line so the way i did it as i use flexbox and for that to work we have to wrap all of these messages in another div and that way each message is going to get its own line and we need to have another div wrapping around the messages so and that div is going to have a class of messages so like that so for the sign in div we also have some inline styles and the same thing with the button and for the log out or the sign up we also have some inline styles for the div that wraps around the button and the button itself and that should be everything so now i'm just going to copy paste the app.css so this is all the css code which can be found in the description below and if i save this the webpage should be styled and we do have a bug here oh yeah so for this message we don't actually have a url oh we don't have a photo url so i'm just going to delete that message and now we have all the styles so send it sends it uh we do have a bug here for some reason when i send it it's actually doing the received and the reason for that is i forgot to do dot user id so dot uid right after the auth.current user you have to do dot uid for the styles to be applied and now they're styled as if someone else as if i sent them and if i sign out and sign in with a different account these messages now look like they're sent by someone else and i can send a message like and now it's styled here with the different profile pic and one more thing is we're missing a feature so when we sent a message it doesn't automatically scroll down and the way i did that is i added a dummy div right under the send message so if we go to chat right under the send message i added a dummy div with and i set a ref so i'm going to use the use ref hook and i set a ref or a reference and i set this to scrolls so if i go import the use ref hook basically what i'm going to do is i'm just going to scroll down to that dummy div so over here at the top of this code i'm going to do const scroll equals use ref like that and i'm going to pass scroll down into send message next in send message i'm going to destructure scroll using props and i am going to right under set message i'm going to do scroll dot current dot scroll into view i'm going to set this to an object i'm going to have a behavior of smooth so it's a smooth scroll not just an automatic one and now when we send a message and we click send it automatically scrolls down i think that's everything so that's it for this tutorial if you guys enjoyed this make sure to like subscribe and i'll see you next time you

Channel: Techthology

Views: 16,243

Keywords: build a messaging app, chat app, chat app firease, chat app firebase, es6, es6 tutorial, fireabse, firebase, firebase chat in reactjs, firebase chat javascript, firebase messaging app, firebase tutorial, javascript tutorial, messaging app, messaging app firebase, messaging app react, messaging app rect, react chat app, react firebase, react js, react messaging app, react messaging app firebase, reactjs, reactjs tutorial, rect firebase, rect messaging app, techthology

Id: Q-y8ASwOYgQ

Length: 34min 22sec (2062 seconds)

Published: Fri Jun 11 2021