Login Logout in React JS - 2022 ✅ [ Redirect After Login to Home Page ]💻 Important For Beginners

Рет қаралды 50,550

2 жыл бұрын

Welcome To Saifi Code - In This Video We Have Discussed Following Topics :
1.Logout Implementation in React JS using tokens
2.Redirect after Login in react using JWT tokens
3.Usenavigate react router v6 routing Implementation
Forms & Login API Call in React JS - PART 1 of This Video (with source code link):
• API Call In React JS u...
code Link of Part 1 of the video - saificode.blogspot.com/2022/0...
Really Appreciate your comments to improve the content and please subscribe to support Saifi Code.
MERN STACK Authentication : • MERN Authentication - ...
Image Upload and Preview in React JS (with source code link) :
• Image Upload In React ...
React JS Shopping Cart App Project Link (with source code link):
• Shopping Cart React.js...
Multiple Image Upload in React JS and Node JS (with source code) :
• Multiple Image Upload ...
React CRUD with Material UI (with code) : • React CRUD Operation U...
Queries on Instagram : / er_naimu_saifi MY GITHUB LINK ---- github.com/NaimuddinNaimuddin

Пікірлер: 126

@RaviYadav-gb3ft 2 жыл бұрын

thank you bhai it helps me a lot I've searched this on youtube but have not found as easy as this video keep it up bro

@SaifiCode 2 жыл бұрын

Thank you Ravi bro keep supporting,checkout other videos .and let me know your review

@sohanwagh1555 Жыл бұрын

Thanks you so much bro.luckily got you channel, please keep making videos

@SaifiCode Жыл бұрын

Thank you, I will

@codecrew9788 Жыл бұрын

excellent yrrr....bahot dhundha esa video..thanks for making this video

@SaifiCode Жыл бұрын

You are welcome code crew 🙂 keep supporting will be making more such content

@raviiirathore9984 Жыл бұрын

Bro you are great, lot's of love to you❤️ Happy Eid in Advance 💐💐

@SaifiCode Жыл бұрын

You are welcome bro

@rutwikshinde6021 2 жыл бұрын

Great video bro. you absolutely killed it.

@SaifiCode 2 жыл бұрын

keep supporting bro , you are always welcome here

@ABadini389 Жыл бұрын

mashallah bahi Allah pak kamiab kary ap ko ..and mera ay 2nd video hai login ka mai ne both kuch understand kea ap sy

@SaifiCode Жыл бұрын

welcome bro keep learning

@ABadini389 Жыл бұрын

@@SaifiCode bahi jan ap ka sign up wala video dekna start kea mai ne and thanks dill sy

@darabkarim6073 2 жыл бұрын

very nice explaination. easy to understand.. keep it up bro

@SaifiCode 2 жыл бұрын

Will try my best

@vimz92 2 жыл бұрын

Easy to understand and precisely to the point. Thank you!! Subscribed. Can you also show the same functionality with MongoDb db connected, with JWT and all features.

@SaifiCode 2 жыл бұрын

Thank you bro, sure will make a video asap on this

@C0deWithMubashir 6 ай бұрын

mara pass ha codee send kar ta ho

@C0deWithMubashir 6 ай бұрын

app.post("/login", async (req, res) => { const { email, password } = req.body; try { if (email && password) { const finduser = await User.findOne({ email }); if (finduser) { const checkpassword = await bcrypt.compare(password, finduser.password) if (checkpassword) { const token = jwt.sign( { id:finduser._id }, process.env.MYSERECT_KEY, { expiresIn: process.env.EXPRIY_KEY } ); res.json(token); console.log(checkpassword); return; } else { res.json("wrong email"); } } else { res.json("Email Doesn't exist"); } } } catch (error) { res.json(error) console.log(error) } }); app.get('/getUser/:token' , async (req,res)=>{ const {token} = req.params; console.log(token) if(!token){ res.json({message :"Access Denied"}); } const decode = jwt.verify(token,`${process.env.MYSERECT_KEY}`); const {id} = decode; console.log(id) const userData = await User.findById(id); res.json(userData) });

@jayeetasadhukhan3831 Жыл бұрын

This is really helpful. Thanks 😃

@SaifiCode Жыл бұрын

Glad it was helpful!

@rafeekahmad9979 2 жыл бұрын

Good video keep it up brother

@SaifiCode 2 жыл бұрын

Appreciate it

@aashutoshkunwar1842 2 жыл бұрын

Keep going bro ❤️

@SaifiCode 2 жыл бұрын

Thank you bro

@nayabrasool6149 Жыл бұрын

this is absolutely helpful

@SaifiCode Жыл бұрын

thank you bro keep supporting

@IntellectCorner Жыл бұрын

bro this video was really helpful. Keep on bro

