Тёмный

Login implementation using JSON Server REST API | React authentication | React JS Full Course 

Nihira Techiees
Подписаться 21 тыс.
Просмотров 81 тыс.
50% 1

#reactjs #reactcrud #nihiratechiees
This is the part 2 video of React JS Authentication using JSON Server REST API . It's focusing on implementing Login screen
Part 1 - Registration implementation using JSON Server REST API
=====================================================
• React authentication u...
Steps Followed
==================
1, Design Login page using bootstrap & HTML
2, Apply validation
3, Implement Login the Functionality
4, After Login success redirect to Home page
5, Implement Logout functionality
GitHub Source code link
====================
github.com/nih...
Join this channel to get access to perks:
/ @nihiratechiees

Опубликовано:

 

3 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 137   
@rishabhmahajan409
@rishabhmahajan409 Год назад
Thank you Sir, Learnt a lot from this. I was depressed earlier because that I am not learning much or don't have quite knowledge in React as per 6months exp. But this has just give me sort of confidence. Fluent way of teaching is your USP. Please create more these type of projects in React. Regards ✨🙏
@NihiraTechiees
@NihiraTechiees Год назад
Sure, Will make more as soon as possible
@tommytanti1776
@tommytanti1776 Год назад
Falling short of a word in your appreciation. Thank you so much for the hard work, you put into this.
@NihiraTechiees
@NihiraTechiees Год назад
Thanks 👍
@francogonzalez6914
@francogonzalez6914 Год назад
This is explained very clear content man, thank you!
@NihiraTechiees
@NihiraTechiees Год назад
Glad it was helpful!
@BukwatiMonette
@BukwatiMonette Год назад
Thanks very much sir for this awesome video its very straight forward and easy to understand
@NihiraTechiees
@NihiraTechiees Год назад
Thanks and glad to hear
@johnbeniciotobias2550
@johnbeniciotobias2550 Год назад
Kudos to this tutorial ! Very clear and precise , I was able to understand everything compared to the other videos out there, More power keep it up Brother !
@NihiraTechiees
@NihiraTechiees Год назад
Sure, thanks for your valuable comments
@rounakbhattacherje3426
@rounakbhattacherje3426 Год назад
you are a gem brother, nicely explained. thanks for the concept❤❤👌👌👌👌
@NihiraTechiees
@NihiraTechiees Год назад
Glad to hear👍
@rameshneelamsetti
@rameshneelamsetti Год назад
Thank you sir, this video helped me a lot in my project.
@NihiraTechiees
@NihiraTechiees Год назад
Great👍 glad to hear
@samdurai1660
@samdurai1660 Год назад
vera lvl bro.keep going bro.just lightly slow bro.👍👍👍
@NihiraTechiees
@NihiraTechiees Год назад
Will do my level best👍
@gamehacker2011
@gamehacker2011 Год назад
sessionstorage is wrong method to storage becoz its working on only single tab its worst overall.
@NihiraTechiees
@NihiraTechiees Год назад
Why you want use the application in 2 tab. If you want like this use local storage or some cookie option....... This video provides some basic idea for real time implementation..... Don't compare with your own requirement
@jameerbasha5785
@jameerbasha5785 8 месяцев назад
very wonderfull video thanks
@NihiraTechiees
@NihiraTechiees 8 месяцев назад
Thanks
@sawalikorde2722
@sawalikorde2722 11 месяцев назад
best tutorial thank you so much
@NihiraTechiees
@NihiraTechiees 11 месяцев назад
Thanks
@satyasai5172
@satyasai5172 Год назад
Hi Sir waiting for next vedio.
@NihiraTechiees
@NihiraTechiees Год назад
Next week
@balaraman3953
@balaraman3953 Год назад
I try to get the data from the json file it will display empty object but in this json my registered data's are available,I gave the same email and password. In console it displays error 1)Failed to load resources: the server responded with a status of 404 Not (url) found. 2) Get (url) 404 (not filename found) Please reply how can I solve this errors.
@NihiraTechiees
@NihiraTechiees Год назад
Capital small letter check may be failure
@Kamaraj-gx5ql
@Kamaraj-gx5ql Год назад
if (Object.keys(response.data).length === 0) if (response.data[0].password === password)
@deva.d9178
@deva.d9178 Год назад
Me also
@deva.d9178
@deva.d9178 Год назад
Can you please help me bro?
@NihiraTechiees
@NihiraTechiees Год назад
Caps small letters check pannunga bro
@Vthoen
@Vthoen Месяц назад
thx again.
@NihiraTechiees
@NihiraTechiees Месяц назад
Welcome
@sumeetbhikule9338
@sumeetbhikule9338 Год назад
Thank you sir , It was a great video to learn react authentication. Just have one question we are storing data into on of the json file but the admin can see the json file and can have access to users sensitive data eg: password. Could you please tell us how we can protect password or any other sensitive information in json file where we store the users registration data?
@NihiraTechiees
@NihiraTechiees Год назад
Brother json server api is kind of fake api. It's suitable for learning. Real time application we have to use standard api
@sumeetbhikule9338
@sumeetbhikule9338 Год назад
@@NihiraTechiees okay sir thanks for clarification.
@saideepmeka4308
@saideepmeka4308 Год назад
Hi sir, How to implement session functionality if user logged in when he tries to open url in new tab it should work without asking him to login again
@NihiraTechiees
@NihiraTechiees Год назад
Use localstorage instead of session storage
@saideepmeka4308
@saideepmeka4308 Год назад
Its works thank you so much
@jeyhofficial4858
@jeyhofficial4858 10 месяцев назад
Is there part 3? I want to ask how to make sure that once I've logged in, I can't go to "/login" anymore
@NihiraTechiees
@NihiraTechiees 10 месяцев назад
Until you not clicked logout it won't go to login page
@sachinm6068
@sachinm6068 Год назад
sir login implementation using method:POST is different from this method?
@NihiraTechiees
@NihiraTechiees Год назад
Method is our decision only. Since this json server api we cannot include any custom logic. That's why I used this get method
@sachinm6068
@sachinm6068 Год назад
@@NihiraTechiees sir make real time ecommerce react project with all functionalities and using material ui
@Dev-Phantom
@Dev-Phantom Год назад
cool
@NihiraTechiees
@NihiraTechiees Год назад
👍
@LearnReactWithDeep
@LearnReactWithDeep Год назад
Can we call multiple json file and call it in one react app? For login, registration and employee
@NihiraTechiees
@NihiraTechiees Год назад
Same json you can have multiple function
@aldotugasumb2366
@aldotugasumb2366 Год назад
cool, what about sayinng 'hello +{username}'' how to pass the props, i still confused about this
@NihiraTechiees
@NihiraTechiees Год назад
Do you want to show hello with username. Then create header component globally. The username you will get once logged in that you can store local storage and use it in the header
@visalofficial1615
@visalofficial1615 Год назад
can you tell me about react (js,tsx) why you not use tsx?
@NihiraTechiees
@NihiraTechiees Год назад
It's kind of extension . If you too good in typescript you can go with tsx
@ivramanainnaidu1275
@ivramanainnaidu1275 Год назад
While login even if I am giving the right credentials it's. Getting like please enter valid credentials can you please help me on this?
@NihiraTechiees
@NihiraTechiees Год назад
It's case sensitive. So please check any camal case miamatch
@educationkatta6447
@educationkatta6447 6 месяцев назад
after login it will shoeing login failed not fetched
@NihiraTechiees
@NihiraTechiees 6 месяцев назад
Can you share exception details to my mail
@brevathi5692
@brevathi5692 5 месяцев назад
sir login is showing s error not fetch data
@NihiraTechiees
@NihiraTechiees 5 месяцев назад
Are you using json api?
@KARTIKVISHWAKARMA-o9h
@KARTIKVISHWAKARMA-o9h Год назад
what changes will be made if we use the real api. Please reply
@NihiraTechiees
@NihiraTechiees Год назад
Change the api url.otherwise all same
@arisbudiharto1997
@arisbudiharto1997 Год назад
it will display password inside json object as long as you know the username?
@NihiraTechiees
@NihiraTechiees Год назад
Yes
@PiyushSingh-p8g
@PiyushSingh-p8g Год назад
getting error 404, on login GET request server is connected and credential are also correct
@NihiraTechiees
@NihiraTechiees Год назад
Can you check case sensitive
@utchihamadara1672
@utchihamadara1672 11 месяцев назад
im getting error 404, on login GET request server is connected and credential are also correct aslo i checked cases and still not working!!!!!
@NihiraTechiees
@NihiraTechiees 11 месяцев назад
Debug and find where it's issue created... Could you confirm whether api working?
@utchihamadara1672
@utchihamadara1672 11 месяцев назад
@@NihiraTechiees i used same of your code in this video from github
@NihiraTechiees
@NihiraTechiees 11 месяцев назад
Also follow the steps I shown in that video
@utchihamadara1672
@utchihamadara1672 11 месяцев назад
@@NihiraTechiees i already followed all the steps but still not working
@mahathiSannidhi
@mahathiSannidhi Год назад
Hii I am getting data from .json file even i entered wrong data what should I do?
@NihiraTechiees
@NihiraTechiees Год назад
Please share json file and the url you used to my email
@ImGufranKarim
@ImGufranKarim Год назад
If i don't want toast notification then how to display error message.
@NihiraTechiees
@NihiraTechiees Год назад
We can use MaterialUi alert or basic javascript alert
@shanavaas5823
@shanavaas5823 Год назад
Did U using Redux store for this project can u please tell
@NihiraTechiees
@NihiraTechiees Год назад
This video redux not covered
@kashinathchormale4713
@kashinathchormale4713 Год назад
Can you please make video samething for redux.....
@appaponnu1027
@appaponnu1027 Год назад
💖💖💖
@NihiraTechiees
@NihiraTechiees Год назад
🙏👍
@appaponnu1027
@appaponnu1027 Год назад
@@NihiraTechiees hi bro can u give video for admin give permission for new register user
@sumathig4439
@sumathig4439 Год назад
Hi sir im using axios why nit working???
@NihiraTechiees
@NihiraTechiees Год назад
I hope it will work. Did you get any error?
@sumathig4439
@sumathig4439 Год назад
@@NihiraTechiees I used axios.get method insted of fetch but I'm getting not found 404 error sir... Can you give me the code using axios for authentication???
@muruga3603
@muruga3603 Год назад
@NihiraTechiees
@NihiraTechiees Год назад
🤝
@sumathig4439
@sumathig4439 Год назад
Hi sir i used single state like const[state,setState]=useState({ name:' ', password: ' '}]; How to fetch data for this???
@NihiraTechiees
@NihiraTechiees Год назад
You are storing object here then you have to set the value as object
@sumathig4439
@sumathig4439 Год назад
@@NihiraTechiees can you give me one example sir pls ??
@satyasai5172
@satyasai5172 Год назад
I am practicing in registration class
@NihiraTechiees
@NihiraTechiees Год назад
Please check source code link in description, please cross check Can you confirm did you get any error?
@facundoperez265
@facundoperez265 Год назад
Se puden agregar archivos html a los archivos js, para que me lleve a esos archivos?
@NihiraTechiees
@NihiraTechiees Год назад
Yes
@Kamaraj-gx5ql
@Kamaraj-gx5ql Год назад
idha netlify deploy panni katuga bro atha jserserver db.json connect agala
@NihiraTechiees
@NihiraTechiees Год назад
JSON-SERVER is technique to create fake API (used only development or study). for deployment you should have proper API
@satyasai5172
@satyasai5172 Год назад
Register data not stored in db.json. Can u help sir
@NihiraTechiees
@NihiraTechiees Год назад
Check the console is any error? Or page reloading
@NtlantlaSimelela-h7l
@NtlantlaSimelela-h7l Год назад
Hello again. Can you please help me in the login form. when i type the credentials that i used to register it won't navigate me to the home page. It keeps saying please enter valid username
@NihiraTechiees
@NihiraTechiees Год назад
Please check your json files whether the data is there? Next it's case sensitive so confirm If both please let me know
@NtlantlaSimelela-h7l
@NtlantlaSimelela-h7l Год назад
@@NihiraTechiees Still it's not working
@NihiraTechiees
@NihiraTechiees Год назад
Please share json file to email, also share screenshot of value that you provided in username and password
@ManJH
@ManJH Год назад
Này bạn thân, bạn có thể giúp tôi không?. Tôi không thể chuyển đổi trang khi usenavigation đang trong vòng lặp
@NihiraTechiees
@NihiraTechiees Год назад
let me know what is your issue?
@JaswanthPappala
@JaswanthPappala Год назад
we want css styles please provide
@NihiraTechiees
@NihiraTechiees Год назад
Please check Source code link in GitHub
@JaswanthPappala
@JaswanthPappala Год назад
I clearly checked and I create on my own
@rohithraj7959
@rohithraj7959 Год назад
Unable to fetch error sir can you just help me
@NihiraTechiees
@NihiraTechiees Год назад
Could you confirm your api is running? If yes can you share the error got in the console
@rohithraj7959
@rohithraj7959 Год назад
@@NihiraTechiees yeah but it saying error connection refused
@NihiraTechiees
@NihiraTechiees Год назад
Look like your service is not running, are you using json server api?
@rohithraj7959
@rohithraj7959 Год назад
@@NihiraTechiees it is saying network error unable to fetch resource
@prateeksahu6868
@prateeksahu6868 Год назад
i am getting empty object error plz help me i did same as you did
@aahansolanki3548
@aahansolanki3548 Год назад
Same problem.
@NihiraTechiees
@NihiraTechiees Год назад
The data is case sensitive. So provide exact value. Can you guys confirm the api working fine in swagger (without react)
@appcode-u3t
@appcode-u3t Год назад
getting error at 10:14 404 not found in console . fetch("url/user/(actualusername))
@NihiraTechiees
@NihiraTechiees Год назад
Can you confirm your api working in postman?
@appcode-u3t
@appcode-u3t Год назад
yes@@NihiraTechiees
@utchihamadara1672
@utchihamadara1672 11 месяцев назад
did you get any solution?@@appcode-u3t
@SuyashGrewal
@SuyashGrewal Год назад
Hello sir how to show user name in home page please tell
@NihiraTechiees
@NihiraTechiees Год назад
Define use state variable , set user name from our session variable & finally bind the use state value into html control. Check the source code I Included
@SuyashGrewal
@SuyashGrewal Год назад
@@NihiraTechieesperfect
@samdurai1660
@samdurai1660 Год назад
reactjs+nodejs+mysql from scratch full stack application want bro?
@NihiraTechiees
@NihiraTechiees Год назад
Will do in future
@satyasai5172
@satyasai5172 Год назад
But I am getting error msg
@NihiraTechiees
@NihiraTechiees Год назад
What error?
@rajhadvani5675
@rajhadvani5675 Год назад
Soured code?
@NihiraTechiees
@NihiraTechiees Год назад
Check link in description
@satyasai5172
@satyasai5172 Год назад
Hi sir
@NihiraTechiees
@NihiraTechiees Год назад
yes
@satyasai5172
@satyasai5172 Год назад
@@NihiraTechiees which topic u will discuss upcomming session
@NihiraTechiees
@NihiraTechiees Год назад
. Net core, angular and react I am doing Parallel. May be my new video in .NET core. In react next topic handling jwt token Let's see on new year
@dev.mcisme
@dev.mcisme Год назад
Your code is downright crappy in the sense that your API already allows retrieving user data using their username to do local verification, the problem is that it also retrieves the password password, a smart person can, when told that the password is incorrect, check the network activity and that's it. Secondly you save the user's session not with a token even if it's not the idea of the century either, but rather hard with the sessionStorage, stupidity since if a person analyses the storage of the session, he can simulate it without having to log in, it can even do it for other users, impersonating them, so think before posting your videos, it can mislead beginners looking for solutions Sincerely Mci
@NihiraTechiees
@NihiraTechiees Год назад
Mr. Mci first you should understand the difference between concept explanation and real time requirement. You are acting like security vulnerability tool. But try to understand this is just poc not a final code You are talking about token, it's just json server api man, just for learning. Regards Nihira Techiees
Далее
React js project # Sign up API integration
17:08
Просмотров 89 тыс.
🎙Пою РЕТРО Песни💃
3:05:57
Просмотров 1,3 млн
How Many Twins Can You Spot?
00:17
Просмотров 11 млн
PERFECT PITCH FILTER.. (CR7 EDITION) 🙈😅
00:21
Laravel vs Rails for Javascript developers
19:50
Просмотров 3,6 тыс.
Add Login/Auth to your React app in 5 mins
13:36
Просмотров 289 тыс.
What is JWT token and JWT vs Sessions
26:12
Просмотров 75 тыс.
Context API in react | get the concept
29:00
Просмотров 60 тыс.
React Native Login with JWT Auth Context
24:59
Просмотров 62 тыс.
Register and login a user with JWT token
39:21
Просмотров 50 тыс.
🎙Пою РЕТРО Песни💃
3:05:57
Просмотров 1,3 млн