Implementing a login session authentication using React js, Context API and Python Flask API and JWT

In this opportunity, we are building a small login system using:

- Python Flask framework for building API's.
- Flask JWT Extended library to implement JWT tokens.

You can find the exercise code template here:

Video Chapters:

0:00 - Intro
0:32 - How authentication works
12:04 - Creating a token in the backend
23:14 - Asking for a token from the front-end
36:14 - Storing the token in the front end localStorate
43:42 - Redirecting the user after login or handling error
53:40 - Making the session persistent (avoid loosing it on refresh)
57:36 - Logout
1:00:00 - Making authenticated requests

[HarveyXE]

I found this demo very helpful. Thank you. Your explanation of the project and your troubleshooting along the way are well appreciated.

[daxmitchell]

This is a really excellent video. My suggestion is to make more like it. I also like your short videos but this one is especially great because you can go into depth and show the entire workflow in one video. Awesome job!

[laxmanc]

I was looking for this exact tutorial, Beautifully Loved it

[manufigueira]

Awesome, just what I was looking for. Thanks!

[stantonviaduc]

New channel. Bet its tough to get motivated at first. Im a software engineer and this is quality education. Keep it up and thank you. Subscribed.

[rifqinaufalabdjul]

Really helped me! i'm trying to build my first website with frontend and backend wish me luck guys

[falcan]

This demo is the best and helpful. Thank you

[meetjesusoutreach]

Very detailed technical explanation. You're a gifted teacher

[jorgeduardo]

this is great quality content! love the energy too

[JohnMoncler]

Great video. Helped me a lot with my project. Thank you sir

[aniketsurve]

Thanks for the video tutorial, was really helpful!!

[francisf.massaquoijr.]

Thanks this is extremely helpful, can you kindly create a full blog with flask and react including authentication.

[ayoubmahjoubi]

Thanks for the video! I have a question about the lifetime of the token ?

[ApartmentAngelsFireStarters]

btw this is how you get the token .then(response => {


sessionStorage.setItem('token', response.data.access_token);
})}
The way he shows it works half the time with flask, this gets to it fully.

[TruthSeekerClub]

How to send current user logged data to frontend?
Like id and other info for extra usage e.g. To request item or list by current user ID and show him his list of items in homepage?

Do I have to do two requests like get authentication in one request and use token with user email for another request to get logged user info?

[Zetnal_]

Hi! How can we use emails and passwords that are in the database instead of "test"?

[eddycarra]

I am getting an error here for the store and actions. They are listed as undefined which means I can't get through to the token or the login function in the flux.js. Something isn't propagating from the Context being called in my login view. Something must be off in this hook that I am not seeing. Is it possible that I have to use the getActions? I am a bit lost here.

[alvinnify]

just curious on how we can manage if we have various user roles that access different pages

[lesliewubbel]

@49:32 What you doing on lines 25 and 26 this code is not found in your github

[verygood]

Thanks for the video !! Can you do video on production deployment to cloud and how do you expire and refresh the token?