Vue.js & FireStore – Build & Deploy

Vue.js Firebase Authentication – Add To An Existing Project

[Music] hey what's going on guys so about a month and a half ago I created a series called view Jas and fire store build and

deploy and we built an employee manager which is basically a crud application that uses the fire store platform that that is part of firebase and I've got a lot of requests from viewers and from

patrons asking to implement authentication for this application and I know I mean it's not a huge you know hugely popular series but I really want to fulfill those requests especially

from the patrons so we're gonna do a video where we take the app that we built and implement view j/s and firebase authentication so that we can login and register now

there's a couple ways that you can watch this video you can just watch it and see how its implemented you can start from the very beginning with with part one of the series and go through that if you

haven't already or you can just do what I'm gonna do in this video and just pull from the repository and get the current application and then just add the authentication to it okay so if we look

in my firebase back-end here you can see I have two users created I'm going to use this brad at gmail.com this is the apple if the application will be building this is after we add the lot

the authentication you can see we have a register and login link and then I'm just going to go ahead and log in as that brad at gmail.com user and it's just gonna say you're logged in

as Brad gmail.com and now it's gonna redirect us to the dashboard okay so this is the stuff we built throughout the series we have the list of employees and their their department we can view

each one we can delete them we can we can also edit them if we go down to this edit icon here we can add them if we hit this plus icon so it's just a crud application but we're gonna implement

authentication you can see we have the logged in users email up here and we also have a logout link and if I try to go to slash login while I'm already logged in it'll redirect us back to the

dashboard same thing if you know if I try to go to the dashboard while I'm not logged in it'll redirect us to the login page okay so it'll show you how to implement authentication how to create

routing guards and view j/s so if you're interested in view I'd highly recommend watching it and following along so let's go ahead and get started all right guys so the first thing we're gonna do is

create our firebase I already have the dev one here but I want to start from absolute scratch so you can follow along so if you already did this and you are and you still have the application on

your machine then just use that but if not and you're starting from scratch let's go ahead and create a new project and just gonna call this M manager and we'll create this looks like firebase

added this nice little spin preloader thing to their UI seems slower though so let's click continue now we have our back-end so from here what we're gonna do first of all is go to authentication

and you actually have to enable authentication so if we say set up sign-in method we want the email and password method so I'm going to click the little pencil icon and just enable

this okay that way we will be able to sign up and log in with emails and passwords next thing I'm going to do is just create a couple entries in our database and create our collection so

we're using cloud fire store and again if you have the application already you already went through the series you don't have to do this alright we're gonna go ahead and start in test

mode and enable ok we'll just add a couple records as well all right so let's go and add a collection and we're gonna call this employees and we're gonna have an employee number or an

armed sorry an employee ID employee underscore ID which is gonna be a string and let's say zero zero one okay we'll add another field this will be the name I'll say John Doe let's add another

field this will be the department and we'll say IT we'll add one more field of position and this will be lets say server admin ok so we have a collection now called employees and we have one one

record who is the John Doe employee so let's add one more I'm going to click add document and add one more employee so this will be lets say employee ID employee ID will be zero zero two and

let's say name we'll say Mary Williams and it's add another field will say departments and department will be sales and position I'll say Sales Manager all right so let's add her and

now we should have two users or two employees all right so our back-end our firebase back-end is all set so now what we want to do is grab the application of course if you haven't already built it

and still have it on your machine this is the git repository for it it's view fire store employee manager and I could just clone it with the git but I'm just going to download it

just download the zip file to my desktop okay and then we'll just go ahead and open that up and let's extract the folder from it and we'll use that as our application folder so now what I'm going

to do is open this with vs code of course you can use whatever a text editor you want and we have all the files over here now we're gonna have to run npm install to install all the

dependencies so what i'm gonna do is open up my integrated terminal here of course you can use whatever terminal you want i'm also using git bash and i'm gonna just run npm install alright so

