Vuex 4 & Firebase Auth Tutorial #1 - Intro & Installation

hey there gang in this series i'm going to show you how to use view x4 with firebase auth [Music] all right then so in this series i'm going to show you how to use view x4 along with the composition api in view 3 to set up a state management system for authenticating users with firebase auth so that you'll have a central global user state that you can access throughout the entire view application but first of all i just want to bring everyone up to speed and briefly explain what view x is and why we'd use it for something like this now before we start i want to make it crystal clear that you'll need to already have a decent grasp of view 3 before you start this course so ideally you'll understand what components and state are you'll know a little bit about the composition api and basically understand how to put together a simple view three application if you don't then definitely check out either my full view 3 and 5 is course on udemy or net ninja pro on my smaller view 3 crash course on youtube the links to both are going to be down below the video also if you're completely new to firebase i would suggest checking out my getting started with firebase nine course first of all too again the link to that is going to be down below the video anyway what is view x view x is what's known as a state management pattern and that's just a fancy way of saying that it's a method of managing global state that can be shared between multiple components in our view applications so let me explain this a little bit more with a simple example so say you have some kind of news website with lots of pages and components so that a part of our component tree might look something like this and on this website a user can log in and out and when a user is logged in they use information like their display name might be used in multiple different places or components in this application for example in a comments component in a profile view component in the avatar component in the navbar links and in a sidebar avatar component as well so that user information is states that's used in various different components across this application right and if the state ever changes for example if the user logged out or changed their display name all of those components would need to reflect that change in states so how would we manage that state and where would we store that global user states well we wouldn't want to define the state in every component that uses it because then we'd have to manually update it in each of those components if it changes so we'd have to lift that state up to a component which is a common ancestor to each of the components that use it in this case that would be inside the root app component and then we'd have to pass that user state down as a prop to any component that uses it now that would be a lot of passing down props to a lot of different places including inter components which don't even need that state they just act as a vessel for the state and pass it down to the next one until it does reach a component that does need it and also if we needed to change that state from any of these components that use it we'd have to emit events back up through the component tree to change it where it's originally defined in the root app components so that all of the other components that consume it can get the up-to-date state as well now this is all kind of okay if you're not doing this very often and it's easy to manage but as your applications get bigger you start to add many more components and this whole pattern starts to get more cumbersome you'll probably want to manage state like this in a more elegant way and that's where vue x comes into play so with ux we'd create something called a store and that store is a place where we define our global shared state in our case that would be the user state then if a component needs to use that state it can just reach out to the store and grab it from there and we can do that from all of the components that use that state so you can see already this is much simpler because we're not having to pass the state down through multiple components as props we're just reaching directly to the store where it's defined from the components that need it also on the store we define functions which can update or mutate the state as well and again we can essentially call and run those functions from any component by reaching out directly to the store and when that happens our store can mutate or update the states on the store and then any component which uses that state will get that updated value so in our case if the user logs out the user state is changed to null then all of the components which use that state will get that updated user value of null so this is the basic theory behind why we'd use vuex in our applications and in this series we're going to use it to manage some global user authentication state along with the firebase authentication service so i've created course files for every single lesson in this series and to begin with we're going to be getting the course files for lesson one which is a starter project now all of the course files are on this repo right here v84 firebase auth so i'll leave this link down below and if you want to see the code or download the code for a specific lesson all you have to do is select the drop down here and then go to whatever lesson branch you want to see the code for so for example if i want lesson 6 code i'd select this lesson 6 branch i could see the code right here and i could download a zip folder of that code as well now like i said i've prepared a starter project for this course which is just a basic view project with a couple of pages and components already set up so we don't have to create those from scratch and to get that you want to go to the lesson one branch and then you can click on this button and go to download zip right here to download a zip folder of that branch so i've already done that and it's right here so what i'm going to do is right click on that and go to extract all and then extract it and then once this has extracted we need to go into that folder and open up this view x4 firebase author lesson one folder and right here you'll see a folder called my blog this is the project folder so i'm going to right click this and open up that folder with vs code so my friends this right here is now our starter project so i do want to give you a quick tour of this project but before we do that i just want to install all of the dependencies first of all because you'll notice that the node modules folder is not present because we got this from github and typically we don't upload node modules to github so to install all of the dependencies listed right here we need to install them using npm install in a terminal so npm install make sure you're in the correct project directory and press enter and that's going to include vuex in itself because i've listed that as a dependency okay and the version notice is version 4.0.2 we need version 4 to allow us to work with the composition api and view x all right so that's going to install all of those for us and then you should see the node modules folder all right then so now let's quickly go through this project so first of all we have the public folder nothing special in here just the html file that comes along for the ride when we create a new view project and by the way we are using view version three you can see that inside the package.json file right here so that's the html file then inside the source folder we have an assets folder and inside that we have a main.css file now this is kind of like a global css file that i'm going to apply to the website and to be honest the css is not really that important i'm not here to teach you about css this is just so it looks less crappy in the web page when we preview it so at the top you can see we just import a few google fonts we have one for pop-ins and one for material icons so we can use some icons in the project we have some base styles navbar styles right here some blog styles and then some form styles as well like i said not that important the main.css file though is imported into the main.js file which kickstarts the application right here so they can be used all right so after that we have our views down here and inside that we have three different views because we have three different pages set up now if we go inside the router file over here you can see these three pages so if we go to forward slash then we get the home component if we go to forward slash sign up we get signup components and if we go to forward slash login we're going to get the login component all right so the signup components and the login component are just simple forms we see right here a title a label and an input for the email a label an input for the password and then a button to submit the form when we do submit the form it prevents the default action and we fire this function handle submits which is down here inside the setup hook by the way this is using the composition api so we have this handle submit function and all that does is log out the email value and the password value which are refs and they're hooked up to the inputs using v model right here okay so that's all we're doing we're capturing the email and password and then when they submit the form we log out the values of those two things at the minute later on we're going to sign the user up here and you can see we return the handle submit email and password at the bottom here so we can be using them inside the template pretty similar for the login only this time the title is login the button says login but it does the same kind of stuff and later on we will be logging the user in here and then finally we have the home view and this is a little more complex we have the setup function right here and we define a ref which is an array of blog objects each blog just has a title and an id then we cycle through those using v4 right here the key is the blog id and then for each blog we have a div with a classic blog we have put the blog title a load of lorem ipsum and then some icons at the bottom so a user can maybe upvote or downvote the article now we're not going to be doing that in this series i just wanted this here to make the design look a little bit better and this is also something that we're going to conditionally show later on as well all right okay then so that is the home view as well so what's next we have the app.view right here and inside that we nest the navbar components and the router view so this is where all the pages are output the nav bar is defined inside the components folder and you can see it's just enough with a title then three different divs right here we have a div which has a link to the home page then we have a div for logged in users and that's going to say logged in as something or other and then a button to log out and then a div right here for logged out users and we have a link to forward slash login and one to forward slash sign up so ultimately a user when they're logged in is only gonna see these links and this one when they're logged out they're only gonna see these links and this one all right but at the minute because we've not implemented any of that functionality a user will just see all of these for now so that's pretty much it for this component now the only other thing you're gonna see is this folder right here called store and then an index.js file inside it and nothing is inside that index file at the minutes this is where we're going to be creating our view x store later on okay all right then so that's pretty much all there is to it so we can now preview this in a browser now just quickly before i do that i said before that listed as a dependency was viewex version 4 right and it is and we've installed that by typing npm install but if you start a project from scratch and these dependencies aren't here if you want to install the viewex version 4 all you have to do is say npm install view x at next and that grabs you the vuex version 4 the latest version okay we've already installed that so we don't need to do that all we need to do is run this in a browser now to do that if we open up the package.json we can see we have this command right here serve so i can type npm run serve to do it press enter it's going to spin up a local development server and give me a url i can use to preview this on and it's right here so i'm just going to click on this and that's going to open it up in a browser and we can see what it looks like right here so pretty simple right these are the blogs in the home components right here and these are the little icons to upvote or downvote then we have all of the links showing in the nav bar at the minute the home which goes to this page then this little thing that says logged in as later on that's going to say something like logged in as mario if i'm logged in as mario and then we have a logout button just nothing at the minute the login form and let me just zoom in a little bit and then open up the devtools so we can see in the console if this works if i type in any old email like so and a password we should see that logged to the console yep and if i go to sign up this is going to do exactly the same thing so that is the starter project right there next up we're going to talk a little bit more about vuex and create a vox store by the way if you want to watch this entire course now without youtube adverts you can do it's all up on the net ninja website netninja.dev you can buy the course for two dollars to get instant access to all of it or you can sign up to net ninja pro and get instant access to all of my courses without adverts as well as premium courses not found on youtube including my udemy ones that's nine dollars a month and you can get your first month half price when you use this promo code right here so i'm gonna leave this link down below in the video description for you to sign up and i really hope you enjoy this series and please do not forget to share subscribe and like the videos that really helps a lot and i'm going to see you in the very next lesson

Channel: The Net Ninja

Views: 6,124

Keywords: vuex, vuex tutorial, vuex 4, vuex 4 tutorial, vue vuex, vue vs vuex, vuex 3, vuex chrash course, new in vuex 4, tutorial, vue, vue js, vue.js, vue 3, vuex vue 3, vuex composition api, vuex firebase, vuex auth, vuex firebase auth, firebase, firebase auth, firebase auth tutorial, install vuex, install vuex 4, installation, vuex installtion, vuex setup

Id: M955GrNXPG0

Length: 14min 6sec (846 seconds)

Published: Mon Nov 29 2021