Implement User Login through an API call using React and Redux Toolkit

In this tutorial, learn how to implement user login through an API call using React and Redux Toolkit.
If you want to learn about how to persist user login in redux toolkit with redux persist then watch my below tutorial
Redux Persist Tutorial: • Redux Persistent User ...
If you want to support me with a donation🎁
Buy me a coffee: www.buymeacoffee.com/anwarhamzat
If you have any issues you can contact me:
LinkedIn: / hamza-anwar75
Instagram: / humzaanwar74
For paid projects, contact me
Email: [e-mail]
Fiverr: www.fiverr.com/hamzawebdev75
Upwork: www.upwork.com/freelancers/~0...
Special discounts for students who are looking for paid courses to better elevate their skill level
GET Rs 5000 discount on Azad Chaiwala Php Web Development Course
azadchaiwala.com/course/web-d...
GET Rs 6000 discount on Azad Chaiwala Mobile App Development Course
azadchaiwala.com/course/app-d...
GET Rs 5000 discount on Azad Chaiwala Python Programming Course
azadchaiwala.com/course/pytho...
Music used in this video
1- Fragments by AERØHEAD
Fragments by AERØHEAD | / aerohead
Music promoted by www.free-stock-music.com
Creative Commons / Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
creativecommons.org/licenses/...
2- Lifting Dreams (UA-cam Audio Library)
3- Dreamland (UA-cam Audio Library)

[@temashik]

Thanks! Your video helped me a lot.

[@akhil2476]

Thank You so much... I was looking for this kind of video only.... Very Usefull

[@RakibHossain-ho7cy]

Great and easy way to understand without voice 😆

[@lfc5times130]

Great video bro.. I have used DRF for backend and next js (frontend).. Used custom authentication and login with redux is integrated! Thank you so much! It took me 2-3 days to Integrate for my own project and found this video very helpful..

[@the_og_canvas_art]

very useful

[@AvdheshKumar-sm5hl]

Very helpful

[@raycrismaldonado3318]

Great video, help me a lot!

[@mohamedsameh1903]

awesome

[@753Manoj]

Great work....please provide sorce code link too

[@quannguyenminh6872]

Great, thanks

[@JohnDoe-to8vr]

is putting all the user data in the localStorage safe ?

[@Ls-xb2bn]

Great, thanks, dude. May I ask you a question, is necessary react-readux? I mean, is not redux-toolkit enough?

[@JSSolutions]

React-redux connects react with redux store, useDispatch and useSelectors are from the react-redux package

[@lucky_bus]

Hi) Thnx for tutorial )What does "user/loginUser' in the 6 row of UserSlice mean?

[@JSSolutions]

It is just a string to identify what functionality we are working on. You can name it anything for your ease

[@lucky_bus]

​@@JSSolutions thank you for quick reply) So, I assume that I can't find this literal anywhere in the rest of code, and it's just for my convenience?

[@ThaiNguyenDevOfficial]

why do you have to add e.preventDefault(); in handle Login event ? - I'm trying to code the same and remove it, but it make a bug that I can't navigate to Home page !
By the way it still help me alot , great video !

[@JSSolutions]

To prevent the default refresh behaviour of form when you submit

[@ThaiNguyenDevOfficial]

@@JSSolutions thanks ! I got it

[@braintricker_soft]

why react thunk if i can login user from component and set user into localstorage

[@JSSolutions]

You can use components but if u need to separate auth logic then use redux async thunk

[@user-ty4er3mg8p]

Where you kepted your credentials like email and password ?

[@JSSolutions]

No need to save password, just user object which contains email in local storage

[@bubee6891]

what about hostName in config js?

[@shahidx0x]

replace that with yours or you can directly use your host name

[@duckdev1510]

How to replace it, please show me@@shahidx0x

[@aashi273]

Hey , i have a small doubt...After getting token ,where should i store it?

[@JSSolutions]

Local storage or cookies, you can also try redux persist

[@aashi273]

Hostname and token included in config .js isn't it?

[@mahreennazir6574]

@JSSolutions Is there any vedio uploaded by you related to it its token authentication ?

[@beverlyvladislav6366]

When the website is refreshed after logging in, will the data be lost or will it remain?

[@JSSolutions]

It will remain there because I am getting it from Local storage

[@mahreennazir6574]

@@JSSolutions I am confusing is it necessary to store user data into local storage ?
and we are posting data to the backend Api so we should store it also as you store it in local storage

[@dipayansamanta2425]

pls share the code sir

[@aanshirra8445]

mine is not centered like this

[@JSSolutions]

Give width to your form, for example 500px then use margin auto to center the box

[@ayaansiddiqui7064]

can you please provide source code

[@somnathbiswas07]

sir.. what is the need for local storage then?you can get the data from the backend only

[@JSSolutions]

To persist the user token and use it in other API calls where required

[@ccmajor6147]

@@JSSolutions bro you must be the biggest idiot on the planet why even use global state when you are just using localStorage to conditionally render the components ?