that's all set now what we want to do is just run the dev server so we'll say npm run dev and it should start up on port I believe it's 8080 yep so we'll go and open up a browser and let's go to local

host and port 8080 okay so if you don't already have your application set up you're gonna see this you're not gonna see your employees because we haven't connected our database our firestore to

the application so to do that we're gonna go back to our firebase and just go to our project overview and click on this icon here add firebase to your web app and we just want to grab everything

that's within this config object so we'll just copy all of that and then we'll go back to this code or whatever you're using and then we're gonna go into source and components and I put

everything in this firebase config J's file so I'm just going to replace this because this is the old information that database doesn't exist anymore so I'm going to paste all that stuff in and

save and now if we go back to our application you can see there's john doe and mary williams alright so we have our our application up to the point that that we had it in the end of the series

so just to test it out we'll create a new a new employee let's say Sam Smith Department IT and we'll say developer ok we'll go ahead and submit and there we go alright so everything's working now

we're gonna move on to the authentication so the first thing I'm gonna do is create a login and a register component cave UJS is component base just like every other framework and

we're gonna create those so in the components folder let's create a new file called logon dot view alright now we're gonna put our template in here and you guys know I hate copying and pasting

but this is just pure mock-up here so I'm gonna paste in the login form the materialized CSS login form we'll just go over it real quick so we have a div with a class of container to keep

everything in the middle we have a row we're using the grid system it's going to be stacked it's going to be 1212 column div on mobile devices on small screens and it's gonna be 8 columns on

medium screens and higher with an offset of 2 so it'll be pushed into the middle and then we just have a div it's a card panel I also gave it a class of login and it's going to be green with white

text and center then we just have our h3 we have a form with two fields email and password I'm using the materialized icons which I think we still need to add to the index.html in order to use but

we'll just have the little icons as well and then a simple button with some materialized classes to make it grey and lighten with black text alright so I just didn't want to go through and type

all that in now for the script of our module let's put in our script tags so we're gonna say export default and let's give it a name name of login and then we're gonna do data

which will be a function and we want to return for now I'm just going to return nothing we're gonna add more to this later I just want to get it displayed so let's save this and now what we'll do is

go into our router so we want to go into the router folder and then index J s and I'm gonna go right below the home right here and create a new route okay actually we

have to bring in the component first so let's say import log in from and then we want to do at slash components slash login ok and I just want to add semi-colons here I'm using prettier so

when I save it'll automatically add semi-colons and then for the route let's finish this we'll say path path is going to be slash login and the name is gonna be login and the component is gonna be

login ok actually the name will be a lowercase L so that's that let's save it and let's see what happens if we go to our login route let's see so let's open up our console see what's going on route

config component for path logging cannot be a string ID using actual component instead what did I do login cannot oh I put quotes around this alright let's try that whoops wrong

thing ok so let's try and go to slash login and there we go now the icon isn't showing up because we need to include the material icon script so I'm going to search for material icons CDN and it

should be on this page somewhere right here so we'll grab this link and go back to vs code and let's go to our index.html that's in the root and I'm just going to put this right below the

materialized CSS include and save that and now we should be able to if I reload nope why isn't it showing oh there we go all right um let's see now these labels those should be white so I think I

forgot something if we go back into the template you had a label right here we won't just want to add the class of white text same thing here okay and that should you know what let me close this

other browser okay so now we have our login form now we might as well create the register form it's gonna be pretty much the same thing just gray so what we can do is just copy

we'll just copy everything here and create a new component file called register dot view and we'll paste that in and we'll change the h3 to register and let's also change and say we'll

change this from green to gray and let's do a lighten dash for okay and we also want black text and we want to get rid of this white text on the label now and we'll also

change this to register let's go down to our script tag let's change the name here to register and save and then we're gonna add the route just like we did for the login so we'll just take this and

