React and JWT

Angular does it. Blazor does it. React does it too. Let's look at Axios Interceptors.
Source code available at:
github.com/Jas...
Server code available at:
github.com/Jas...
Topics include:
- React state hooks
- Axios HTTP library
- Storing data across components with React contexts
- Managing lifecycles with effect hooks
- Adding Axios interceptors

[@CodingTutorialsAreGo]

I'm jumping in at the deep end here with React. Would you be interested in some more introductory videos? Let me know in the comments. Source code available at: github.com/JasperKent/react-jwt Server code available at: github.com/JasperKent/WebApi-Authentication Remember to subscribe at kzbin.info/door/qWQzlUDdllnLmtgfSgYTCA And if you liked the video, click the 👍.

[@MichaelKire]

Worth noting that using a context will effectively rerender everything below its provider when its data changes, meaning that in this case, logging in will probably make the entire app rerender. By using zustand or similar you can prevent this.

[@CodingTutorialsAreGo]

Absolutely, but I wanted to keep it relatively simple. In this particular app, I don't think the rerender on login is a major issue, but it could be in others.

[@JSWarcrimes]

Greate content! Keep it up!

[@sauravbhatta5303]

Thanks for the great series. Once refresh token is completed, can you implement multiple login providers and also implement adding roles to the jwt token? I think these are real practical examples that one should be familiar with. Thanks!

[@CodingTutorialsAreGo]

I'll try to get on to those.

[@diegomelgar2696]

Hi Jasper, thanks again for your high quality videos! What happens when the user refresh the page in the summary page? Will the user still fetch the summary knowing that the JWt is still valid?

[@CodingTutorialsAreGo]

Yes, the fetch will still work because the JWT is stored in session storage and the session persists for the lifetime of the tab. So a refresh within the tab doesn't lose the JWT.

[@ariesandhi]

Dear Sir, can you make a video about JWT and using Vue.js?

[@CodingTutorialsAreGo]

I really don’t know Vue so I’ll have to give that one a miss.