React js project # Login with API

in this react js project we learn how to make the Logout feature in the react js project from scratch. This video is made by anil Sidhu in the English language
Login API integration
Test API for Postman
Make Form for Login
Store Data in State
Call API on Submit
Add LocalStorage and Redirect
Test Complete API

[@ImranKhan-hl7qp]

On refreshing the page, it is redirecting to the login page. Solutions::: result = await result.json() if(result.error) { alert(result.error) } else { localStorage.setItem('user-info',JSON.stringify(result)) navigate("/add") }

[@wilsonibekason]

This is why simplicity matters

[@HasanHayder]

great video thank you

[@rabinsubedi5602]

Can you make a video on multiple user like admin and user login system with one login form

[@CandySphynx]

Thank you very much for this video!

[@kavithamadhu4983]

easy to understand..thankyou

[@sengseangleng]

That is a good one.

[@soniclickadbox8646]

very nice tutorial well explained , Sir please give a tutorial on when we hit a url direct it does not work while we go with menu it works.

[@bhakti.sangeet.officials]

Line 13:6: React Hook useEffect has a missing dependency: 'history'. Either include it or remove the dependency array react-hooks/exhaustive-deps webpack compiled with 1 warning solution this error ??????

[@enessenturk8237]

Did you find the solution? I am getting the same error.

[@xalerion6996]

@@enessenturk8237 useHistory is outdated, look for useNavigate at router documentation

[@enessenturk8237]

@@xalerion6996 thank you so much.

[@pushpendraupraity3755]

if we are refreshing the page, it is redirecting to the login page again, how to stay on the main dashboard until we press the logout button ?

[@DullJoker]

Good tutorial, honestly had some trouble understanding your speech due to your accent but after a couple of minutes it was alright alright alright :D

[@yashbharadva4636]

When i put condition on {login} then it shows this :- JSX props should not use functions. So i use function method so what should do and what are the solution for this..!!!

[@peterkovacs9086]

Hey! There is no validation in the frontend! If I hit the LOGIN with empty fields, or with unregistered details, I still can access Add product page etc...You need to check Laravel backend Api response in frontend javascript code!!!!!!!!!!

[@DataVisualizationswithVizARTGr]

cool

[@satishksharma]

How to prevent CSS & CSRF attacks with react and laravel

[@mohankrishna9113]

In html file do i need to specify anything apart from script tag by following URL of js file

[@masumalimaknojiya9623]

How to Display User detail and wrong detail Error show.. help me

[@KP-Kumar]

Thanks❤

[@GMGranMartu]

i will forever love you

[@cpimenteldev]

Hi bro, you can put repo? thanks!

[@tapanbhanot]

Where is the api code and db ???

[@suhasgardare4833]

Inside description you can see whole playlist... 👍

[@DullJoker]

for me, the login works like a hit or miss. sometimes it works and sometimes it just refreshes the page. Has anyone got a clue what's going on?

[@ALBDev]

maybe you should prevent the default

[@idreesibrahim5642]

believe me its very simple way to login.

[@kosalsv8832]

Im used this method it shows CORS policy: No Access Control Allow Origin error. How to solve that ...pls help??

[@shreyash9357]

How to restrict back button after login i need to restrict after login cannot be reverse from dashboard to login

[@engr.raudahmed4730]

need display password or email does not match message or which return api

[@sahildudani4658]

Goterror while using await how to solve it Unexpected reserved word 'await'.

[@manikandana.m3068]

Is it correct to hit the login request from client side so that password can be seen in api request. Is there some other way for not to expose an login request from client side

[@shashank_rajak]

All the devs teaching people to use local storage for authentication are doing a serious crime actually. It’s not at all a good practice to do authentication with local storage as the ultimate source of truth, especially user info.

[@shashank_rajak]

Even on Udemy, folks are teaching to use local storage to check a user authenticity. But, anyone can put a token in local storage and when the page reloads it will find a token and get user logged in. I don’t know why everyone just tells the same way of authentication.

