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

Подписаться 7 тыс.

Просмотров 111 тыс.

50% 1

In this video I go through a few possibilities on how to use the JWT token.
If you enjoyed this video then check out The Complete Strapi Course on Udemy:
www.udemy.com/course/the-comp...
JWT Tokens are used for authentications with many APIs and especially with Headless CMSs (such as Strapi, Sanity, etc..)
I go through dangerous and safe ways to store the JWT when working with a "fat client" (e.g. React app)
Let me know what you think in the comments!
These are DANGEROUS ways to store the JWT token:
gist.github.com/GalloDaSballo...
The reason why storing your JWT token in the frontend is dangerous is because if your site is subject to XSS (Cross Side Scripting) then a malicious script will have access to your token.
Ephemeral use example:
gist.github.com/GalloDaSballo...
The httpOnly example will be in an upcoming video. Make sure to subscribe to be notified when that comes out!
Put this into action in The Complete Strapi Course:
www.udemy.com/course/the-comp...

Опубликовано:

28 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 148

@paulsnehasish5830 Год назад

after searching for like 2-3 days , I finally found my solution with this simple yet very beginner friendly video which is actually 3 years old

@alyatek 3 года назад

Finally a properly explained solution to this problem. Every other tutorial I have seen that mentions this is like: "Well JWT localStorage is unsafe" but proceeds to show a login method and saving the token in localStorage, or JWT Is Unsafe and the tutorial is all about why it's unsafe and doesn't explain how to prevent it properly. Thank You!

@stefanplusplus917 Год назад

this comment speaks to my soul LOL

@nicholasbalby4535 Год назад

@@stefanplusplus917 My soul too

@TroenderTass 2 года назад

Thank you very much. I've stayed away from jwt for this exact reason where I could not find any proper solution of how to use my token safly. Desserves alot more views, because every tutorial on these uses local or session storage to do it. Thank you again!

@HeyDan1983 4 года назад

Thank you for the information on this video, I would really like to check that demo hopefully you can release it, thanks!

@lionellafont7930 3 года назад

This was a real concern to me! Thx for this 👍

@jakubgadzala7474 3 года назад

Subscribed! I don't understand the secure implemantation yet, but at least you opened my eyes for new horizons. Thanks bud!

@DennisIvy 4 года назад

WOW! You nailed it!

@baetraki7268 2 года назад

can you make a similar tut, with Drf(simple-jwt) & React.js please

@azhari_my_id 4 года назад

Awesome, Best explanation that make me very understod the theory Really glad found your channel Thankyou verymuch anyway, best explanation

@AlextheEntreprenerd 4 года назад

Thank you!

@rashed_raju 3 года назад

This is what i looking for. Nice explanation. Thanks a lot.

@SilvestreVivo 4 года назад

This is what Sapper/Svelte does and is the most efficient way. Nice video!

@AlextheEntreprenerd 4 года назад

Awesome!

@Codeytek 4 года назад

Love it..best explaination so far

@AlextheEntreprenerd 4 года назад

Thanks!

@codegeek-il5fm Год назад

Good stuff and well explained. However, you mention at the end that you need to have frontend and backend on same domain to use cookies which is not necessarily correct in 2022 but requires additional steps. You can have backend on a separate domain and setup CORS (allowing headers like Access-Control-Allow-Origin and others) and ensure that the cookie is set as HttpOnly, Secure and the front end API calls are including withCredentials:true in the ajax calls. More steps but separate domains with cookies are possible

@henock5364 Год назад

Hey, I've been having an issue with this. Could you add a video on your channel implementing this please?

@prasannabhat9307 Год назад

@@henock5364 did you get any solution

@nicholasbalby4535 Год назад

Please, show us some reference to this approach.

@kaushikravikumar7472 Год назад

This is not related to CORS, the reason he said that is because browsers block third party cookies in incognito mode if they don’t belong to the same domain.

@IllusionIRL 3 года назад

Thanks for the vids ! Im wondering while using api with PHP (codeigniter 4) who has httponly set to true and cannot be modify, would you make an server node to save an JWT token and sending call to the API ? (the front is next js)

@rick9348 3 года назад

I don't know how strapi middlewares looked at the time, but currently strapi allows you to implement this with a simple middleware and a custom login route

@berlino5563 4 года назад

Strapi not implement jwt cookie http only by default, can you explain?

@dejangavrilovik2363 4 года назад

Amazing content! Really glad I found your channel

@AlextheEntreprenerd 4 года назад

