Level Up Your Login Security with React + Firebase! | React Firebase login Authentication

Hello friends welcome back to the new tutorial of the react shares Firebase today we are going to learn about the signup process in react share so let's get started in the previous video we already talked about the how to create the users using the Firebase in the react.js now we are going to do with the sign in process okay so if you haven't you watched the previous video you can go and check out my previous video and after that you can process with the sign in okay so here we have already create an account with the emails so I'm going to just logged in with this one so this is the one of the email which I have registered here you can see that so here we have the authentication then we have a users then you can see that these two users we have so I'm going to use this one of the user to login and then entry at create gmail.com and here the password I'm going to add over here okay so here you can see that my email is there so here this is the email over here email and the provider whatever detail over here you will fetch it over here right so here you can see that so let's see at the code level what exactly it is so let's go to the code first of all go with the sign in so this is sign in dot JS in the components okay okay right now we have this one react logo with router sign up link password link so just we are going with the sign up form so here just sign up form okay so this is the initial state which we Define email password error showing alert right on submit what will happen when we submit the function it will call this one to sign in with the email and the password if I go and check this one this is the Firebase function that is sign in with the user and password it will accept the email and the password function right so here after doing this one we will check whether the user credentials are coming up or not if it is then go to the routes.com else it will catch the error with the property by key error and its value is error and this time this dot timer okay how much time rate will be required now we have this one render function where we have added the form of the of the email of the sign in so here we have the form that is form group email and here we have the password and then we have a button on the submit we have already find the process on the submit it will check initial state okay and then we will go with the do sign in with the email and the password and this will here you can handle the cases okay if it is not sign in then do the cache error and show the alerts show the toast message that invalid username and the password or something like this right so I will just try to fix log on login with the wrong password okay so chin Pro developed for 1993 activate gmail.com and this password is wrong the password is invalid and the user does not have the password okay you can see that the message is coming up because my password is wrong so this this is in the cache and set the property by key the error values okay so here you can see that the timer here showing the alert true and the set timeout like four seconds okay it will hide up right so this is how we are able to sign in with the Firebase using the it actually has any doubt any query in that let me know in the comment section in the next video we will go go about the forget password and let's check the password is gonna be reset or not so thank you so much for watching this video don't forget to like share and comment on my video have a nice day

Channel: Technical Rajni

Views: 186

Keywords: firebase, react router, tutorial, app developers, javascript tutorial, tutorial for beginners, react hooks, react tutorial for beginners, programming tutorial, react firebase, firebase tutorial, firebase login, firebase authentication, cloud functions, satansdeer

Id: S9mQfQ2lCsM

Length: 3min 51sec (231 seconds)

Published: Tue Mar 28 2023