[@gilalingayao3452]

@@shashank_rajak do you have a better idea not to store token on local storage, if you have can you share?

[@Behzad_Khoshdouz]

The main reason for not using local storage as for keeping the token is its security, as you may know all the js on the page has access to the local storage, and if one of them is just vulnerable to for example XSS, they can access the local storage, and send it to the attacker. best practices suggest to use cookies for keeping tokens (jwt etc), and the cookie must be set with HttpOnly flag, these kind of cookies are not accessible by the JS on the page, the browser blocks js to access them, and they will be sent to the backend on every http request.

[@ganeshkummara6057]

Hai bro I'm Ganesh How to take Dummy API for Login page AUthentication Purpose

[@gaminggeekindia]

why didnt u show what's in Header file brother ;(

[@a-23-roushansingh14]

were is the github repository for the same??

[@shubashdutta1986]

How to catch the error in this login If the user provide wrong password than

[@kameshrajk9262]

hi broo I got one error which that Without input also it going to dashboard

[@youtubechehra]

Code pura sir chahiye

[@yraghavendra8000]

what is that "/add" ? is it is component name ?

[@Professor077]

I added wrong information it still login

[@anshulsoni653]

how you have routed the files ?

[@DesiMatrixXD]

Don't store users info in local storage.

[@youtubespecial6517]

Let me jump on code....and code is already have useEffect hook . why u take that not explain at all in the video u should have to explaine it

[@aprfocus7501]

Hi can share the source code of Reactjs

[@anitagrawal2952]

What is in the header.js file

[@thehas4794]

useHistory??

[@krishnavarma20]

can you send me git repository to download

[@radheshyamgupta8656]

Hey ,how to hide key and password

[@AKvLogs-gb3cu]

Bro react native main bhi signup and login pr video bnayn

[@instant-code]

right

[@creatorboy4901]

sir api kaise create kare

[@miketayo]

the log-in works even when wrong data are passed. it should only allow authenticated users to login

[@DesiMatrixXD]

You need to authenticate it in backend. If you want, there are plenty of tutorials available

[@jakjun4077]

@@DesiMatrixXD but how to make the server remember every authenticated user?

[@DesiMatrixXD]

@@jakjun4077 database

[@jakjun4077]

​@@DesiMatrixXD i am still having doubt that if the user is authenticate successfully, the particular information will be return from database and store inside a local Storage or cookies, but some said these method might introduce Cross-Site attack or forgery, do u have any idea? let say i am implementing the system using flask as api, and react as the frontend and request information one.

[@jakjun4077]

btw, i am still new to this area, so basically what u means is storing the token in database and making it expires after a certain period? ps: because there are too many ways to do it.

[@gopalbhardwaj3722]

Hi Sir, can u pls provide the link url for this entire project series.. not able to find out

[@msn.muddam]

Hi Gopal, did you figure out from where the project was?

[@Armankhan-jy4eb]

forgot password ka video ayega kya is project mein ??

[@user-mr6hu6qm9i]

can you provide the source code

[@retroRoadtrip11]

Can you provide me login back end code

[@retroRoadtrip11]

I want only login controller and service

[@narinetovmasyan9756]

can u send code?

[@pushpendrasingh-jz3yq]

sir ye code kha milega 😥

[@slmshady539]

Sir ye Sara chiz Ka shuruaat Kaha se hai... Is wale project Ka ... Please sir bata do

[@slmshady539]

Matlab is video me login samjhaya hai Apne toh shuru Kaha se Kia hai isko... Sign-up aur ye sab Kaha se hai shuru

[@preethisanthosh4080]

Where is app.js....not showing app.js ....mental

[@AhmedHossamElDocInshaAllah]

no God except allah

[@RR-le7wd]

bro i need code for this video

[@pizzapanni]

type it yourself

[@premprakash6673]

bhai apna english improve kar, it's too much irritating while u make simple grammatical mistakes in the sentences.