React JWT Authentication

preview_player
Показать описание

Learn how to Login with React and handle JWT Token using HttpOnly Cookies. We will Login using JWT( JSON Web Token ) which is the standard method for SPA Authentications. We will not use the traditional "Bearer method" but instead we will login using HttpOnly cookies which is a more secure authentication.

This video can be combined with other videos:

00:00 Preview
01:40 Prebuilt backend
04:06 Installation
05:15 Template
11:49 Router
15:57 Register
24:05 Login
27:27 Authenticated User
31:31 Logout
36:09 Final Changes

#react #reactjs #javascript
Рекомендации по теме
Комментарии
Автор

I thank you very much, I have been perfecting my skills in fronted in 3 technologies, thanks to your videos Angular, Vue and React.

A sugestion in case of someone have a problem with router:

This is the solution being today one date one year after this video.

Because update in React

<BrowserRouter>
<Navigation name={name} setName={setName}/>
<main className="form-signin">
<Routes>
<Route path='/' element={<Home name={name} /> }/>
<Route path='/login' element={<Login setName={setName}/>}/>
<Route path='/register' element={<Register/>}/>
</Routes>
</main>
</BrowserRouter>


Thanks so much

jonathancolorado
Автор

Really good job! Please continue explaining react in typescript! Very helpful!

Daniel-qsyw
Автор

I love React Please do some more real world stuff using it.
Thank you.

umerfarooq
Автор

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
what to

muhammadrizwan-izer
Автор

Actually, this video doesn't touch the topic of the JWT Authentication, it is rather about React and React Router.

rumate
Автор

for the logout do we have to include credential in fetch call?

mrlectus
Автор

Your explanation is good but where is the JWT here?

suneeltalawar
Автор

26:24 when I try to log in, the cookie doesn't arrive. In Chrome Dev Tools I get the issue "Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute". I'm using the Django backend.

MrKeepItTrill
Автор

You deserve so much love for this video ur the best

dubekilercw
Автор

What if I call the APIs from a different domain, will that still work? The cookie I mean?

chafiullahshuvo
Автор

Pls @ScalableScripts what is the extension you use for the auto completion of react components?
And what extension for the displaying of the light gray indicators that show what each argument is for in the functions you write in the video?

Also, thanks a lot for this material, it's very well explained!

LuadoO
Автор

Hey brother, I followed your Django JWT tutorial and am here to give it a React frontend. I am using axios for requests. The problem I am facing is, I'm not able to set the cookie via axios. If I do a post request in Django REST page, it works well, but fails on requesting from axios. Please

ajayraho
Автор

@26:20, I get different cookies named crsftoken and sessionid and not 'jwt'. I get the correct jwt cookie in postman, but not in the browser. I have searched around for a solution for a while now, would love some insight.

Willifordwav
Автор

Great man.. you have covered topics out of box..

dipenparmar
Автор

@22:00 on clicking register i'm getting Status Code: 500 Internal Server Error can you help me with this?

biishtplease
Автор

Im not getting cookies even though i set withcredentials=true. In console it show "SameSIte" attribute warning.. DOnt know how to fix this

jacksonpatrick
Автор

How do i authorize the current user in headers?
I can't seem to get request.user using this process?

rayon
Автор

Hi and thanks for all your videos, i'm learning React but using .js files Can you tell me what's the difference, chers.

Nico-suku
Автор

Thanks for the fantastic demo.

The only problem I hit was that once I added credentials: 'include', I started getting CORS errors and could no longer send/receive requests to the server.

Any idea how to get around the CORS issue?

DanielEastland
Автор

@ScalableScripts Any idea how to solve SameSite attribute problem?

ahlanio