AJAX Requests with Token Authentication

When working with fetch and making AJAX calls, you will often need to authenticate your requests.
Token authentication, and in particular, JWT token authentication is a common way of handling this. This tutorial covers the basics of JWT tokens in the browser and how you can include the Authorization header in making your bearer token requests.

NOTE: the header in the code should be "authorization", not "authentication".

[Martiansfromthemoon]

You're like the bob Ross of programming. Just gonna code some happy little Bearer tokens

[mohammadirmansyah]

The best front end token explanation!... Thanks 👍

[kabakiAntony]

Steve I just want to commend you for how you take time to answer everyone on the comments well done.

[firedforfighting]

at the 4:00 mark I believe the name of the header is actually Authorization and not Authentication. Awesome tutorial as always though, I've learnt a ton from this channel and was now trying to figure this topic out.

[indianavi]

Even though the video is quiet old, still relevant solved a major problem for me. thanks😀

[luismarquez]

Very thanks, I'm from El Salvador!

[dibyasompuhan]

Helped me a great deal, grateful I'm !!

[adanj]

Great example, just wondering if this setup can be applied to Twitter or Facebook api, if I have a token and need to access or fetch some data?

[_rcs]

Thank you, I really enjoy your delivery. I have one concern: Consider a large application where you will be writing many AJAX calls that require the token in the header. Every AJAX request will have the exact same lines of code to add the token. Is this not seen as a design problem because there is lots of code duplication? If you had to change the way you add tokens, you would have to change it for every AJAX request. Is there a solution to this?

[webcodeexplainedYT]

Great video. Session storage will be destroyed once tab is closed. I think its better to store them inside cookies.

[HarshKapadia]

When the 'Authentication' header is set (with '<auth_type> where '<username>:<password>' is encoded as a base 64 string), is that request header seen in the DevTools? I couldn't see it and if it is not seen, how is it sent to the server? Also, if it is seen, won't it reveal the username and password or the token?

[scifiroel]

Can this be used to access a wordpress page which visibility setting is set to private? I'm making a music app (personal project) with cordova where I load my music data from a custom post type loop. To make things easier I just load the div of the wordpress page that displays this content. Off course, I don't want the page to be visible publicly on my wordpress, so I set the visibility to private. Problem us, this also breaks my ajax (understandably). Can I use a similar method as you did in this video so that the app users can authenticate themselves and access that content despite the page being private?

[tajbinsheikh]

hi @steve, how are you ? Hope you are fine. My qst is, in your fatch using basic authentication video you set the header property name as "Authorization", where in this video you set the property name as "Authentication". Now is it authentication or authorization ? thank you.

[mrjeter]

Please, what VSCode colored extension is being used in order to have a better understand of indentation?

[bikramchettri]

Can you teach about debounce for window scroll events. Suppose only if the image comes to the viewport then only request for the image.

[radz]

Hey man, I'm having a problem with a current project.


I'm scraping a website with authentication and grabbing some data. I have that all done, however, I'm also setting up my own web app and I want the users on my website to authenticate using the other website, but then only show the data I scraped. I'm not currently storing any kind of user data. The problem I'm having is keeping the user signed in on my website. Would I use jwt? Or is there a better way of doing this? I'm pretty new to all of this so any help would be great.


PS I have permission to scrape the website as it is for a college project.

[HarshKapadia]

Why do I need to use 'JSON.parse()' when I am getting the token from the session storage?

[saripudingon]

How if the user can copy the token saved in sessions storage and use the request outside other website?

Hello you you can to explain how conect with api mercadolibre by fetch?? i have problems with the token!

[knufflpuffl]

Now what I don't understand is: the server has to first send the token to the browser right? So how does this make anything more secure? any attacker could just read the token out and then use it in his requests or am I missunderstanding something here?