copy it down and let's change this to slash register this will be register and the component which we need to bring in will be register all right so let's go up top here and we'll go ahead and just

copy this down and we'll bring in register sorry about that let me put this on vibrate alright so this will be from components slash register so now that route should work

as well hopefully so let's try it out if we go to slash register there we go alright now let's add these is navigation links so we're gonna go to our navbar component which is right here

and we need to add a bunch of stuff to this so under the let's see we'll go right under the router link here and we're gonna have a ul with the class of right because we want our links to go to

the right and we want some list items and inside these list items we're gonna have some links but remember we need to use the router link okay so we'll say router – link and this

one is going to be to the dashboard so we're gonna give it a two attribute and it's gonna go to just slash and we'll say dashboard alright and then we'll copy down let's do yeah we'll do two

more so this one will be login and it'll go to /login and this one will be register all right so let's save that see if they'll show up okay so now we can switch between login and register

good and we can see the dashboard but don't worry about that we just want to get the actual login and sign up functionality done first and then we'll hide the dashboard and all that all

right so now what we need to do is go into let's do the register first okay so we'll go into our register component that we just created and we're gonna go down to where our script is and first

thing we want to do here is right above the export default we want to import firebase so that we can use it so we're gonna say in for import firebase from firebase okay and then for our data

we're gonna have an email and a password property so we're gonna say email just set that to nothing by default same thing with password and then underneath the data we want to put a comma and we

want to put methods okay so we're gonna have a register method so that'll be function and I'm gonna pass in an event parameter here and then let's just do a dots prevent default

and what we want to do here let's actually just do a console.log for now so I'll say console.log register alright now in order to call this we want to go up to our button and we want to add in a

V on directive so let's say V – on so we want to say on click we want to call register and we also want to bind the this email and password to these input fields so we're gonna use V model for

that so on the input field for email it's do V – model and email and if you watch the series this should be nothing new and then same thing with the password so V – model password okay and

that should do it now we should be able to actually submit to this register method so let's save that let's go back to Chrome and go to register and we could just put whatever in here and

register and you can see down here we're logging register alright so now what we want to do is implement firebase so we'll get rid of the console log and what we want to do is call firebase dot

or dot and then we want this create let's see does it pop up for us yeah create user with email and password that's a very long function name and then we want to pass in this dot email

which is our email property and this dot password which is our password ok that's going to return a promise so we want to do a dot then and inside here it'll give us a user I'm just going to use an arrow

function here and then once it gives us the user back I'm just gonna do a simple alert and we'll put some back ticks in here and we'll just say account created four and then we'll put in our

variable we can use we can take that user object and we can use email so user dot email okay once we do that we just want to read it we want to basically reload the page well actually you know

what you'll see why why we have to just reload later but for now I'm just gonna I'm just gonna redirect okay so I'm gonna say this dot router dot push and let's go to the let's go to the homepage

so slash or the dashboard alright and then if there's an error we can we can go ahead and actually want to go underneath I want to go right here put a comma and say error so if there's an

error we will alert the error message like that alright and I think that that should do it so let's save and I'm using prettier so when I save some things will get changed up sometimes it's not what I

want but for the most part it's it's a pretty great extension so let's try this out let's go to register and let's put something in here so I'll do Brad let's do Brad at yahoo.com not a real email

address and then I'll just put a pass or it in and register account created for Brad at Yahoo and ok and we get redirected so what it did is it created an account and it actually logged us in

now if I go to my firebase backend then I go to authentication you'll see right here Brad a yahoo.com so it's that easy to to register all the stuff that we just did creating the form and all that

that that's all for the UI but the actual registration is this right here so pretty simple but I like to do things you know from from beginning to end so I didn't want

to just show you guys this I want to actually do a practical project alright so now let's do the login so what we'll do is let's go to our login dot view file and we can actually copy what we

didn't register cuz it's very very similar so let's see let's grab data and the methods which end right here so I'll copy that and put that in the login I'll just replace this data right here and

