HowTo: Handle JSON Web Token Authentication API with React

This is a "sequel" to a previous project we put together, which involved setting up JWT (JSON Web Token) authentication in Java Spring Boot.
Building from that starting point, we're going to look at how to consume, or work with, this authentication server API using a JavaScript frontend. This video will go through setting up React, React-Router and a teeny bit of React Redux to handle one way to work with the server!
It's gonna be fun! ☕☕
👉👉Grab the source (on github): t.ly/VSDSN
🔗Grab My Other Products Available:
- Build Your First Web Service API Using Java Spring Boot wazoowebbytes.gumroad.com/l/x...
👋🏻Connect with me:
Twitter: / eyuzwa
🔗Links & References:
- Docker Desktop Client: www.docker.com/
- Start Spring IO: start.spring.io/
- JWT.io: jwt.io/
===---=== Chapters ===---===
0:00:00 - Introduction
0:01:05 - demo
0:03:38 - get started with vite-js
0:05:59 - npm install react-router and redux
0:06:48 - update vite.config.js
0:08:51 - update main.jsx with react-router
0:10:46 - creating the Home component
0:12:14 - creating SignIn and SignUp components
0:15:36 - creating a form handler for SignUp
0:21:28 - using fetch for signup api request
0:25:45 - creating a form handler for SignIn
0:31:13 - basic intro to redux store
0:34:42 - basic intro to reducer
0:41:45 - adding redux to the SignUp
0:42:39 - updating Home for testing authorization api
0:51:22 - wrapping up
#react #redux #jwt

[@mrcoder9401]

Have been waiting for this one, Thanks Wazoo for taking this up. Already started learning from this. Will update on completion.

[@wazoowebbytes]

thank you so much! Yes please do! I really hope my approach to going through these React concepts isn't "too light"! Good luck!

[@welcomeJava]

Your step by step detailed explanation helped me a lot!! I have been struggling with this subject for a while. Thanks a lot 😀

[@wazoowebbytes]

thank you so much for the feedback and I'm happy to hear that it's helped you move forward in your own journey!

[@OSCARCORTEZVILLCA]

thanks for all man, I really appreciateted, Greetings from Bolivia :)

[@wazoowebbytes]

thanks so much! Greetings from Canada! :)

[@wazoowebbytes]

Thanks all! Been trying to get this published for a while. I'm really hoping my high level introduction to some of these React concepts made sense. If there's interest, I'll definitely do a deeper dive into each of these React libraries.

[@w1llow01]

Thanks Wazoo, can you add refresh token

[@robtai6225]

good content. can. you make a video for beginneers interested in spring boot and react all in one series?

[@wazoowebbytes]

absolutely - fantastic suggestion!

[@HsounaAli]

thank you for the video but i have cors error when sending request with react can you help me please ? thank you and sorry for my english

[@wazoowebbytes]

no problem - hope I can help! Did you use the "changeOrigin" property for the proxy config in the vite-config.js file? Did you make sure to restart vite? usually just ctrl+c then "npm run dev" again.

[@HsounaAli]

@@wazoowebbytes thank you i did not use vite and i fix it by adding cors config in security in the backend

[@wazoowebbytes]

@@HsounaAli excellent!