@SaifiCode Жыл бұрын

Thank you bro , keep support ing bro

@IntellectCorner Жыл бұрын

@@SaifiCode bro where u from? I am from Ahmedabad Gujarat, I am also running yt channel. Mostly copyrighted content but planning to pivit to original content.

@SaifiCode Жыл бұрын

@@IntellectCorner from delhi ncr bro , you can connect me on insta

@sanju_ch_8782 2 жыл бұрын

Brov, its navigating even when i give wrong credentials. my access token is storing some error response and useEffect if condition is checking only if token is present or not. it is not checking if the token has proper server response

@SaifiCode 2 жыл бұрын

In API response if there is err no token will be returned from backend . Token is returned only in case of success. When we go to home page we check if there is token or not . If there is token we will remain at homepage else we return the user to login page to login and get the token .And when we ask some protected data from API they will ask you this token also. If token is expired they will return you err and we will redirect user for login and get the fresh new token. If token is ok data will be returned. So going to homepage is not a problem. Problem is when we call API on homepage to get protected data .and API will check token first

@shubhamsarkar7525 2 жыл бұрын

Thank you sir

@SaifiCode 2 жыл бұрын

All the best

@freefirezone2902 5 ай бұрын

Thanku sir this code is too good😊

@SaifiCode 5 ай бұрын

Welcome bro

@sanjushekhawat6446 Жыл бұрын

really helpfull thanks

@SaifiCode Жыл бұрын

You're welcome!

@DiegoMorales-pg5om Жыл бұрын

good video, it helped me, but with subtitles it would be better thanks

@SaifiCode Жыл бұрын

ok will try to add subtitles too

@harshkohli1326 Жыл бұрын

Thank you so much

@SaifiCode Жыл бұрын

You're most welcome

@cheerlalaxmansagar2396 Жыл бұрын

Super👌

@SaifiCode Жыл бұрын

Thank you bro keep supporting Sagar

@saifitech2.097 2 жыл бұрын

Good video bro

@SaifiCode 2 жыл бұрын

Appreciate it

@ronqualwebs3000 Жыл бұрын

brother after adding logout button to app.js my dashboard page which is made up of using three component like header footer and sidebar i need to refresh page then i going to login page how to solve this

@SaifiCode Жыл бұрын

bro on logout button click do two steps: 1.clear the token or localstorage 2. route using navigate to login page

@teslablinder8850 Жыл бұрын

why am i getting useNavigate() may be used only in the context of a component. this error?

@SaifiCode Жыл бұрын

first initialize the useNavigate like const navigate = useNavigate() above return in the functional component then use navigate('/home') inside return in component

@jitmondal2377 2 жыл бұрын

thank you

@SaifiCode 2 жыл бұрын

you are welcome

@hatin7246 Жыл бұрын

Mate you save my life

@SaifiCode Жыл бұрын

Thank you bro, keep doing comments and keep supporting

@viveksinghkushwaha2401 2 жыл бұрын

nice brother

@SaifiCode 2 жыл бұрын

Thank you brother , god bless you

@sourabhkumar572 Жыл бұрын

Thanks brother

@SaifiCode Жыл бұрын

you are wlcmbro

@nikleshniks Жыл бұрын

Thanks bro, very helpful for me.😍🤩😍

@SaifiCode Жыл бұрын

You are always welcome Niklesh , keep learning keep supporting really appreciate your support

@ZeshanMukhtar1 Жыл бұрын

Thanks

@SaifiCode Жыл бұрын

Welcome bro

@kitons2685 5 ай бұрын

if we try to go back from the home page using the browser back button, will it redirect to login page or it will restrict?

@SaifiCode 5 ай бұрын

It will not restrict you will go to login page

@manojrawat5756 Жыл бұрын

❤❤❤

@miansaqlain8360 Жыл бұрын

Thank you

@SaifiCode Жыл бұрын

You're welcome

@iturraldec Жыл бұрын

thanks!

@SaifiCode Жыл бұрын

Welcome!

@kashmirtechtv2948 4 ай бұрын

But agr hmary pass bht sary pages hain to hr page p use effect to ni lgaty phirain gy na

@SaifiCode 4 ай бұрын

This was for beginners level learners who don't understand routing level authenticarion just to make simple I showed this way. The best way is to use routing level authentication

@adithyashetty2093 2 жыл бұрын

Can you share creating home page

@SaifiCode 2 жыл бұрын

Sure . Please check the video cards or description

@Sagar-bq1fn 4 ай бұрын

After redirect to dashboard how can I fetch login userdata ?

@SaifiCode 4 ай бұрын

Call api in didmount to fetch user data or save login user data in localstorage

@usamasaeed1434 Жыл бұрын

Kindly Provide a link of previous video which is conected to this