Thanks!

@kavishvaidya3787 Год назад

Hello, Thanks for the video. So if i am understanding correctly, we should store the jwt in header cookies and send requests everytime to backend and fetch the required data correct. Do we need store the token in front end too or we can just decript the jwt to read the data? I have not yet gone over how to decrypt the jwt in web api thanks

@jahanzaibshahid07 2 года назад

Hi Alex, if we save token in server and we have load balancer that send request on different server so how can we make it stateful ?

@receiverreceiver1465 4 года назад

can you give us this demo please

@theturokchoi 4 года назад

Question: So if I want to use this method, would it work across multiple domains? I'm guessing no, this will only work for a single page app?

@AlextheEntreprenerd 4 года назад

This may help you with implementing this on a multi domain set up: stackoverflow.com/questions/47497296/node-js-authentication-in-cross-domain Personally, if you need to set up multi-domain auth, I'd look for an authentication provider instead.

@sagar140 3 года назад

how to manage refresh_tokens for multiple devices of same user ?

@pastuh 2 года назад

What if I use chrome extension.. And I want to send API request to backend to another server? Which method to use for jwt?

@ahmelq 3 года назад

Wouldn't this be prone to CSRF attacks? What if you wanted to revoke the jwt-token?

@mdaslamknl 14 дней назад

Excellent Bottom line we need to store jwt in cookies Thanks

@himho7132 2 года назад

Via httpOnly cookie, so we don’t need refresh token anymore?

@manwaicheuk3045 2 года назад

Hi Alex, may i know how to auto login if i use htty only cookies?

@ksato3991 4 года назад

Very concise!! Keep up ur great work!!

@AlextheEntreprenerd 4 года назад

Thank you!

@saskirakosyan3788 4 года назад

Its a good tutoral for this topic

@AlextheEntreprenerd 4 года назад

Thank you!

@agastya_journey 2 года назад

I have used password token for authentication using cookies with http only ,but lower level user become higher level user once he copied token from higher level cookie and paste in place of his token.how can I fix it?

@abdchuhan 3 года назад

I do use exactly same approach, and it is fact "FOR SECURITY WE SHOULD NEVER HAVE FRONTEND CLIENTS FOR APIS, INSTEAD WE SHOULD HAVE APPLICATIONS AS CLIENTS."

@RajeevKumar-qh6zh Год назад

if some one stolen this and paste in another browser it will work ??

@daniilthegunner843 8 месяцев назад

Bro, if you don't have an access to HttpOnly cookie, how you'll be able to check if token stored in cookie and show pages which are secured (In other words how to implement router guards for that)

@hk_build 3 года назад

Thank you so much for this video....let say if i save token in cookie at client shall i need to manually send it along with header OR it will be auto sent if i stored in cookie..?

@abdchuhan 3 года назад

It will automatically send, you dont need to worry about that anymore.

@MysticAngel3224 4 года назад

Hey, thank you for this video, you have helped shed light on this burning question I have had this week. If I understood correctly, your frontend app needs to have a backend (which acts as a proxy) which calls the real backend.

@AlextheEntreprenerd 4 года назад

Yes, this is the best solution I came up with.

@MysticAngel3224 4 года назад

@@AlextheEntreprenerd Thank you so much for putting out this video and sharing what you know. Last weekend I spent so much time trying to decide which approach to pick (Local/Session storage vs Cookie).

@AlextheEntreprenerd 4 года назад

@@MysticAngel3224 Glad you enjoyed it!

@MysticAngel3224 4 года назад

@@AlextheEntreprenerd I have one more question... in the subsequent api calls (for your landing page, profile, etc.)would you make the express server (proxy) calls open or would you add some sort of authorization to them? the proxy would get the authorization info (jwt token and user id) from the cookies in the request, correct?

@jasencio 3 года назад

thank u so much for the information

@AlextheEntreprenerd 3 года назад

Happy to help!

@chinthakakasun6908 11 месяцев назад

The problem I'm facing right now is How can i ping the server when using react-router-dom. I don't want to load any pages if the jwt token is expired or invaid.

@droidJV 4 года назад

First, thanks for this, second: This method is pretty much what I currently have going for a project that has a web and an app(mobile), however for my case I have control over both backends (api's and frontend's) which are under the same express app. What's your opinion on having the middleware that authorises (checks token and sets user) be hybrid and also check for a regular userid session? My app(mobile) would use the token while my web's frontend's backend would call login on the api's backend and instead of storing the token, it would simply store the userid in the session.

