Secure JWT Authentication - Where to store the JWT Token. How to store JWT token in httpOnly cookies

sup I'm Alex the entrepreneur today I'm talking to you about how to safely store your JWT token that you use for authentication so let's talk about the security aspects of this so first of all where do you store the JWT you typically have two options and both of them are unsafe the cookies and local storage if set in the front and if set in a react application in jQuery with JavaScript on the front-end is an unsafe option you cannot do that in doubt let me tell you why and further up in the video I'm also gonna show you what is the way to safely store the JWT token so let's get started first of all why do we use GWT it's super easy to use you just put it in in the ietters as a bearer token it's amazing it's very widespread if you're working with headless CMS's such as myself working with strappy or sanity delay or Netley 5cms then you definitely work with a bearer token and as such you have to store that token somewhere and most of the time you make a request on the front end so you gotta basically adjust to that which we're gonna talk about in a second so simplest way to store the JWT which is unsafe is with local storage you just get the tree WT and then you local storage dot site odd set item and then any script and I mean any script that is malicious can just get that token by typing in local storage dot get item and then the key in the local storage that has to do your JWT so this is completely unsafe it should not be done at all you should never store your JWT in the front end through a request such as this unless you don't care or are open to the fact that you're going to be putting your users to extreme vulnerability now the second option is to store the token in a cookie which is very similar you just grab the token constantly TT because away login and then you just set the token with cookies not set or any library that you want or document or cookie that append whatever so now you have your document or cookie that is exposing the value of your jwg token which means that programmatically any script can access your token and that Safi that is potentially harmful because if somebody's able to inject any code that you don't want then they're gonna be able to execute code on behalf of your users okay so the simplest way to store the GWT again these two ways local storage and cookies are unsafe the reason why again is because any script malicious script can access those GWT values so you don't want to allow that how do we go about preventing that first of all simple rule what's the rule you just don't expose those values programmatically make it so that no script can access them beside the script that you wrote so how do we do that first version which has a lot of cons and we're gonna get actually both solutions of cons compared to the ideal solution of having local storage being a script limited so if only the script that sets the local storage value was limited to accessing the value then we wouldn't have all of these problems but since local search is shared cookies are shared we basically don't have a solution and encrypting doesn't help because we can still access that encrypted key can be accessed by just looking around on the source code so it doesn't help so the the first safe solution would be to use the quote unquote ephemeral solution which means that we declare a variable at runtime and we assign that value at runtime so that if we refresh the page we do lose access to the token right we have to login every single time that we open up our application this can be acceptable for application that aren't accessed that much or the donor area require and you refresh but most of the time this will be hell if you're working on the front end application you're just gonna go nuts so let's take a look at the code we just declared the GWT at the top of our script at the top of the function and then we just get the GWT through a login function that returns the GWT and then we set that value globally so that any other function can now access it and something similar can be done in react let me show you gonna open my code profile front and this is something that built-in showcasing strappy in our course so if you're interested in that in that you can check the complete strappy course link in the description but that's that we have our user value that comes from the state and as you can see if we don't have user that we show a computed call register log in there receives a props called update user that basically allows the component to update the user so this is similar to the idea of having a context provider that provides the JWT or the user data in general and the idea is very simple we have a component called register or login that would simply just it's a form and get the data and then it makes a request to our API and it gets the GWT token and once the token is there if the prop for updating a user is there then it sends that property back to the parent okay will be similar to storing the GWT token in redux or in a context okay these are all ephemeral solutions so let's look into a more permanent solution and there's only one permanent ocean that is safe and we're gonna get there in a second so the only secure way that is permanent or semi-permanent to store a JWT token is to store it in something related to this session so technically speaking you could just store it in a session variable but something more solid will be to store it in a HTTP only cookie okay how do we go about storing it in a HTTP only cookie and first of all what is HTTP only cookie it's just a cookie that cannot be accessed by JavaScript any JavaScript application in the front end will not be able to access our cookie so an application that I'll show you later which is called secure - GWT demo which we're gonna get it there in a second we'll have cookies set but it will not show them so and I'll show you this application in a second by the way but let's say I use this form which is basically connected to this application hosted on a Roku ok and then I log in and we're logging in blah blah blah and now what you see is that I have a bunch of cookies here in my application tab in the browser but what you notice is that they are HTTP only so you can clearly see the value of my GWT token uncritical leaking the value of the GWT token however if I open up my console and I type document dot cookie you'll see that it's empty I do not have access I do not have programmatic access to the cookie which means that my front-end doesn't know what the value of the GWT token is even though I can see that it's stored in the front end something similar can be done by storing the variable just in a session variable I decided to implement this with cookie session that's just me but what we can see with this application is that now that I logged in I have a button here called pink that shows me what the cookies are set for the request and you see that inside of a cookie I have my JWT token and again this cookie is HTTP only which means that when I call load secrets which is basically D let's call the protected route what you'll see is that when I load secrets I actually get some data back my API makes the request for me because the API the backend has access to the cookie token and then my front end receives the data that I need so if I try and do the same thing on a different browser on an incognito application you'll see that I don't have access to the cookies and as such when I try and call load secrets I actually get nothing I get a forbidden okay while if I try and access the same data from a different tab you'll see that since I have the same cookies because it's the same user agent and it's the same browser I will still be able to get my secrets back ok and this can be done even if I were to close the entire browser because I got a store buy a cookie that that has an expiration date that is variable so going back to the discussion we can store the JWT in a HTTP on the cookie and I'm gonna show you a second by the way so what we can do is we can serve the app with a back-end server we're gonna have our front end our front and a react app or our jQuery up or whatever served via a back-end okay it's not just gonna be served as a static file it needs to be served through a back-end so that we do have access to a session matter bus and we can work with HTTP only cookies and then as I said serve front-end application with back-end server and then we're gonna mirror the front end routes inside of the server so if the rather if the front end has to make a login request then the login request from the from the front end will ping the backend will paint the API and then the backend that is serving this the actual back-end will make the real quote/unquote authenticated request okay so your front-end if I go back to the code which we're gonna explore deeper in a second but if I want to give you a couple of examples if I have my app to jas that allows me to log in then my apt rjs will just query my back-end slash API slash again with the data and then my back-end will actually perform the real login request to the CMS to the headless CMS so that way I can set my JWT token inside of my session variables and that means that while my front end has no idea of what the the bearer token is so it makes a request that should be authenticated such as slash API slash secret and then my back-end that store that JWT will actually use the GWT token as a bearer token in our quest that it performs ok and the true requirements for this are that one you're gonna have a matching between the front and route such as let's say this one's load secret slash API slash secret and then you're gonna have a peer slash secret then actually fetch the data from your CMS and then pass the GWT token and the other part is that your back-end your Express server in this case while you're back in general will have to serve your front-end so that the front end is in the backends are in the same on the domaine on the same basically on the same URL and that's it as you can see there is a huge downside to this and it's simple that you're gonna have to write more code every request from the app from the front-end has to be matched by a corresponding request that is actually the real request that is authenticated and that is done through your back-end this may also be a fairly good opportunity to build the integration tests in the backend so it actually may be a great opportunity to just build pass-through requests in the app and then have real tests in your back-end route so technically isn't that terrible if you're working with a moderately big project however you can clearly see that the unsafe solutions such as setting cookies in the front end or studying local storage are very tempting because it takes very little time so in conclusion I would advise with developing an application even by using local storage or cookies in the front-end but then know know for a fact that you're gonna have to use this pattern in order to secure your JWT token any other pattern that doesn't have the GWT values stored in the in the backend in a way that doesn't allow scripts in the Ferranti to access it is unsafe as of now and now being February of 2020 so I would highly recommend that you check this out this is something that I'm gonna be releasing a tutorial for so be on the lookout for this if you like this video put a like put a comment to ask me any question you want or even for feedback and definitely subscribe for more because I'm just getting started and thank you very much for watching this and have an awesome day

Channel: Alex the Entreprenerd

Views: 53,861

Rating: 4.8140349 out of 5

Keywords: JWT, Auth Token, JWT Auth, JWT Authentication, Strapi Authentication, How to Authenticate with JWT, How to use JWT, Axios JWT, JWT Axios, Fetch JWT, Json Web Token

Id: 894seNhONF8

Length: 12min 52sec (772 seconds)

Published: Wed Feb 05 2020