paste all that in and again we're gonna have our email and password and we need to go up above and do the same stuff so for the button we want AV on click so V on click equals and it's going to be a

function called login and then we also want to bind our pass our email and password so we want to go to the input and do a V model equals password and for the email the model equals email okay

and then down here let's change the name of the method to login and instead of all we need to bring in firebase as well okay so instead of calling off dot create user with email and password we

want to call off dot sign-in or is it sign-in with email and password and then again pass in the email and password gives us a promise gives us the user we're gonna say instead of account

created we'll say you are logged in as and then that user okay and then we'll just push to the dashboard so that should work so we'll save that and if we go back let's go to login now let's see

what happens if I just try to log in so we're gonna get the message directly from firebase so it just says the email address is badly formatted if I were to put something in here that doesn't exist

in firebase like test to test com the password is invalid or the user does not have a password okay if I were to put something that exists like Brad at yahoo.com but have a wrong password will

get the password is invalid same thing but let's let's do the correct password and it says you are logged in as Brad at Yahoo okay so we are in fact logged in so now what I want to do is create a log

out button so let's go back to vs code and let's go to our nav bar and let's see up here let's go under the register and create an Li and then we're actually gonna put a button in here so I'm going

to say button I'm gonna give it a class of BTN and black and we'll just say login I'm sorry log out and we want to add avión directive here

in the button so V on click is gonna equal a method called logout alright now we have to go down here and create all of our stuff our script tags and we need to bring in firebase alright and what we

want to do is export Explorer default and let's say name navbar basically before it was just a dumb component and had no functionality or anything it was just a display but now it's gonna have

some functionality so for the data we want to say return and there's gonna be two pieces of data one is is logged in because we want to be able to hide certain navigation items based on if

we're logged in or not so we'll set that to false to start with and then we also want current user and we'll set that to false okay and then what we want to do is create

our logout method so I'm going to go under the data and say methods so we'll do methods and we'll have logout okay so to logout we're gonna take our firebase object and we're gonna call dot off and

then we're gonna do dot sign out and then that'll give us a promise so we need to do dot then and inside here I'm just gonna use an arrow function and let's say this dot router dot push and

we'll go to our login so slash login alright so let's try that we'll save and let's see all right so if I reload if we logout it should take us back to login now we can still go to dashboard and

everything we need to create a guard so that we can't do that so that we can only go to the dashboard and any other page really if we're logged in so let's go ahead and implement that so to do

that we're going to go to our router which is the router folder and XJS and we want to import firebase here all right and then any routes that we want to protect we want to add a meta

object to so for the home let's say meta and we're gonna say it requires off and we're gonna set that to true okay anything that we want to protect where you have to be authenticated we want to

add this too so let's copy this let's also add it to new employee view employee and edit employee okay so we want that for all of those now I also don't want you to be able to go to login

or register if you're a guest or if you're not logged in so what i'm gonna do is i'm also gonna paste it in paste meta in here but i'm gonna change this to requires guests okay so we'll do that

here as well so requires guests okay now that alone isn't gonna do anything we need to actually create our guard so let's go down here we'll say now guards so the way that this is set

up we're saying export default new router and we don't actually want to do that now because we need to add a method or use the before each method of the router so we need to put router into a

variable so instead of exporting it here what we'll do is we'll say let's router equals and then the new router and so on so that way we can go down here and we can use that router variable and we can

now call dot before each okay now before each takes in a few things I'm gonna use whips I'm gonna use an arrow function so it takes in two from and next okay so will use an arrow here and then

basically we want to for required off-guard so to do that we can say if and we can say if – we can take that to object which is right here and it has a method called matched so –

dot matched dot sum and then this gives us a record so record and I'm going to use an arrow function here and then we're gonna say record dot meta dot and then whatever the guard was which is