@AlextheEntreprenerd 4 года назад

Thank you for your appreciation. My 2 cents are that you are almost always better off avoiding using JWT for "authentication reliant applications". Also, for mobile apps, you can use: github.com/oblador/react-native-keychain or docs.expo.io/versions/latest/sdk/securestore/?redirected To safely store the JWT token. So your only need for a "complex architecture" is for your web application. If your express app is also serving your react app and issuing sessions, then you are already doing it "the proper way". My biggest advice is for you to spend a few hours trying to hack your own system, and possibly get a security audit done

@droidJV 4 года назад

@@AlextheEntreprenerd Thanks a lot for your reply, sadly youtube didn't notify me but luckily here I am. I'll check the links and follow your advice. Keep it up.

@supremereseller5953 4 года назад

confused. if you can still see the jwt token when you go through application. how does it make it any more secure than just storing it in a regular cookie? understood that when you use script; it would be not be.

@AlextheEntreprenerd 4 года назад

You can see it, a machine cannot.

@imyounick 4 года назад

An attacker can still copy paste it and stole the token and can be shared

@markhermano1 4 года назад

It is secured in a way that you won't be vulnerable to xss attacks (httponly cookie) because it can't be access by the frontend. But this setup is still vulnerable to xsrf/csrf attacks.

@MegaAdred 3 года назад

@@markhermano1 No CSRF attacks happen when the browser does the authentication for you. In this setup, the cookie does nothing other than allow the back-end to validate the connection.

@luthercunha6916 3 года назад

Hi, Alex! I´m new on NextJs so excuse my question, but: What if i´m using Next.js? Do i need to use Express backend also?

@AlextheEntreprenerd 3 года назад

Hey Luther, check into next-auth.js.org/ github.com/vercel/next.js/tree/canary/examples Notable examples are the "withPassport" one Also the withAuth0, you can either use Auth0 or learn how to attach it to any auth provider (Strapi included)

@imranshaikh115 4 года назад

great explanation Alex, But I have a question like, this approach would definitely work for frontend and backend would be in one place but how we can do when we are going for microservices like create a separate server for Authentication & Authorization, I mean we have one Auth-Server and others are different-different servers so in that case, we can't manage session so what would be the alternate secure solution, Again Thanks a lot.

@droidJV 4 года назад

The session/cookie is managed by the frontend's backend, that's where you read the cookie, retrieve the jwt and send a new request to the actual backend (auth server in your case).

@adrisongomez6482 4 года назад

I think you should do as you said, to build an auth server that provides valid JWT and all private microservice should validate the JWT and when they find a JWT not valid or expired just send to browser "token or session expired" like banks websites

@vinujoy4311 2 года назад

Great Tutorial, can you share the httpOnly example ?

@markhermano1 4 года назад

Great explanation! How do we serve this kind of setup in netlify or aws s3? Is this possible or you need to deploy this in a vps?

@AlextheEntreprenerd 4 года назад

Hey Mark, not sure about netlify. For sure you can get this to work on aws (not s3) by having two servers (one for Strapi, one for the Backend that will serve the frontend)

@AlextheEntreprenerd 4 года назад

I think a VPS will work, probably 2 VPS (2 servers just like I said above)

@markhermano1 4 года назад

@@AlextheEntreprenerd I have just read an article that it is possible to deploy an express app to netlify via serverless-http. www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/ ...

@dhruvilmehta3455 2 года назад

But one can also go to the network tab by inspecting and get the response of the api request where we fetched the token. How to prevent that ?

@theNotSoNorthIndian 2 года назад

That is not the case here. The actual API call to get the access token is taking place from Express, which won't show in frontend's network tab.

@hectormejia499 3 года назад

So how is this any better than using regular session cookies for auth? Cookies can't store much, so most jwt won't fit in them, or is there something im missing? would love a perspective on this.

@pemifo260 15 дней назад

If you are using regular session cookies and you don't have any CSRF vulnerabilities and you are just serving your services to browser then you are good to go. I think the problem starts when you are trying to serve your API to browsers, mobile users and 3rd party applications. (think about Instagram) If you are trying to handle all three of them, you need the use some Token based Authentication. Mobile users and 3rd party applications are good on using tokens, but your web clients can be vulnerable to XSS or CSRF (again) on how and where you store the token.

@fooked1 4 года назад

A cookie can't be very long, so your JWT payload would be limited. So why use a JWT at all for session management?

@erickbroos7233 3 года назад