@SaifiCode Жыл бұрын

complete project on mern stack shopping cart wali series check karna

@miansaqlain8360 Жыл бұрын

Sir any video how we can check token at route

@SaifiCode Жыл бұрын

ye video check karna isme route protect kiya hai main bhi is topic pe jaldi hi video launga kzfaq.info/get/bejne/aNFogc-Wq9CrZ30.html

@Maryx_69 3 ай бұрын

What in your app.js file ?

@SaifiCode 3 ай бұрын

I have provided code link in description , for further questions let me know in comments

@robinsinghchoudhary6145 Жыл бұрын

Bro typescript pr ek video bnao pls 🙏

@SaifiCode Жыл бұрын

Sure robin bro

@usamasaeed1434 Жыл бұрын

home page se login form kesy remove krna Hai after login successfuly ?

@SaifiCode Жыл бұрын

after successfull login api resonse , redirect to desired page using useNavigate or useHistory

@tejaswinic9225 Жыл бұрын

Hi..can you provide github link for this project?

@SaifiCode Жыл бұрын

github.com/NaimuddinNaimuddin checkout my github account , this is part of MERN Stack series

@yeminenisriram4972 2 жыл бұрын

Please do same in react native also

@SaifiCode 2 жыл бұрын

I will try my best for this topic as suggested by you

@sargulltahseen6155 Жыл бұрын

Hello thank u for the tutorial it was very helpful could u give me the source code

@SaifiCode Жыл бұрын

you are welcome sargull bro , please check the link : kzfaq.info/get/bejne/bLV3pLeZ0rbPhXU.html

@purvisolanki3791 6 ай бұрын

plz give me source code link of his video only, I am strugling to find it in your github mern repos

@SaifiCode 6 ай бұрын

Iska link description me hai aap check karo

@trungtran1635 2 жыл бұрын

you can show code of App.js please

@SaifiCode 2 жыл бұрын

Sure bro check the routing video in the playlist you will get the app.js code

@spider-man150 10 ай бұрын

Kha h Bhai phle Wale video login wale. Kha kr diya login implement

@SaifiCode 10 ай бұрын

Api call in react js wala video h bhai , description me link hoga

@nikhilyadav2108 9 ай бұрын

Can u provide a full code and github link of this code

@nikhilyadav2108 9 ай бұрын

I want same code

@SaifiCode 9 ай бұрын

sure bro check the code link - saificode.blogspot.com/2022/08/api-call-in-react-js-using-axios-react.html you need this code .

@user-tr8fr9ok2i 11 ай бұрын

kya ap iska source code de skte ho

@SaifiCode 11 ай бұрын

Bro iska source code available nahi hai mere pass

@rachanat.v6890 2 жыл бұрын

can you add source code

@SaifiCode 2 жыл бұрын

sure will add the code to git as soon as possible

@jagdishjena9058 10 ай бұрын

Eska previous video kaha h sir?

@SaifiCode 10 ай бұрын

is video me complete hai login logout part -- kzfaq.info/get/bejne/epp9fKl2lsmWiH0.html

@jagdishjena9058 10 ай бұрын

@@SaifiCodeThank you so much sir for ur fast reply

@hiitechzBaBa Жыл бұрын

bhai browser me back page click krne pr home page se bahar kyu ho ja rhe

@SaifiCode Жыл бұрын

aap community me post kyun nahi karte bro

@hiitechzBaBa Жыл бұрын

@@SaifiCode sir koi video ispe ho to link share kare log in page me browser ke back button disable krne ka

@SaifiCode Жыл бұрын

browser ka back button nahi disable karte hain MERN authentication video check karo aap usme login and home se related detail me hai

@hiitechzBaBa Жыл бұрын

@@SaifiCode thanks for suggestions

@pallavichawan6079 Жыл бұрын

Sir please share source code.........

@SaifiCode Жыл бұрын

ecom-react wale project me sab covered hai logout part bhi

@harshpandey6052 2 жыл бұрын

Mera login to ho gaya but logout nhi ho raha....😔

@SaifiCode 2 жыл бұрын

@harshpandey6052 2 жыл бұрын

@@SaifiCode clear bhi hoo raha haiii, but login page pr jump nhi ho raha..

@SaifiCode 2 жыл бұрын

@@harshpandey6052 automatic jump nahi hoga bro , clear token ke sath hi route bhi karte hain to login page logout button ke click pe

@harshpandey6052 2 жыл бұрын

@@SaifiCode jaisa aapne video me kiya hai waisa hi kar raha hu but nhi ho raha

@SaifiCode 2 жыл бұрын

give me your skype id , will connect you

@alishashaikh2745 4 ай бұрын

Thank you sir

@SaifiCode 4 ай бұрын

Welcome. Keep supporting