requires off yeah we want requires off okay so if this is true that means that the route requires authentication so now we want to check to see if we're actually logged in to firebase okay so

we're gonna say check if in this case if not logged in so we can do that by saying if not and then use our firebase object so firebase dot off dot current user okay it's as easy as that to get

your user from firebase firebase doth current user we're saying if not okay and if it's not then we want to go to the login page and we're gonna do that by calling next okay so right here we

have this next to call but we want to pass in an object with a path that we want to redirect to which will be slash login all right and then we're also going to add a query here which is an

object and we're gonna say redirect to dot the full path okay so that what will happen is if we're not logged in it'll redirect us to the login okay and then we want an else to this right here

else meaning that we are logged in then all we have to do is proceed to the route by calling next okay so that's it now the next thing I want to do is test for the requires guests and that's gonna

be the opposite it's gonna it's going to redirect us if we are logged in okay because we don't want to go to the register or login page so we're gonna do an else if right at the end of this so

else if and then we can basically just let's grab that and paste that and except we're going to change it now to requires guests like that so if it requires guests then let's see

we can actually copy what we put in here yeah we can copy that and paste that in except now we're going to check to see if the user is logged in so check if logged in and we'll remove the

exclamation so if they're logged in then we want to redirect them to the dashboard to slash okay else then proceed to the route now if there is no requires auth or requires guests we want

to call next so after this else if right here which ends right here we'll just put a simple else and we'll just say we'll just grab this right here and say proceed to the

route okay so hopefully that makes sense I don't know why this comment is down here so just to reiterate if it's gonna check for requires off if the route has

requires off attach to it it's going to make sure we're logged in if it's not then it'll redirect us to the login page if it has requires guests and we're logged in and we try to go to that which

is login or register it'll redirect us to the dashboard if it doesn't have either one then it'll just proceed to the road so hopefully that that makes sense now

the last thing we need to do is actually export the router ok because remember we change the export above to just assigning it to a variable so now we want to explore it default router like

that ok so hopefully that works so now let's go to our application and let's see if we go to dashboard so we're not logged in right now I go to dashboard let's try to go to it manually we can't

now let's login ok so we're logged in ok and now we're in the dashboard so it seems to be working and we should be able to go to all of our other routes as well because we are logged in ok if I

log out and I try to go back I'll just click on it here it doesn't let us if I try to go to slash new which is the new add new employee page I can't do that either so everything is now restricted

now let's try if we are logged in what is it Yahoo let's make sure that we can't go to the login page okay so if I say slash login we can't do it if I say slash register

can't do it alright now we do have another problem here if I were to now we're logged in if I were to reload it actually does take us to the login page because it's not checking for the user

before it loads so we actually have to go into our main J's file which is right here okay where it's actually initializing view and we have to check for the user or not check for the user

but check to see if the authentication state has changed so we're gonna do a couple things we're gonna bring in firebase I know this this is kind of a lot to do but it's it's necessary to get

the functionality that we want so we want to bring in firebase now you also need your firebase config or initialization I should say which is in this firebase init file okay this is

where we initialize the app so we're also going to bring in that file so let's do imports and it's in the components folder and then it's firebase and knit okay so now what we're gonna do

is basically wrap this in the on off state changed firebase method so let's do it let's just do this up top first so we're gonna say let app we're going to initialize the variable called app and

then we're gonna say firebase dot and we're gonna call on auth state changed okay and then we're gonna pass in a function I'm just going to use an arrow it takes a user

okay so we'll go like that and then we're gonna check to see if not app so we're gonna say if not app then we want to set that app variable to our view initialization so this right here so

what I'll do is just copy or I'll just cut this actually we can get rid of this so I'm going to cut that and put that in this app variable now okay and then I think that that should work so let's

save and then let's go back to our application and let's say we're logged in right so if I reload now you see it doesn't go back to the login screen we're still in the the dashboard which