HTTP cookies can not be read from the application you do not want to put the payload there is unless you use a proxy

@andresfcuellarc 3 года назад

Thanks good information

@milkyway9225 3 года назад

you start video with false cookie-making syntax?

@michaels8297 3 года назад

Can you explain the benefit of jwt over regular backend sessions? If we have to store login credentials on the server why not just use sessions

@AlextheEntreprenerd 3 года назад

Sessions are better, if you can use sessions do that. Simulating sessions with JWT is a compromise you may have to take when using 3rd parties (Headless CMSs such as Strapi being the core of what I teach)

@damindadineshimaduwagamage9044 4 года назад

if the token is not sent to the front end, how do we exactly know the user is that specific user?

@AlextheEntreprenerd 3 года назад

You could write a /me method that will retrieve the data for the currently logged in user. This way you can retrieve the data without leaking the JWT

@anandkashyap6682 3 года назад

But cookies are not enabled in incognito mode of browsers. That would break the whole app. How to go around that?

@hectormejia499 3 года назад

The browser starts with a fresh set of cookie and localstorage bucket, so either way it would break authentication regardless of method followed.

@mranzuann7950 3 года назад

this is great and thank you so much for opening our eyes, but if you have multiple apis to make request, the server is gonna be huge, what if you have only one request to express server that contains the metadata of the actual request from frontend so that the express server can forwad the request to the resource server that contains the actual response. forexample you may have body of the express server route that contains the (method of the request, url, headers,body and other options) and the express server will call the resource based on these information, using this you will only have one route that will forward your every request to respective service. thank you so much

@AlextheEntreprenerd 3 года назад

Way easier and scalable to use an Authentication Provider, that's why I recommend using Magic (see my Ecommerce video)

@mranzuann7950 3 года назад

@@AlextheEntreprenerd thank you man

@AndyD89 2 года назад

You need to also the site SameSite policy on the cookie to strict otherwise you are still vulnerable to XSRF, right?

@pemifo260 15 дней назад

If your backend and frontend runs on different domains, that can't be achieved (without nginx reverse proxy)

@mranzuann7950 3 года назад

how can this method of using httpOnly cookies prevent Cross site Request Forgery (XSRF) attack?

@AlextheEntreprenerd 3 года назад

You can add a CRSF token to mitigate

@mranzuann7950 3 года назад

@@AlextheEntreprenerd ok let me try to do some research how to do that in angular

@tomaszziebura7033 4 года назад

I don't quite understand the http only cookie approach let me check if I'm correct: I have my frontend website which communicates with a backend server then which accesses the JWT authenticator? If I'm I understand it properly that seems like a lot of spaghetti

@AlextheEntreprenerd 4 года назад

Hey Tomasz, if you store the cookie in the frontend without httpOnly and your website is vulnerable to XSS your users will have their credentials stolen. Happy to see an alternative to my proposal!

@JohnnysaidWhat 4 года назад

Let's Code out of curiosity is the auth server passing back a session token to the client? What if someone gets that? Wouldn’t that put you back in the same bad situation? Sorry trying to wrap my head around adding another server to access my server lol

@AlextheEntreprenerd 4 года назад

Hey @@JohnnysaidWhat , I'm using session cookies but you can implement this with just cookies on the express side. If a malicious attacker where to gain access to the JWT they would be able to impersonate you. If somebody where to sniff your packets between the server and the client, the JWT token could potentially be stolen. However, if the connection between the client and the server is HTTPS (i.e. if your app is served with HTTPS), then the JWT token would be sent back and forth as an encrypted packet which should make it safe. Hope this clarifies!

@JohnnysaidWhat 4 года назад

Thanks Alex that makes a lot of sense now!

@mahdisalmanizadegan5595 Год назад

so as a backend developer should i always store my access token in httpOnly header ?

@AlextheEntreprenerd Год назад

Yes, secure only, http only

@mahdisalmanizadegan5595 Год назад

@@AlextheEntreprenerd Thank you Alex for your attention, I found your channel recently, and your videos are really awesome, I'm in the process of learning full-stack web development. and I've been looking for mentorship in my journey, could you please help me in my journey? I appreciate it. wish you all the best possible.

@yukeyuke7965 4 года назад

Very interesting

@AlextheEntreprenerd 4 года назад

Thank you!

@albxdotcom 2 года назад

