Live Coding JWT Authentication with Vue, Vuex, and Express

hey everyone welcome back to another web dev junkie video my name is cody seibert and in this video i'm going to be showing you some basic authentication using jwt and also i'm going to be using vue and vue x to kind of keep track of that uh user token on the front end and on the back and i'm using express so if you're new to uh web development and you don't really know that much about how you do authentication or authorization i would definitely stick around because i'm going to be covering that stuff in this little tutorial and secondly this is the live coding so i'm going to probably run into bugs as i kind of code out what i'm trying to build but basically what i'm trying to build you all if i go to i think i have a diagram created that i forgot the show so let me go to my google drive and uh go to this diagram that i created this helps at all i don't know if this helps but basically we want to build a ui if you kind of visualize this in your head where you have a login form the user enters a username and password that is then posted to an endpoint so if you if you look at the numbers one user opens the app two show a login page three user might submit that login form which does a post request to a slash login endpoint so if you know anything about rest this is kind of the convention i use where the method is post at slash login so we're going to have a rest api written in express hosted that's basically going to take that username and password it's going to check if the username and password kind of checks out like if that is an actual user we're not going to be using a database in this tutorial so sorry if you're looking forward to like learning more about or my sequel or postgres whatever we're gonna mock out that functionality and just pretend like we have a set username and password that we're checking against but anyway so when the user posts that login information we are going to then return a jwt which is signed in the back end and we're going to store that step 5 store that in view x and then based on if the user has a login token we might show a different page okay so this this is kind of the path that we're going to be taking in this tutorial i don't know if this diagram helps at all but it kind of illustrates the flow where user sees a login page does log in gets back at jwt stores that token in vox and then you can access that maybe in a header or something else where you can like show the user information so this is what we're going to try to build um let's just go ahead and try our best at building it so on the left here i did already create a view um application so i use the v view cli to kind of create an app and then i went ahead and started importing a couple of libraries so the first library i imported is ux and i have the view view x store created down here with nothing in it and this will come in handy when storing the jade sorry the jwt token or the user object second one i imported was view router and this is kind of useful for if you want to show like a login page or a home page etc and this is declared down here where we basically have a bunch of routes that map the url path to various view components and we set those up down here in our view component and then we mount that in you you know the drill so all this i basically just followed all the documentation on the view router page the view x page the view page like there's nothing special about how i set this stuff up if you just follow their docs they'll explain how this all works and then in our app.view we have a router view which is going to kind of dynamically change what view view we're looking at all right so that was a mouthful of words uh sec the last thing i want to talk to talk about in this overview is i did go ahead and import express and env where we have an express server going with a simple slash endpoint on port 3000 so if i open up a new tab to port 3000 and just this should return me back some data in fact it doesn't because i haven't started it so let me um let me go ahead and start that i think i have nodemon installed maybe not mpx nodemon server.js let's try that all right so at this point uh yeah so this is if you don't know what express is it's a little library to kind of host rest applications using node and this file i mean it's pretty simplistic we just import it we tell it what port to listen to we tell it to return hello world when you hit the base url and then we listen on that poor so this if you don't know this um [Music] hopefully you you do know express if you're watching this tutorial but you're you're gonna probably learn more about this in a second but all right so i'm kind of just going off and i take it in here so what do we need to do right let's actually start building something instead of just talking about stuff so we want to build a login form so if you go back to this diagram step one is user opens the app and then show a login page so let's try to build that out so if i go to my explorer here and add in a new login dot view file and go ahead and scaffold that out we want to build out a login form so i'm just gonna make a div here and put a login inside of it and i want to basically add a route to our view router so that i can go to that login page because right now there's no way to go to it so if i go back to main js which is like you know the main file the entry point to this whole application we do have this router that we declared with view router and one of the things you can pass to it one of the properties you can pass to it is a route array so let's add a new object and give it a path of slash login and the component will be a logging component now we didn't import the login component yet so let's just go up here and import it so import login from components login w and i think that's the capital l let's do that so now hopefully if i go to slash login that takes us to that login component and it does awesome so the second thing that we probably want to do you know this probably shouldn't go to app um let's just pretend this goes to like a welcome page so let's make another component called welcome.view and scaffold that out and say welcome wrap that in some divs and of course we probably need to [Music] import that so let's go ahead and import that welcome component so now if i go to the base url we have welcome and then if we go to login it goes to login okay so what we kind of want to do is probably on the welcome page let's just say if the user is not logged in present a link that they can click to go to the login page so i need to refresh my memory so i'm going to go to view router and i need to figure out how to make a view link so there should be a way see getting started it looks like you can do a router link here so let's just do this actually i don't know if i need to import that router link let's just try it out so i'm going to put a router link here and i'm gonna go to a login and let's see what happens if we just go to the basic welcome page so we get a login link and we can go to it awesome all right so step one was we hope user opens the app and show a login page so we kind of didn't achieve that right now it just kind of i mean i guess this works right does that make sense we have a link that goes to it good enough i think oh no i just closed out of that i love when i do that let me open that back up sorry y'all i don't want to waste your time okay anyway so we we are showing a login page and we want to show a form so again what are we trying to do we're trying to build a login form so if we go here we could probably wrap this in h1 oops all right h1 and under the h1 let's just make a form and inside the form we're going to have a uh input box maybe two input boxes so the first import input box is going to be um a username and the second one is going to be a password so i'm going to say type password for the second one save this and we get two input boxes here and i'm just going to use placeholders this isn't probably the best in terms of ux but i'm going to just go ahead and do it because i want to save some time all right so we got a login page a username and password let's just add a break here looks a little bit better now you could spend time on css i'm not going to because i'm just trying to show you the logic behind all this stuff so we probably want a button so i'm going to say button type is submit and i'm going to say login all right so at this point when the user types in a username and password and clicks login we need it to do something and right now it's like refreshing the page because it's doing a default submit action all right so what we could do here in view is we can keep state so when the user types into input uh the username and password we want to kind of store that in states somewhere so if we go down to our actual like javascript view component one of the things we can do is we could declare a data property which is going to be a function that returns returns username and password return not returns okay and then secondly you can bind your inputs to this to your data by doing a two-way binding and i might have to refresh my memory as to how to do that but i think you can just say a value is equal to a username all right let me load up the view thing down here and type in uh something route to login i guess this is all we're going to say anonymous component data password and username so i'm gonna actually have to look this up because i don't use view that often so i'm gonna say view uh two way binding how do you do that this view model all right so let's do that view model at least i think that's how you do it view model message all right so they say i should be able to verify this by doing two curly braces and when i type into this i'm just gonna do a hard refresh i think something is not okay so this is working but it's not i'm not sure what i'm doing wrong here input v model oh you don't put the colons that's why all right there we go i'm not gonna lie i'm a view nub so you should probably learn this from someone else i just know enough to be dangerous all right so now when i type into the username we get this username data property down here we want to do the same thing for password so i'm going to go ahead and say password and we want to when the user tries to submit the form we want to call a method and i don't know how to do that honestly so let's just look it up this is just going to be a big tutorial of me looking stuff up so i hope that's okay with you all i'm going i'm assuming there's like a view submit so i'm just going to kind of pretend like submit it's going to call a method called submit no i'm going to call it method called login alright so users are going to type in their username and password and they're click the login button which submits the form and then that's gonna call a method called login and we're just gonna console.log here to make sure that we're getting here so let's see if we are getting there login so it does do here okay so we probably want to i think a dot uh prevent default no there's some i think there's some way to like do that but anyway i think we probably get an e event and we could say prevent default to prevent it from like refreshing the page bro can't type right now all right so type in some stuff we got here all right so this whole this whole login page basically i need to once i get the username's password and username we click login we want to do an http request to our backend so at this point we should have access to username and password so we can say like this.username to get that stuff but we want to make a request to our api because that is what step three is it says do a post request to login so using the fetch method i'm gonna figure out how to do that because i don't remember so here is an example of how to do post you basically do all this stuff you probably won't need all this but we are going to try to just do it anyway so we want to do a post request to our express service um headers content type application i guess we know i need that i don't know all right a weight will not work because we don't do have async here all right so again what are we trying to do do a post request to our slash login we don't have an actual login endpoint right now so we're just going to pretend like we do and verify that we can actually do a request so this fetch method the first uh parameter is the url that you want to do a request to the second parameter is the object of what you're posting okay so this basically defines what you're doing with the http request and the important part is the body we want to pass a username and password but we don't have access to that right now so let's just go ahead and do that so we could do a username is this.username and password is this dot password all right never save the passwords all right so if we have all this set up correctly we should be able to type in like bob marley or something click login and that should do a request to our backend which we don't have a login endpoint so it actually crashes and but you can see down here in the request payload we're trying to pass in a username of bob in the last up sorry a password of marley okay so if you're not using chrome whatever you're using you usually have a network tab where you can view like what network requests were being made and this is uh just kind of inspecting and one thing i noticed off the bat is that our api is hosted on port 3000 so we probably need to actually hard code that so localhost 3000 slash login so now if i were to just try to do a login here um you're getting back if what are we getting back well it's just failing because i don't think we have that login url created so that is actually our next step is we need to go into our express service and actually accept this request you know what i see i post 300 here this actually needs to be 3 000 so that is probably related to our issue okay so we got a 404 not found that is a a better status code than what we got before anyway like i said we don't have a login endpoint so if we go to our express service we want to make one so i'm going to go ahead and change this default route to a post method so in express this express app object has a bunch of different methods like git post uh delete patch whatever and basically by calling app.post you're creating a new post endpoint and then the first parameter is the url so i'm going to say login and then we can send back some json here if we wanted to so instead of saying hello world i'm just going to say message was up all right so let's do that so now if i click log in here we we get back at 200 okay with the options but our endpoint for some reason didn't return anything so let's try to figure out why that is it's probably coors related so if you ever see an issue like this has been blocked by course policy this is because you need to actually install like a course module on express so there is a module i can um install so i think it's called course that's it and while that's installing i can import it and i get they say app.use course oh my gosh so long story short your browser has a security measure in place to prevent your browser from accessing urls that don't match this so because i'm trying to hit something at port 3000 it's stopping it unless your server has course enabled okay so that is what we're doing here we included the course package and we are just telling express to use course here okay so let us restart our express service and try to do that login one more time and if this fails and i don't know what's up and it passed so if i go to my login request you can see here we got a message that says what's up so we're making some good progress i hope so now the next step is we probably want to check if the username and password that came in actually exists in a database in this case we're just going to have some hard-coded username and password because we i don't want to really waste time with dealing with a database that could be for another tutorial or you can figure that out yourself but let's just assume that there is a hard-coded username and password that someone needs to provide in order to log in so let's just make one so i'm going to say username is uh cody and the password is one two three four five six okay so what we want to do in this login thing is if someone provides a username of cody and password of that we want to say okay you're good to go otherwise we want to throw an error so in order to get those that payload body that we sent in remember we sent in a username and password we can get that by saying rec.body and dot password and also dot username so one thing i like to do is i just do array destructuring so pass user name password equal to wreck dot volume let me just go ahead and delete that save that okay so like we said if they both equal what they're supposed to if username is equal to username and password is equal to pass word then we're good otherwise someone is trying to log in with some bad information we need to send back an error so let us just go ahead and send back a bad status so i'm gonna say res.status res.status is equal to [Music] 43 and i can send back some json that says like invalid login information okay so if i try this again so i took the log with asdf and we got back a message says invalid login information and we got a 403 forbidden so if you're building a production ready application you probably display an alert here that says hey your login information is bad but we're not so let's just move on so if we provided the good information we're getting to the juicy part this is the jwt part which is probably the most interesting so if you provided good login information and you checked your database on you know you grab the user from the database you check the password that you provided against that user model and everything checks out what you want to do is you want to sign a jwt token so we are getting to the meat and potatoes of this tutorial and what we want to do is i don't know if i have the jwd plugin installed so let's see if we do jason we do so there's a package called json web token which we probably should look at the docs because i don't know how to do this off the top of my head but i think it's pretty simple there's usually like a sign method sign okay this is a good example here so basically with jwt the user provides correct login information you want to send back their user um send back a jdbt that is signed okay so we can just copy that code in in fact this one i'm going to pull up here so import json web token package which gives us a jdbt object we can call and what we want to do is we want to sign it with a unique password okay so this this is kind of your secret key so my secret key and in a real system you probably don't want to hard code that like you probably have like a dot env or you could say like jw key jwd key is equal to hello and then you'd want to say like oh hello let's see process ieb dot dbt key okay does that make sense it's kind of going off the screen here but you want to provide that from your environment and not hardcode it into your code but basically it's going to use that key when it cryptographically signs your actually i don't know what it does behind the scenes i don't know if it's cryptographic but anyway what we want to do here is if you provide the correct username and password typically what you want to do is you want to actually sign a user model or something like that so let's just pretend we have like a user object which we got back from the database and those will typically have like a unique id maybe we'll have like a a name so i'll just put whoa that's not what i want to do so we'll name we'll just say the name's cody and maybe a username could be cody as well but usually you'll get back a user object from the database and that is what you want to sign so that when you send it back to the ui or the client they actually have some information like what you want to send back in the jwp token is anything you think that the user might need and then also anything you know that the server will need so for example the id is really important because when the server gets back a request with a token we want to know what you uniquely identifies that request okay so you usually want to make sure you have like a unique id in here anyway so we sign that user object we get back a token and we want to send back that token and probably that user object to the front end so if i were to log in successfully now with cussy cody in one two one two three four five six and log in if i go down here notice that we did a request to that login endpoint and we got back a response and in that response we got a token and we also got a user so one thing i wanted to show you all is this token is not encrypted it's just it's just a token so if i go to a site here jwt.io you can enter this in your browser and scroll down and paste in your token and this is going to decode your token or any other jwc token that you have and show you what the payload is so again this is kind of to demonstrate that this isn't some type of encrypted token that only the server knows about anyone who gets access to this token could hit your server with it and kind of pretend that they are your user id of one so you got to be careful not to leak tokens and typically tokens have an expiry time of like 30 minutes to an hour and then also when you log in you typically get a refresh token that you can use to refresh your dwt token every so often um so read up on that i'm not going to cover that in this little overview tutorial i'm just going to kind of uh hit the brush the surface of jwt but i'm sure when it comes to security you want to kind of research all that stuff all right anyway so our ui got back the token and what we want to do now if we look at our diagram is we want to store that step 5 is store that token in view x so let's see if we can kind of work towards that so right here we did the fetch method and we want to get back the token in the user and store that somewhere so let's just go ahead and let's get that response back here so let's say response is equal to that add async to the login method and then get back the user and token from response.json so the fetch method returns a response object that has a json method it's kind of confusing i kind of like using axios better but whatever but anyway just to verify that this is working let's just log out user in token here and go to my console type in kodi and 13456 and those are logging out so we're good to go what we want to do here is we want to store those in our store so if you remember at the start of this tutorial i talked about our ux store so i think at this point it makes sense to store the user in the token here so i'm gonna say user null token null and we can use these to know if like we're logged in or not if the token is null then we're not logged in if it's set to something then we're probably logged in or it could be set to a token that's expired and that's another story of like anyway that's the tangent so we want to be able to dynamically set these things okay so we could add a mutation and we could say set user and that takes in a i don't know so let's just look that up i totally forget how to use ux it's been a while again i work full-time at react so i'm trying to refresh my memory so this takes in state and you want to mutate the state so i can say save that user is equal to user and i think you can provide a payload here so after state we could provide a payload of user and secondly we could make another mutation called set token we could probably combine these into one method i don't know this this works um let's see this is complaining because i'm using commas there instead of semicolor yeah instead of semicolons so with ux you have state which is what you're trying to store mutations are methods that can be used to change the state getters are kind of like methods you use to compute state based on state if that makes sense and then actions are what you can call to do like asynchronous actions which call mutations so there might be a best practice that you should always call actions but in our login component let's just go ahead and call these two mutations here so i'm going to go up here and i'm going to import a method called map mutations from ux and with that i think it's maybe it's called map mutation i don't know i gotta look that up it's called map mutations with an s and what we could do is inside of our methods we could just map our mutations so i'm going to say map mutations provide an array and i'm going to say set user and set token all right so that will provide us with these two methods that we define in our store here and we can call them from insider components so let's just say uh this not set user equals user this dot set token is equal to oh these are i don't know why i'm calling them like their properties they're methods so you need to actually call them like methods all right so let's check if this works we added some code let's verify it so if you have the view chrome browser plug-in installed there should be like a this is the ux yeah there's a view x tab here and that is what we want to check so let's just go ahead and log in with a correct username and password and notice that it did those two mutations you see that it added the user and it added the token let me scroll up a little bit kind of forget i gotta refresh my memory so this is the state we have the user object and we have the token and after you log in we probably want to redirect the user to a welcome page or something so how do we do that let's see view router dynamic route in js so i want to programmatically change the navigation so i think we can say router dot push but where does router come from it looks like it comes from this dot dot router.push okay so we should be able to navigate to slash the home page here and let's see if that actually works so let's type in cody one two three five six click it and we're back to the home page so what we want to do now is since we're logged in and we have this token stored we don't want to show a login button anymore okay so if i go back to um i think there's a welcome component i created welcome if i go here we want to dynamically show this link only when the user isn't logged in so i could put a i think it's a v if and i could say is logged in all right so this is a good example of when you might want to use a getter function so if we go back to main.js we might want to have a getter called is logged in so is logged in is a method that is going to return [Music] basically return state dot token double exclamation mark so this will return true or false based on if the token is set or not and then what we could do is in the welcome component we could do a map um what can we do a map getters i believe all right so let's go ahead and import a map getters from ux and inside of methods we're going to splat that so map gitters and we want to map is logged in so if the user is logged in no i don't know if i need to call this like a method i guess we'll find out so let's log in cody123456 log in it goes back to this login page but we don't have i think this needs to be a computed computed's computed i think it's called computed i don't even know at this point i'm just trying stuff all right view computeds i might be mixing my frameworks up now let's call computed so computed map getters is logged in yeah um let me go to the view x oh well zoomed out too far all right so inside of getters we have a getter that returns some stuff and then you want to inside of getters you could put it here if you wanted to getters also receive other getters all right so map getters let's see where they do this they do it in the computed which is what i'm doing you pass it the method name and yeah i mean this should work so maybe my vf isn't working correctly v if and then the computer should be that this should work so yeah i'm not really sure what's going on here one all right let's try log it in again v if we are logged in and then you show it okay i think i just need to say if we're not logged in then you show it it's that okay so silly mistake on my part but basically only show certain things if the user is logged in or not so i mean that that kind of covers the gist of authentication like you log in you get back at jdbt token you want to save that somewhere so in our case we saved it in our ux store and then you can use that throughout your application to hide or hide or show different things based if you're logged in or not um and then on further requests you want to provide that jdbg token in your headers okay so that might be another tutorial i don't know if i want to get into that in this tutorial but basically when you do a request to your backend you have the ability to set headers okay so now that you have a jwt token whenever you're trying to hit an authorized endpoint you're going to want to provide uh you know i'll just go ahead and do this in this tutorial so let's pretend like there's a button that when you click it it's going to call a method called say hi and this is just all for demonstration purposes all right so let's say there's a button that says say hi and inside of this component there's a method which is going to do a fetch request to our backend and it's going to hit a high method okay so in our if i click this let me go to my network tab and click it notice that it made a request to slash high but we don't have that endpoint yet so what i'm getting here is i'm trying to show you how authentication works to an authenticated endpoint so if you go here and i do a a new endpoint that takes in a get method and i'm going to call it hi it has a rec and a res and it's going to do something basically what we want to do is we want to get a header which we haven't passed in so let me go ahead and go here basically what i'm trying to get at is now that you're authenticated you have a jwd token you want to send that in a header to further requests so we can get that here um it's like headers authorization authorization so i could type authorization and typically what you do is you do [Music] your authorization header is going to have a value bearer and then your token here so we don't have a token yet so we need to do a map um [Music] map state i don't even know where you do a map state state map state do you put that on computeds you do all right so as long in here i could do a map state method and we want to get back that token so i could say token and pass it token i think this should work let's see map states so now we should have access to that token and whenever you try to click on that hi button it should pass that as your authorization header so let's just test that out and see so click say hi and go down here we have authorization and our token exists in here okay it's complaining that we can't do a get request to slash high for some reason i don't know why i think i forgot to save this so let's just do a rec dot json of message yo all right so i click say hi and we get back we're jason is on that function all right so reza jason let's try it again all right we got back yo so what i'm trying to get out with jwt is with your authenticated endpoints that is endpoints that require jwt authentication typically what you want to do is you want to grab a header so i could say like uh authorization is equal direct.headers so grab the authorization header and then you want to get the token all right so typically you could say uh split it so authorization.split and then of course you want to do some type of error handling here okay so people can send in whatever they want so this will crash if you don't have the correct authorization header sentence but anyway you get the token and then you want to verify that the token they sent in is actually a token that you sign from your server so if you go back to the jwt library i think there is a verify method so i could say jwt dot verify and then you pass it the token that the user sent in in their header and then you pass it your secret key so i'm gonna pass it all this stuff and i think this is asynchronous it says synchronous if callback is not supplied so i'm going to put cost is valid and if the user sent in a valid token then we should send back i don't know yo else we need to send back um a 403 and say res.json message invalid token or say like unauthorized i don't know what status code that is unauthorized status code it's a 401 okay so probably send back a 401 if the token is not valid so let's try that out let's click say hi and we get back a can i read property split i think rec.headers is actually lowercase for some reason in express all right so i click it we got back the message yo and that is because we do actually have a token supply now if i were to go in and test this bad case where we don't have a valid token so i go to my store i think i can probably change it somewhere is there a way to change the store in this stuff i don't know if i can dynamically change state let's see if i can i don't know all right so let's just go ahead and change something so i think the payload is this thing in the center and if i were to change something in it like delete some tokens that doesn't work okay how about this i'm going to refresh the page and at this point there should be no jdbt token stored in ux so if i were to try to click say hi notice that we do get back uh it says jwt malformed all right so let me actually show you let me hack at this you know what is the best way to demonstrate this what is the best way to demonstrate this you know i could just hard code this here it's just hardcode a bad token let's still complain so it's kind of tricky because i need to actually supply you with a real jwt token but just kind of modify it a little bit so let me just modify this by deleting a couple of things and now it's hardcoded to send this in so now when i click it i expect the token in json a position right so our server is crashing for some reason um [Music] unexpected token and json at position 53. all right so i don't think this is the best way to show you um how this stuff works what is the best way i want to take a token and just change a little bit so i think if i change this stuff and then try to use it it should break maybe i don't know invalid signature okay so the jwt library it looks like it throws errors if stuff is bad like if i were to assign this with a did i close out of jbt value i think i did okay so what i am trying to do is let's just encrypt it with something else this is the last thing i'm going to try and then i'm going to give up and just you can just take my word for it that this works nope this doesn't work okay so at some point there is i guess this verify thing just crashes if you don't provide it a valid thing i'm sure it talks about that somewhere decoded okay synchronous yeah so i didn't read the docs but basically if you call verify and the token is bad it's going to throw an exception and that's why we keep seeing this bad stuff because we are just basically passing in bad jwc tokens that not is valid i should probably just do this technically you wrap this in a try catch and you would probably on an error you'd probably send back an error okay so that's probably the better way to do your jw logic so we got back an error but we probably want to say res dot status is 401 okay so we get a 401 status code but then we also get some information saying that the gdp is malformed yeah so i'm gonna wrap up this tutorial so i'm gonna do a quick recap of like what just happened here because i don't i don't feel like i explained it that well you can be the judge of that but basically if we did a full recap all right so i'm just gonna give you a really full recap of everything we did so we basically we added a login component which you can hit by going to slash login and we also added a login url or href which only is if you're not logged in so if you click on this it goes to our login component and this component is going to do a two-way data binding to our username and password which we define in our data down here so when a user types in their username and password and then clicks login that calls a submit function here which is going to call a login method down here and that is going to make a request to our login endpoint using a post method and we are also going to pass in that username and password so if the user passes in the correct information that is going to go to our server and hit our express login endpoint and we're basically just checking if the username and password pass then matches this hardcoded username and password and if it does we are going to cryptographically sign or sorry i keep saying cryptographically i don't really know what it's called but we sign this user object using a secret key and then we send back that user in token to the uh the client so if you successfully logged in you'll get back that user and token and then we're basically setting these on our ux store using mutation so if i go back to main remember we created two mutations here which are basically just used for studying the state variables and then we redirect the url to slash which is our welcome page so if i click and log in it goes to our welcome page where we then have a button where we can click that does another request so the kind of demonstrate the whole um authorization header sorry we created this button and when you click it it does a get request to slash hi and it's going to provide an authorization header so this is a convention you typically use as jwt we have an authorization header and then inside of that you have a value of bare space your token here so we are able to access token because we use the map state to grab the state from view x and then we send that to our high end point where we basically check the header we get the token from the header and then we call jwt.verify on that token using our secret key to make sure that the token is indeed valid and if it is we send back a yo message so if i click on this we get back yo and if the token is invalid for whatever reason maybe it's expired maybe someone's trying to modify contents inside the token or someone tried to create their own jw token has sent it to your api if any of that stuff happens you just basically send back the error with the 401 status code and that's it so that is the gist of this tutorial i just wanted to touch the surface of how you do jwt authentication with view and express and then using vuex to store that maybe dynamically hide and show different things we've touched on a lot of different libraries and frameworks and features so hopefully this was a good overview of how you tie all the stuff together if you have any comments questions or concerns on how i explain something or if i maybe didn't explain something good enough leave me a message leave me a comment maybe i'll respond to you or maybe i'll make another video to kind of fill in those gaps that i might have left out but i think i covered a lot of the basics of how jwt works how authentication works um i didn't really cover authorization authorization is more of like checking if a user has a particular role and then like giving them access to certain things based on that role but that's not too difficult to get going yeah okay so i'm gonna wrap this tutorial thank you so much for watching and have a great day

Channel: Web Dev Junkie

Views: 7,527

Keywords: vue, vuejs, vue.js, vue router, vuex, mapState, mapMutations, mapGetters, express, jwt, vue authentication, json web token, tutorial, web development, coding, progrmaming, code, learn to code, live code

Id: g1lzdoitZkg

Length: 56min 17sec (3377 seconds)

Published: Thu Aug 06 2020