Adding Firebase Authentication to Back-end(Express.js) and Front-end(React)

all right so welcome back to deliberate coding in today's video we're going to do the express authentication with firebase and the front end we're going to use react so this video is just for someone who want to build your own backend with your own db so if you know that we're using firebase we come up with the cloud firestore so then you don't need to write any back-end codes but in case if you want to write your back-end code but you don't want to build your authentication so here this video is going to show you how to you can use the firebase authentication for your backend so let's see how we can do it so let's in this case our front end i'm going to use react and our authentications we're going to use with firebase and this is our express apps so first you're going to do normal authentication on the front end to your firebase and then after that firebase is going to send you the after your authentication you will get a user object that is include the jot the json web tokens inside it so and after that you can use that chart to make requests to your express api and then express will take that job and uh verify it with firebase so action uh and after that firebase is gonna send us a result whether this chart is valid or not and if it's valid you can send the data back to the user if it's not you just don't want to let's say ignore the request from the front end so and that's it that that's how you can use the express firebase as your authentication so let's see how we can do it in code all right so here i'm using vs code so you can use any ticker that you want and at the moment i just have the folder called client and this is just the boilerplate from create react apps so and at the moment it's just uh this is showing this one and so this is the step that we're going to do in this video first we're gonna do authentication on the front end and then we're gonna build a really simple back-end code and then we going to make requests from front-end to the backend using the job that we come from the firebase all right so first we going to do that so you need to make sure uh first you need to create the firebase projects so if you have not yet so please go ahead and do that so in this case i have already done that and i'm going to go into my project settings and then we're going to go into the choosing this one so we want to use for web applications and then we give apps our app's name i want to do just the also you can do this whatever you want we don't want to do any hosting and then we're going to register our apps it might take a while all right so after that you will see this one so you can copy this one and uh so i'm gonna copy this and then we're gonna continue to consoles and also you can find it right here as well if in case if you don't see it alright cool so you need to copy this one all right so back into vs code so i'm going to create a folder called config right here so we're going to put up a configuration for firebase i'm going to call firebase config.js and i'm going to paste this one right here and i'm going to change this one to cons and then i have already installed two packages so you need to do that as well so the first one is going to be firebase and the second one is xcos so this one is we're going to use this one to fetch the data from our backend but for now we just using the firebase so this is later on when we build our backend we're going to use this one to make sure that you need to install this to dependency all right so and then i can do the import right here firebase import firebase not like this one import firebase from firebase and then we can initialize it so we can go into the index.js so i'm gonna and then i can do just a big and firebase config and that's pretty much it so i'm to put this one on top right here and then we're going to go back in here we have refresh we could see this one is we can import but let's say this is not the best way to actually initialize it and for this area i'm not sure why i have this error as well but i'm using on chrome and this is not happening but if uh and this this is just fine um in this case um because we import like uh the firebase itself so because it's it's actually really huge so what we want is to just using what we want to use in this case well just this is the best way to actually import what you want to use firebase apps and then this one we want to use the firebase analytics so we can do just import firebase last analytic right here and then the warning would be go away if you refresh back the warning is going away this error like i tell you i don't know why it's happening in this place as well so right now we're gonna ignore this one all right so this is the bright way that you do import the firebase so now i'm going to cleanse our apps a little bit so we not focus too much on the ui in this case i'm going to go back into the app.js i'm going to remove this one right here so we don't need the logo so and then i can remove this once and then for this one i don't want to use it as well go back in deck.js i can remove this one and this one and also the index.css oh i don't want it as well so i'm going to remove this one all right hit save and then i'm going to change this one just to the udon for logins let's say logins with google so we're going to go with the google authentications and right now we go back if i refresh so there you go so you can see it's maybe you may not see it clearly so there you go so this is our login with google alright so then we're going to handle the clicks put down right here so let's say i'm going to call this one login with google so this one we're going to do the google authentications so let's say i'm going to create a function on top right here log in with google and then we can the do the firebase so i can do import by base import firebase from firebase apps and then we want to go with the authentication so i'm going to do firebase last auth right here all right and then what we can do is just do firebase dot apps dot dot science with pop-ups so we're gonna do sign in with pop-ups so we're gonna do the google firebase google provider right here i'm gonna new firebase dot os dot google provider right here so there you go and then you can do dot dens and then this one is going to have the user credentials you said correct i'm going to call this one and we can just console the logs dot so let's say i'm going to cut this one and there you go i'm gonna call this one user credential all right so that's pretty much it so for our login with google and also one thing that you need to do you need to go to authentication part right here and click on get started so in this one it's gonna show you the list of what you can do so what we're interested in is a google right here if you want to go with github or anything you can explore more and we can click right here and then we do enable and then we choose our emails that we are using i'm going to hit save but this is the email that i'm using it might take a while all right so after enable so you can be able to actually log in with this one so right now if we click on login it's gonna do the pop-ups so it's gonna a little bit slow for me and then this one so you can choose i'm going to click login with this one and then it's going to return back to you and then we can have the console.log right here so as you can see this is we have the credential that's what we want and this is the user as you can see right here we have the token right here this is the token that i'm talking about like the job of this user all right great so right now we have the tokens so we need to update that tokens uh i think we don't want to we we made we like update the after they log in so we want to switch this one right here to the let's say that we're going to have uh let's say this one is going to be an h1 up to loose and above back end and then in here i'm going to create a state for this one on that os equal to use date and then it's gonna be false so let's see so we can do let's say if auth if it true so we're gonna render this one if it's fails if it's false so we're gonna do this render this one and then for the user credential right here one thing that i can do i can do if the user grabs right here and then we're gonna set the auth to true and then we yeah that's pretty much it and yeah so right now i'm going to hit refresh this one and click login again click sign ins so it's going to go back we set update it's going to switch to to do right here perfect but if i refresh right here it's not the user may not stay locking so for that we're going to use the use effects right here um i'm going to put everything inside this one so for now in this tutorial we not focus too much on the best practice of this one but we just focus on the functionality so all right so i'm going to do use effects and then we can do let's say firebase dot os right here dot on i think this one should be on us not on state chain yes and then we're gonna have to use uh user credentials and then we can just console.log this one as well all right so right now if you can see uh there we go so we have all of the user credential that we want and that's it so we can check the same thing for this one we can do if this once and then we're gonna set this one to true so if we refresh it might take a while because uh this one is going to be asynchronous so the reason that we uh because this one is run after the component got blown so first the because of the use date this one is false and that's why it's gonna run to do so it's gonna build this component first and after that it's going to running this one uh running the authrike running the use effect right here then we update the state that's why we just see this one the lock-in first so later on um after we finish everything so i'm gonna go back and i'm gonna change uh the update on that one so we don't want to see that right so we want to actually if you log in you can just see to do right away okay so now everything is fin uh it's good and we want to get a credential from this user so we can just do user dot get tokens we get token id right here and this is going to be the asynchronous way so we can do that then and then we can do the we can get the result from this one is going to be tokens and then we can just console the lock the token this one as well so let's say token okay there we go so i don't know i don't see why uh token so it's not a function all right so get token result i guess all right so let's see why is that that is weird oh okay so this is should be dent but i just uh putting like the the dot right here so in this case we just won the token so we don't want to get a result so i can just do the tokens so there you go so right now we got a whole token right here so we want to store this token as well so let's see so i'm going to create this one create the tokens on the global right here steps token equal to use date tokens and actually this is empty and then we just set the token right here set tokens with the token that we have that's pretty much it so if we refresh this one and then if you go into the components and go to app so as you can see right now we have our state we have this token so we can pass this one to the props and then we can make requests to this one to our backend all right um that is pretty much it so for now i'm going to uh this case so as you can see when we refresh we see that put down a little bit so for that we can use this one we can do with window.localstorage dot that items boss to true so if we have the value we're gonna do true like this one so we can read this one or let's say i'm gonna do window the local storage dot get items let's say let's get items of the auth here and then this one is going to be equal to true um because it's a string so we can do the true right here so right now if we refresh we see that to do immediately so there you go so you can see that and also we want to do this happened when we set this one as well all right so i guess so right now when we this one is the user is actually authenticate all right perfect uh so right now everything is done so we're gonna next is we're gonna i'm gonna create a component for this one i'm gonna call this one list off to do and then i'm going to pass the token to this one and then we do not have anything yet i'm going to create a component but this is i'm going to call this one list off to do dot js and then uh we can the structure from this one and it's gonna have a token and then we're gonna do h1 less off to do okay so this is we're going to get the list of to do from our backend from our express apps so i'm going to do this a little bit okay great so everything is so far everything is great we see the list of to do and we are done with authentication on the front end all right so in this part we're gonna build our simple backend so first i'm gonna close this folder right here i'm gonna open the terminal so and right now i am in this one so i'm going to do the npms init y so we can enable our package of jsons and then we're going to install some dependency the first one is we're gonna add the express so we're gonna use express for this one and also we're gonna do the firebase admin as well so the five uh so then we can initialize the firebase inside our express app all right so after that that i'm going to install one more dependency is uh nodemon so then whatever chain into our express so it's gonna reload so it's gonna be nodemon as a dave dependency okay perfect so right now i'm going to create a folder called source so this is our server and inside here we're going to have the configs so the config folder right here is going to put i'm going to put the firebase inside that one and then this is gonna be server.js okay and then the package.jsons i'm gonna remove this script right here so i'm going to add uh this one is going to be the dave and then we're going to do the nodemon nodemon um server source server.js so because we put that in the source folder and that's pretty much it and for the start server if you want to do for the development for production you can just do this start and instead of note 1 we can just do note okay so this one is going to be really simple account express is going to be equal to i'm going to require express right here and then we're going to have our apps it's going to be equal to express oops and then i'm going to create the port is going to be equal to 5000 and then apps.get so and then but now we just do the hello world and return rest.send hello and then apps.listens on port and now we can just do the console.log um server is running on port and then we have we can put our port right here okay so that's pretty much it for this our server so then i can do the yawn run dave so this is going to start our server on pod 5000 and if we go back in here so we can go to localhost 5000 and then there you go so as you can see right now we see our hello world all right so next uh rather than display the hello world right here so what i'm going to do is i'm going to change this one to api instead i'm going to say let's say slash api slash to do so we're going to return adjacent so let's say rest.jsons and then we're going to return the let the jsons right here is going to be to do to do and we have the list array right here it's going to be the title is going to be let's say test1 gonna do test one and i'm gonna copy this one three times test two and then test three okay that's two and this one is gonna be test three so this is gonna be really simple so you can go to local 5000 api slots to do and you will be able to see this json right here okay perfect so the next thing is what i wanted to do i want to get the front end to actually uh query this one so all right so let's see how we can do that so right now we are finished with the our beloved simple backend and we are not doing any uh we are not going to do any authentication just yet so alright so i'm going to close this one right here all right first we have this terminal okay i don't know why i cannot close it okay so let's go back into our clients and let's go into what we'll list up to do the length of to do right here is going to fetch the to do from our server api right here so for that we're going to do use effects right here and then what we can do is i'm going to create a functions right here con batch data which theta is going to be equal to this one and then what we can do is to using xcos so and i have already import i'll install this one xcos from xcos and now we can do xcos.getrequest from the http slash um this one local post 5000 actually 5000 and then it's going to be api slash to do okay and then we're going to do a single weight right here a weight and then we're going to have the result from this one and then we can just console the lock the result rest of data okay and then we're going to call this fetch right here inside would use effects perfect oh oops not this one all right so let's see where oh okay this is the one that we the place that we should call okay so right now we're going back into this one and we go into our front end so if i were refreshing this one this should make a request but right now it's because of the code policy so it's being blocked so we can do that by going to upper server so we're gonna install uh one dependency so for now i'm gonna close the server and then i'm gonna add one more dependency all right i'm gonna do yawn at course and after that so you can do cons course is going to be required course and it's going to be really simple so you can do just apps.use course right here okay so after that done we can run our server back yawn run dave right now our server is running so i'm going to close the this one right here so go back in here if we refreshing this one right now as you can see right now we have the three array right here we have task one test two and test three so all right so it's great so so far it's uh it's okay but what we want is to let's say this is we want to protect this one right so we want to authenticate user to be able to fetch this data so right now anyone uh can actually go into our local 5000 and fetch this data and this is not what we want so so to do that we need to passing the so as you can see we have this token right here right so what we want is to pass this token when we fetching this one so for that we go into passing the headers so i'm going to go with the headers right here and then the header is going to be passing the authorizations so it's going to be the authorize so let's uh this one is going to be awesome authorizations and then with the bearer we're going to do the bearer right here and that is going to be plus the token value so the token that we have great so and then this one is need to choosing the passing the token as well so instead i'm going to pass the token as the parameter to this one so let's see if this one and then also this is gonna put a token right here so this one it mean that so right now if we go back into this one as you can see we actually been called two times so why is that why it's being called two time well first the token is empty when we're passing from the the app.js right here the token is empty and then it's actually going to run and then the next thing is token is changing and it will run again so that's why we pass the token to this array so it means that whenever the token change we can call this one so that's why it's been called two time so what i'm gonna do is actually check if tokens if it's valid if it has some value token and then we're going to call this one so right now if we go back as you can see right now we have only one request right here but right now we are not doing any validation yet so all right so to do that we come back here into our express so inside the config right here i can the creator firebase config dot js so this config right here is this for our backend and then i can go into the firebase projects so you can go in here and then go to project settings and then you can choose the service account and then after that it's going to generate this one for you and then we simply using with nota so i'm going to copy this one all right so this one is going to change this one to cons and then i'm going to do the modules dot export is going to be equal to admin so we're going to export this once and also we need to the pass for this one right here so you need to download this one to generate new private key so which i have already done that so i'm going to put import this one real quick so here we go there you go and this one is i'm going to close this one i'm going to rename this one to the service account let's say service accounts all right so i'm going to close this one and then require right here so we can do just the okay so my badge i'm i'm changing the wrong name so this is going to be firebase config and this instead it should be the fire service account this service account service account okay i'm going to close this one and this one we can do the service account right here perfect so the service account right here it needs to be protected so initially if you have the public's folder the public repositor public repo on github so i think it's not a good idea to actually expose this one so you can see we have the key right here so and it should be let's say ignore uh if you're using big github so you should ignore this one or and then you can just add that directly when you deploy it to your um so let's say to your cloud so this one is need to be protected okay so right now we initialize our admins so the next thing is we need to be able to read the uh tokens right here uh the token from the from our front end right here all right so to read that header so we can just do console.logs so console.logs request.headers and that's the value of that one so i'm going to go back into here so right now as we as you can see right now we can see the tokens uh so go back in here if i were refreshing this one i make requests to our backend and this one is the header right now we can see that we have the authorizations that we've been passed with the barrier and the tokens so this one is i make a mistake that this barrier right here should be half a space so right now if i were to refresh again it should be separate this one perfect so then we can just extract the token this one and then we can do the validations okay so right now go back to the server.js so we don't want to do the validation right here so we want to do the validation for entire route so for that i'm going to create the middleware for it so i'm going to go to this functions um function folder create another folder called middleware and then i'm going to do index.js i'm going to create a class called middleware and then we're going to be a things and then decode let's say decode tokens inside our decode token right here uh it says just a middleware so we can have access to request press and next and then inside here we can do let's say request.header right here all right so we're going to do cons tokens it's going to be request dot headers so it's going to be headers and then it's going to be dot authorizations so which is this property right here if you as you can see the authorizations and then for this one we can do this split so because it is a string so we can split this one and then we're gonna get the index at one so as you can see we have the space between that so the first one is going to be better and there's sec the the index one is going to be the token right here perfect so to validate this one or what you can see is what you can do is going to be cons decode volume let's say detail value is going to be equal to admins so i'm going to import the admin that we just create so it's going to become admins equal to require so it's going to be going to the folder go to config and then go on to the config dot firebase config and then we can do admin now we can do dot os and then we can do verify token and then we're going to pass the token that we have right here and then we can check if the decode value if there's a decode value so it's like if we have a value so and then we're going to do next else we're going to do return next right here l we can just do return rest.json let's say and also all right so i'm going to close this one so and then we're gonna do let's say the message of this one is going to be um unauthorized an author i yeah and also right and also for this one i'm gonna do the try and catch for this one as well so we can do try all right okay try and then we're gonna do catch and then we have the arrows and we should do let's say return rest adjacent uh let's say the message right here is gonna be internal error perfect so right now we have this middleware so we need to use this one so we're going to do modules dot export is going to be equal to new middleware so instead of exporting this class we just export the object of this middleware so going back into our server we can use this one so instead of this one using for the particular route so i'm going to use for the global route so for that we can use the apps.use and then we can do the middleware and now we can do the middleware dot let's say okay let's see so we can do this one and then this one should be middleware.decode tokens right here there you go so right now whenever we make a request it's going to go into this token it's going to checks while i date this one so for now i'm going to say let's say console.logs the decode value when after we bring the code okay so right now everything as you can see everything is empty uh inside of the server good so i'm going to make a request right here and then if you can't see we have the promise okay the reason is because this one is need to be asynchronous i'm going to do that again i'm going to refresh this one right now as you can see we have the the value so this is the value that being decode so which is the correct value so and that's why that's why we're going to go next and then we get the data so let's say i'm going to pass the token that is invalid so for this token right here let's say i'm going to change this token to let's say uh hello hello wall right here okay so this is uh i'm just making this wrong so this is going to be okay we will change it later on so right now if i were to hit the request we have the internal error right here and then because the reason is that because it's being blocked uh because the token is invalid and and then it's going to have some error right here oh you can console that lock the arrow right here as well all right let's see i'm going to fetch this one again and there you go so right now we have the error right here because let's say that the token not being passed is invalid it's not a jwt string so this is not correct so i'm going to remove this one back and then for this one we can just using our token back okay i think that is pretty much that that is pretty much it for this one all right so i think that pretty much it for this video uh and to wrap up is as you can see right now as uh we're using the global middleware so if you create any route um it will doing the validation first so it's going to check that it's the token that being passed from the front and it's actually correct or not so that we have the decode value right here so if you want let's say if you want to see actually who actually being requests from this one so you can send that uh decode value to the our controller let's say i'm going to do request dot let's say user request user or we can do request that user is going to be equal to decode value and then we can access this one so let's say with our api on right here so i can just console.logs request that user request that user okay so right now whenever i make a request right here so i make a request and as you can see right here so we have the request.user with the information that being the code from the json web token so we got the username and then we got the uuid so you can use this one to actually uh let's say store this one inside your database at um your front as ux then your postgres or mongodb with using express all right so that's pretty much it for this video and i hope you learned something from this one and if there are any problems uh you can just go into uh comments and and also join the discord server if you can ask me question there and you can get this code from my github as well all right so i think that's it for for this thank you you guys for watching until the end hope you guys having a good day alright see you guys in the next video peace

Channel: Daily Web Coding

Views: 8,257

Keywords: firebase authentication, firebase, authentication, firebase authentication tutorial, firebase auth, firebase tutorial, vue.js firebase authentication, firebase react authentication, vue js firebase authentication, firebase auth tutorial, product: firebase, node.js authentication, node.js firebase authentication, firebase authentication node.js, react firebase authentication, firebase server authentication, node js firebase authentication, firebase admin authentication

Id: Jfkme6WE_Dk

Length: 35min 59sec (2159 seconds)

Published: Fri May 07 2021