So if I understand correctly, even though the jwt token is in http only cookie, it is viewable from the users web browser. It doesnt matter that the authenticated user can see the jwt token in browser. However, it would be a security risk if the attacker actually had access to the users web browser. In this case, the malicious user could copy the jwt token and use it to potentially get a refresh token from the server api? Am I understanding this all correctly? Thanks for the great video Sir.

@pemifo260 15 дней назад

If attacker has access to users web browser then it's game over. There is nothing you can do there. User's system is already compromised.

@jasekdominik 4 года назад

so basically you are combining express and strapi? I thought strapi is supposed to work alone without express

@AlextheEntreprenerd 4 года назад

No, I'm serving my React app through express

@SujeetKumar-tl3lq 4 года назад

Where you demo httpOnly cookie, You are proposing, make another request and maintain session.

@digitaldevboss324 3 года назад

I'm new to a lot of this, but isn't using refresh tokens a form of sessions anyways? I mean a refresh token is essentially maintaining a session right?

@amirbahador.developer 2 года назад

fantastic🙏🏻🌷❤️👍

@jeromelanteri6469 3 года назад

you don't explain what your middleware does, and why not just use the middleware at first server fetch catch instead of fetch an other one request to himself to finally send back JSON data embeded (who can be also catch and read on the road if sniffing) ? I missed the point of this complexity. Maybe it should be useful to use a kind of UML plan to show that near the code, and each point of the code (include the middleware). Actually, you also didn't show how to send the JWT with httpOnly mode.

@rishabhanand4270 3 года назад

Doesn’t scale well. Like i cannot scale only the frontend now, can I?

@AlextheEntreprenerd 3 года назад

I think this can scale. But the amount of work is doubled. If you were to use a Login Provider or Sessions, you wouldn't have to do this. Also, if you store the JWT ephemerally (in a variable inside of react), you don't have to do any of it. But your users will have to re-log in every time

@rishabhanand4270 3 года назад

I mean at this point i would just use a server side rendered framework like nextjs. Or build a custom serverless solution like firebase auth does

@rishabhanand4270 3 года назад

Sorry, but a lot of questions. Like if you serve your react app from expresss, what is the impact on ttfp, tti?

@axedyson 4 года назад

But If we are storing the jwt in an httpOnly cookie isn't that a CSRF vulnerability??

@AlextheEntreprenerd 4 года назад

How is that so?

@axedyson 4 года назад

@@AlextheEntreprenerd Because the browser automatically sends cookies with each request, and therefor it automatically sends the jwt cookie and the user will automatically be authenticated. Please see this stackoverflow answer it explains it very well: stackoverflow.com/a/35329700/13343174

@AlextheEntreprenerd 4 года назад

@@axedyson Makes sense, but you can counter that by using csrf cookies All in all my go to solution is to never store the JWT and just use ephemeral methods such as React Context. For most applications users won't mind having to log in again on every visit

@axedyson 4 года назад

@@AlextheEntreprenerd Thanks. Yes, I'm going to store the JWT inside a httpOnly cookie and then use some kind of csrf protection

@RaghuprasaadIyer 3 года назад

@@AlextheEntreprenerd How do big apps like youtube and google keep up logged in then ... what approach do they use and not be vulnerable?

@riteshgsh Год назад

httpOnly cookies can't be accessed by javascript, but they sure can be mutated from the browser's dev tool and sent along with a request to the server.

@chakhmanmohamed9436 2 года назад

But why do you send a authorization header when u send a cookie?

@nims5537 2 года назад

I don't understand your question

@chakhmanmohamed9436 2 года назад

@@nims5537 why send headers when u only need to deal with cookies.

@nims5537 2 года назад

@@chakhmanmohamed9436 We need the authorization header to be sent to the server to gain access because the token is sent through this header

@alexiserubeymoralesheras1185 2 года назад

cool vid

@mdjahidulislam9205 3 года назад

But isn't it vulnerable to csrf attack?

@AlextheEntreprenerd 3 года назад

Yes, you need to add csrf mitigation

@mdjahidulislam9205 3 года назад

@@AlextheEntreprenerd how to prevent it would you reply i was looking for it last 2 days??

@AlextheEntreprenerd 3 года назад

@@mdjahidulislam9205 check csurf: github.com/expressjs/csurf and look at owasp guides: owasp.org/www-community/attacks/csrf

@caterpilar 4 года назад

AuthCookie can be stored in app memory, updated by RefreshCookie if needed, and we only gonna ask to login when none of those avalible. See more hasura.io/blog/best-practices-of-using-jwt-with-graphql/#jwt_persist