Vue.js Firebase Authentication - New Project Tutorial

hey hey developers so today we are creating view j/s with firebase authentication we're gonna create a quick app that will do all that for us we'll be able to login we're also gonna look at route guards and how to protect certain areas of our app and then we're also gonna look a little bit about the backend and how we can pass the firebase token from the front end to the back end so stay tuned hey and if you don't know my name is Eric I am a full-stack software developer I'm also a huge vue.js fan I'm also just a huge web development fan and technology fan so if you like those type of videos make sure you click that like button below click that subscribe button that really helps me also I'd love to hear what you guys like if you guys really liked firebase leave a comment below let me know what you'd like about firebase I know a lot of people learn firebase as one of their first technologies outside of their normal web development CSS HTML because it's so easy to get up and running let me know in the comments if that's you alright so this is the app we're creating so you can see here it's really simple we have this a login page we have a registration page you have an about page and then we have this secret page which if we click on nothing happens also if you type in secret up here it just redirects back to the login page so let's create a new login just to see if it works so let me put an email I know blah blah com and then I'm gonna put in a password and hit register cool so it logged me in and now here's our secret all our this is actually using the Breaking Bad API on the server side to retrieve all this information and we still have access to it about and if I click the Sign Out button it signs us out so everything works okay also one's a nice thing if I log in here so if I put in my login blah blah calm and put in my password and hit login if I'm on the secret page and i refresh the browser it automatically keeps me logged in it doesn't log me out it knows that i'm logged in and if I click Sign Out it signs me out so I'm good there so that's where we're gonna create today so before we get too far let's add our project in firebase so to do that I would recommend everyone listening go to the firebase google.com if you don't already have a Google account you can sign up and get one for free and then firebase is really generous on their free plans I'm just getting started it's great for new developers already even if you've been a developer for a while it's really simple so once you get logged in you'll go to console that firebase Google comm you click add project you're going to add in the project name I don't test YouTube you're gonna click continue it's gonna ask you if you want to do Google Analytics I don't care about that I'm gonna click create project and then just gonna take a few seconds and it's gonna create the whole project for us while it's doing that let's see if we can get our app running so here I have Visual Studio code open here and I have something called view CLI installed if you don't know how to install view CLI I would just you know go to the view CLI webpage and install it I also have note installed so I believe to install the latest version of view seal I believe it's NPM let's see here I think it's NPM install tak G at view / CLI like this but I already have installed so now I can go view crate and I'll do you know firebase app something like this and once I hit enter it's going to ask me a series of questions so I can go manually select features I'm due Babel for this one I'm going to CSS preprocessor view X we might use that in the future one router I'm not going to do typescript oh I love typescript I'd normally do it but in this one I am NOT going to use history yes I'm gonna do node with sass and I'm not gonna pick any error prevention and lint on save dedicated files I'm I save it future projects now and it's gonna go ahead installed and when this is done I'll come right back to you guys okay so everything's done so we're gonna go ahead and change the directory there and just run it actually what we want to do first is go into the directory here and I'm going to do a few more few more files I want to install in here because I want to use firebase so we're gonna do npm install and if you guys are like yarn fine just do it with yarn it just works the same way NPM install and I'm gonna do Axios and I'm gonna do firebase and I think that's all I want right now and since I'm in the latest version I'm using no 10 here I don't need a putting thing but you can put - - save if you like and that'll make sure it stays into the package.json and this does just take a moment okay cool everything's installed here so I'm gonna go ahead and just minimize this terminal I have open and I'm gonna look at my project here so I'm going to the front end and here it is and let's just make sure it runs no npm run serve and oh here's our project was ready from firebase so now we can use this information which we'll set up in a second and we'll just go to our localhost and 8080 which I through these defaults so here's the default up and running app that we need so I want to do a couple of things first I want to UM make some edits to our main J's file and this is the file that we're going to use - that we're gonna use to go ahead and and install our firebase tools as well as Axio so first I'm gonna start with access and by the way I have a little bit of clicky keyboard apologize from that and I'm install Axios and what I like to do is I like to put this on the prototype for view that way I can use it without thee throughout that oops config I want to do prototype dot X EOS and I'm going to put that on Axios and what this is going to do is I'm gonna be able to use Axios throughout the app wherever I'm at without any issues and I'll show you later how to do that now we want to also use firebase so an import firebase from the firebase app and this will give us access to firebase and what I need to do now is get the configuration for firebase and so I'm inside the firebase dashboard here and what I need to do is click add app and ask me if I want I owe s Android or web click web here I'll call on a web app I'll call it view app it doesn't really matter and I can do any firebase hosting I'm gonna click register app and this should give me a big of a firebase config which we'll need to use and initialization so I'm gonna just copy and paste this right into our app here and I'll make it Const and yep that should be it that should initialize everything that we need for firebase now one thing what we can do which makes things a little nicer is I've done this in the past is well let's do this well we'll get back to this in a second let's just see if this firebase works so now we have firebase initialize we have Axios initialized and we need to create a few components so I'm gonna go into our views here and I'm just gonna add a few new file so I want to create a login view I'm going to create a new register view and a new secret view and these are all going to be sort of simple I also have this v base which is a snippet that I've used it's one of the extensions so I can just really quickly create something so I'm just to make sure this works I'm call this login and once again I'm gonna do a V base here let me see that register here and then this will be called secret so we have all three of these in here and now we want to add it into the router so I'm going to go to the router here and I'm going to create three new routes so the first one we're gonna have it under register I will do login first name login and we're gonna create a name called log in here and we need two more so we'll just copy and paste those real quickly and we'll call the next one register which we'll put right here register and so the call will register and then finally the last one will be the register login and secret so great a secret okay so now we need to import all three of those into here because it's obviously there I'll give my stairs so we can just do it real quick like this this it'll be secret secret and the other two would be login login and this will be register actually I think these are lowercase and this will be register cool now let's go to our main file actually not our main file we're gonna go look in our app view file and here's where the all the links are at the top and we right now we had just have home and about but I want to add in delete the home for now I'll leave it about and I want to add in a login let's delete this will be login and the next one will be secret all right and the last one will be register we can put this move this later somewhere else I just want to make sure all everything works here or just dirt all right so I got all three in there let's see what happens and it's give us an error that log in view does not exist actually I did leave them capitalized I guess I wrong there so I'll go back to the router those are actually are capitalized okay save it now it's saying it can't find module not found can't resolve secret yes there it is all right and just to make them look a little bit nicer in the app view file I have all these about login secrets in these router links but I think what I want to do here is I want to add this let's see what it looks like now okay so that makes a little nicer about login secret register okay so let's start with register so in our register we'll need to create a email and password but first we need to go back to our firebase here and now we have our app but we don't have our authentication set up so if we click on authentication we can go to sign-in methods and we just want to enable the email and password option otherwise we won't be able to do it and I'm gonna click Save there I'm not gonna worry about password list sign-in and it just takes a second to save so outs saving there let's see if we can create some let's see if we can create a few things here now I'm going to copy and paste some CSS this is I'm just doing an air color red I'm just putting some padding on our inputs and our buttons and now I think I'll be ready to just create what we need create here so I'm going to put a class error here and this is going to show an error message which I will insert in in a minute and I'll do VF error so I want to create date data and in our data we'll return some values here and these are values we're going to be meeting in our template so we're gonna have email we have a password and we're going to have an error it's that way our users know if there's an error all right so now that we have those three we're gonna create a form and in our form we're simply going to do a submit and we're going to prevent the default so it runs the pressed so once again now we need a message and in our methods we're going to create a pressed method right now we'll just have it alert that's submitted so this is saying every time we do the submit through the form that it'll will run the present pest and it will change the default action on there we will just do register here and now we have an email class and we're gonna have an input type of email and we want to now bind the email so whatever is typed in will be bound to this email here and we'll put placeholder of email and then the other one we want is a div of type password and as you guessed it its input type password and we're going to put a V model of password and then placeholder password as well and we're gonna have it button type equals submit so that will be submitted and it'll be I the name will be on the register okay so let's go back okay so make sure this will save here I'll click here save cool now we have our email password enabled so let's just close this example okay so here we are let's go to our register cool that's what's supposed to look like we look inside the console to make sure there's no errors there isn't and here's our button so if we just hit enter it submits it perfect okay so now we need to actually have it do something when you've hit pressed and this is where the firebase console will come in handy the firebase what were you doing with them with inside the firebase so we're gonna import in star s firebase from firebase slash app oh and by the way in our main J's file we have this firebase config and we have firebase initial app but I forgot to oh we have it in here I thought for a second I forgot it but no it's in there yep so that looks good we'll go back to our register so we'll import star as firebase and then it recommends to in the official documentation that you do you do this import firebase off afterwards so it only got that gets the off out of there and so now when we do this pressed we're going to run this firebase command and we want to do off and we're going to do something called create user with email and password and we're gonna pass this email in and this dot password that we got from the v-model and at that point we could do a couple things here one is I can make this a sink and then I'll Const I'll Const a variable out of here so this would be if it succeeds that is so be a user and then if everything's okay at this point like well what will should do is we'll surround it by a try-catch block like this and so as long as this works okay then we can do with this dot router we can do replace and then we'll put name and then this will just go to the secret so this means if we login if not we're gonna console a log error and we can also take a look what's inside user so can also log user here so if it if it logs incorrectly that it registers correctly it automatically logs in if there's an error then it will go to the catch so let's see if we got any errors here looks okay so I'm going to do bla one two three at gmail.com put in some password hit register cool I went to the secret and I'm getting the user back here I don't see any errors so it looks like it logged in okay but now I have no way to log out so let's fix that so let's go to our component so I'm going to create a new component I'm going to call it top header got view and what this components gonna do is it's let's actually rename it top header and what this what this is gonna do is it's I'm just gonna be a really simple header at the top that all it displays to us if the user is logged in or not so we'll do logged in and I'll do a span I'll do let's go back here so we want to create a new data object which has one option in here one variable that's going to return this logged in and we'll have it default is false so we'll do if F V F which is one of the normal directives that you can do inside view if it's logged in then we're going to put yes here otherwise we'll do the V else else and we're just gonna put no and I think we want to do a button here at the bottom so much surround this in a another div this buttons gonna be sign out and we're gonna create a message called sign out so cool we got data so let's let's go ahead and create this method so once again we'll create this methods object and I'll create one called sign out and now here is where we're going to put our sign out logic so as you guessed it we need to grab the firebase again we're an import that in so I'm just going to grab that and we oops I'm gonna open the register view I'm just going to copy and paste that oops I am making it much smaller yeah and we go back to the top header and I'm gonna paste it cuz that'll make it a little bit easier and to do a logout we do firebase once again off and this time I believe it's called sign out sign out and once again we'll make this an async method and we'll lots of data await this and if it succeeds then it should log out so I'm just gonna assume that if it doesn't exceed it'll throw some exception once again and probably need to put it in a try-catch block er and we'll just put this right here and if this works okay I'm just going to console.log the data and then I'm also going to do this step router place and I'm going to go to the login page alright so let's see here if i refresh it oh I gotta obviously add it somewhere so I'm gonna go to the app view and I just want to put it right above here so what we need to do is we'll need to create a script tag and inside the script tag we're going to have a components array and this is how we declare our components inside our view apps by the way I'm going pretty fast here at any time please feel free to pause this and/or you can look inside github to follow along that way I'm going to call it top header and we're going to import in the top header and to do that we got to import top header from and this is going to be in the dot slash components slash top header there it is and this is not this is a object here ok now I should be able to put the top header right here and refresh up invalid component name 0 oh there is a slight problem here let me check what's happening I've had I had this happen to one other time um oh this is not an array this is just an object there we go cool so now we have a button that's a sign out says log didn't know now this right here isn't going to change at all so let's go back to top header it's always gonna say no because this logged in is set right here to false but we had never at any point change it so we can use one of the lifecycle hooks like you know like created and then we can look for the state change to then update that value so actually instead of using create I'm gonna be mounted so once it's mounted we'll change it so well you know let's let's do create it first see how that works so now they created we're gonna use the firebase again and we're going to use the auth and then this time we want to do the on auth state changed which is right here and that's going to produce a user it's actually introduced a callback which is right here so I can do if user that means it's there then I can then I can put this logged in actually what we could do here well we'll make it easier we'll just do it the simple way this logged in will equal true and then else this logged in equals false you could probably do something like this to logged in equals user like that so let's see what happens when we do it like that and we save it and it says we're logged out but we don't have any way to login we just have a way to register login doesn't do anything so let's add that login component so we're gonna go to the login and it's gonna be look really similar to what we did for register in fact if we were really clever we could try to extract the input the email and the password from register and then reuse it in the login but just for the sake of simplicity we're just not gonna do that here we're gonna do we're just gonna kind of duplicate some code here essentially so submit prevent because this is a little different so we're gonna do submit prevent class this form here we're gonna obviously prevent the default and then have it equal to press so once again I'm going to have an array of methods where we create a pressed here and I'll just do to lurk hi for now and we're gonna have a login div and inside that login we're gonna input which is gonna be type text it should be technically email placeholder will be login and then once again we're gonna have some data properties here we return I think we just need a mail password and err email password and error and we'll make sure to common air and so I'm gonna copy and paste for my other monitor since we've kind of already seen some of this everything we need so I'm gonna do that real quickly okay I think that's all we need we have two forms there there we go so what this is saying is we have this login we have this password we have a button that says login we put type equals submit I think it defaults to submit but we'll put type you'll submit there we have an error right here if we have any errors and then we have a router link to register so refresh it cool there it is and just like the other one I'm going to copy and paste some simple CSS CSS to make it just really big and easy to see on the screen as you guys follow along cool so they're these big registered login so let's see we don't have this press though so we need if you look right here we don't have anything happens when you hit pressed so let's go back to our register we're gonna copy this go back to the login so there's our firebase and this time we don't want to just hit we just don't want to so and alert we actually want to try to log in so to log in we do firebase once again off and then there's a message called sign in with email and password this one right here so we're gonna do this study mail this dot password and I'm going to make this a sync again do my own try-catch block I know I could just use dot then but I kind of like try caches and then I'm gonna put this here and I'll also log the air I'll wait this and if at all is well I'm going to also log the valve and then I'm going to move the router to replace it to the name secret so if it logs in correctly it goes to secret ok so let's see if it all works so I think I have bla which I can look inside my YouTube console here since I had this enabled I can look at my users so blob plus one two three let's see if I can log is hint login is him so I'll do blog plus one two three at gmail.com and I'll put my password in Oh invalid email so did not like that email that we just put in let's see here wonder why so if we go back to this blob plus one two three at gmail.com and maybe we need to set this up correctly oh you know this login right here I forgot to put a V model here so I'll put V model email there we go so let's try that again I'll do ba + 1 2 3 at gmail.com lock in cool that time it worked and it it went ahead it says login yes at the top I'll make that a little bigger and now we are on the secret so if we actually refresh it though you'll notice it just for a second there it switch to no and then it switched to yes so that's not great so we let's do a couple things let's add a quick route guard to fix that well first let's show you one other thing so if you go and click sign out and you click on secret you can still reach secret and we only want the secret route to only being seen if you're logged in and so that's not what's doing right now so if we if we go to the router the index file here and I'll just hide this bar you can see right here we here's our router but what we can do over there in this in this file here is we can we can go ahead and create this route guard which let me take a look here there should be I'm just looking it up ok so so the easiest way to do that is on the route that we don't want anyone to access we can add this meta tag so we do this meta right here and then if you put in an object so I'm going to put requires off we can name this whatever we want so we call it requires off and now we can use this inside our route guard and we're going to do is right before the default router I'm going to do this router and I'm going to do something called before each and that's going to give us a a to from and the next and this is an arrow function here so this is our callback so every time you click on a route or your route tries to load this before each will try to run so what we can do is we can check to see if the route that we hit requires off so to do that we can go to and then type in matched and then some and then this is another callback record this is another function here arrow function record meta that requires off and so what this is saying is that it's going to take this to which is this is where they're going to this is where what route you're coming from and then this is like the next this will it's basically continues on to do what it needs to do next and you can also pass it a different location if you don't want it to go to the next place so you can use this to dot matched to figure out and do dot some and you can basically get the record so it's this is like in a rain this is like a method that iterates over two matched and if any record equals true then it returns back so this is saying if if this route has this meta in it then it'll pass and then this requires off will be true so then we can also we can grab the firebase once again and see if that user is logged in if you're logged in or not so I'm gonna copy and paste like just copying hoops what did I do let me go into the login and I'm I grab this import here and then go back to the routes and I'm going to paste it in because you need firebase here and now I can do is authenticated and I'm gonna grab the firebase let's get off and I can just go current user and this will return back the current user if it exists and now I can do if it's required auth and is not authenticated then we want to just route someone back to the login page so we can do this slash login however else if they are logged in or they aren't it doesn't have required off at all then you can just do next here so let's try that so we're back to the screen we're not logged in if we hit secret see nothing happens and if I put type in secret here then it would go ahead and go back to the login page okay so we're almost there so we if we can now log in again which are blah 1-2-3 at gmail and we could log in here we're now in our seeker page now there might be something you might notice here if i refresh the page here it saw i went back to login it didn't stay in secret so when this ran this firebase oscar n't user thought the user was already wasn't current it came back as null so it redirected back to login here and obviously we don't want that because they are logged in but there's some sort of delay between this getting updated and when you're fresh the route I've heard of I've looked online and saw a couple people some people actually looked we're storing in local storage like some indicator that the user was logged in and then every time they refresh the page this before each would check local storage to see if that value was inside local storage because that would be more currently up-to-date than this current user here but I found a little bit of better way but you're violent mileage may vary if you go to the App dot view you can actually um maybe not sees me at the end the app dot yeah I think it's the main that's if it's the main.js file you see this new view here this is basically what boots up the complete app when it's done so this completely boots the app up but what we can do is we can make sure the of the off change and firebase fires first before the app is loaded and that way we know we can guarantee that the off state change is correct so if you do firebase off and then do on earth state change like we did before like we did in the route guard now we can do something like this where if not the app you see here I created that app variable we can now have app equal and what we want to do is we're going to grab this whole thing right here so we're gonna do this this router right I'm gonna just do a little quick housekeeping here I'm just going to move this over and so this is saying that if the firebase if you don't have this app here is not there then go ahead and just create this new app right here and we'll just console.log user and see if it's logged in or not and so what this will do is it'll make sure that the Austin state changed fires before the app is loaded and if we do that now if we refresh the page I can log in again as my bla 1-2-3 at gmail.com I hit login and now I'm on the secret page if I do a refresh I'm still in the secret page so it didn't automatically log or it didn't think I was logged down and send me the login page which is perfect so hey clicks sign out I'm back in the login page and I can't to the secret so that is the basics of getting firebase up and running on your view Jay s app now there's one more part that I'd like to show you and that is how you can grab the firebase token and pass it to the backend and what's cool thing about that is it doesn't matter if you're using the firebase if you're using the firebase hosted or if you rolled your own Express app or Java app or whatever you can use the firebase admin tools in the backend to check the verification of the token this is added JWT token to see if it's valid or not and if it's not valid then you can then tell back to the front-end that the token is not valid and that they're unauthorized and you can use that as a way to only give authenticated users on your app information earlier when I was showing you the app it's actually connected to our back and I think that is enough for today we've gone over a lot but in my next video I'd like to show you how I did the authenticated token what's cool too is firebase will automatically refresh the token - so there's a one hour limit on the Refresh token excuse me there's a one hour limit on the ID token for firebase but there's a refresh token that will automatically refresh that ID token so that way you can be like forever be logged in so that's all I'm going to show you guys today if you have any comments or questions leave it below and like I said on our next video we will create the express back-end using typescript and do the verification of the firebase token thanks

Channel: Program With Erik

Views: 48,684

Keywords: vue.js, vuejs, vue firebase, vue.js firebase authentication, firebase authentication, firebase login, vue js firebase authentication, vue, firebase, authentication, signup, signin, tutorial, full project, Program With Erik, Erik Hanchett, Program With Eric

Id: XtbYBoKb2zY

Length: 41min 1sec (2461 seconds)

Published: Mon Nov 11 2019