is what we want if we go to another page and reload we stay in that page so that fixed that alright guys so we're almost there now what last thing we need to do I'm pretty sure it's the last thing we

need to fix our navigation we're logged in right now so there's no sense in having login and register and if I log out we don't want logout and dashboard okay that doesn't make much sense so

let's fix that so what we'll do is go to our nav bar which is right here and let's see remember we have the is is logged in and current user what we want to do now is call the created method our

created function which will run right when the component is created so in here I want to test to see if we're logged in so we can do that we brought in firebase already right here so we can say if

firebase a firebase dot off dot current user that means we're logged in so if that's true then let's say this dot is logged in this property right here let's set

that to true okay let's also set this dot current user equal to firebase dot off dot current user but we only want the email this will give us the entire object I

just want the email and we'll put it in there okay now what we can do is we can go up above to our lengths and we can add a directive so for the dashboard we'll say V if you'll say V if is logged

in okay then show that link this is the login link here so we'll say V if oops V – if is not logged in so exclamation is logged in then we want to show that login link same with the register so is

not is logged in and then the logout obviously we want to show that if we're logged in so that'll be is logged in okay so let's save that and if we go back you'll see now the logout link and

the dashboard is it's hidden now if I log in okay now notice that the navbar did not change because what happened is the navbar didn't rerender if I reload it we

see it it works but it's it doesn't rerender right when we login and that's remember I said that later on I'm not gonna want to just push to or to redirect I'm gonna want to reload

everything so whoops so what I want to do is go to our login component we're gonna do this in a couple places actually and see where we did the push that is not gonna rerender the navbar so

what I want to do is I want to change this to this dot router dot go and you guys might have a better solution to this or just to anything else and feel free to let me know but this is just the

one that what I what I found worked so if we say this dot router dot go and then pass in a path of this oops this dot router dot path that will actually reload everything rerender everything

including the navbar so what I'll do is copy this and save and we want to do the same thing in a couple other places one of those places is the register okay because we want that the navbar to

re-render there as well so we'll paste that in here and then we also want to do it let's see let's go to our navbar component and right here when we log out we also want to do that save that and I

think that's it trying to think of all trying to think of all the situations we have log in register log out I think that should do it so let's log out all right so now the correct links are

showing if I log in now that's Yahoo okay and there we go so now we have the correct links right away we don't have to reload the page all right same thing if we log out there we go if

we sign up let's do test at test comm and register and there we go so now we're logged in one thing I did forget to do is the email address I want to show that up here so let's go back to

our navbar component and all we have to do is create a new list item so we'll go see where let's let's do it at the top yeah we'll do it right above the dashboard link right here and we're

gonna do for this list item a V if so this is is logged in so if if we're logged in then let's see we're just going to put a span here with the class of email and the class of black text and

then inside here we can simply put current user okay and that current user is cut is this property which is getting filled here with whatever the current logged in user is now I just want to add

a little padding to the right so remember I gave it the class of email so what I'm gonna do is put a style tag in here and we can say scoped and let's say dot email padding right let's do 10

pixels and save let's take a look and there we go so we're logged in as test at test comm okay if I were to log out and go as Brad then that's what shows up there alright

guys so we have successfully added authentication to this app I know this was kind of a long video hopefully stuck with me through it and I will wait to push this to the github repository so

that you guys can actually get the you know the old version of the app without the login and then you can go in and follow along and you can add it yourself alright so thanks for watching guys and

I will see you next time hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one

dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the

patreon link in the description below for more info

In this video we will be implementing firebase authentication to a Vue.js employee manager project that we built about a month ago in a 6 part series. We will pull the initial project from Github and add the new features.

Original Series – Part 1:

Github Master (NO AUTHENTICATION):
https://github.com/bradtraversy/vue_firestore_employeemanager

Github Auth Branch (WITH AUTHENTICATION):
https://github.com/bradtraversy/vue_firestore_employeemanager/tree/auth

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia