Email and Password SignUp, SignIn and SignOut with Firebase in React Js || React routing || React Js

hello everyone in this video I'll show you email ID and password sign in and sign up with Firebase interact yes let's start I'm going to type email ID ABC at mail.com and I'm going to give a password one one one one Okay click sign up yeah let's navigate to home page go to Firebase here I'm going to refresh this page here we got ABC at mail.com and I'm going to logout it's back to sign up page here I'm against it ABC at um one two three four five yeah click sign up with the same email ID here we got email ID is already in used okay I mean we all sign up with the same emaility that's why it's showing this pop-up here it's navigate to sign in page here I'm going to click sign in with the same email ID yeah it's now it's going to the home page okay again click sign out here I'm going to sign in with the different you my lady and click sign in yeah it's true user not found okay yeah let's start yeah here I already created a react project and also I'm running this project so I'm going to create routing so you need to install this package okay I'm going to use this NTM package copy this and install in here okay in terminal in my case I already installed so I'm going to add a browser route it's imported here okay remember to cut this paste after this inside the dev to remove this I'm going to add a route yeah inside route um close like this here I'm going to add a path install its normal okay here I'm going to add a element here initially we are going to display this page okay yeah I'm going to copy this and go here and inside element I'm going to add a this I'm going to import this yeah it's imported here after that I'm going to duplicate this for one more time this is home page yeah I'm going to home page then I'm going to copy this page and paste it here I'm going to import that screen here it's imported here okay now routing is ready let's save this and go to browser here I want to add a slash this is homepage Okay click enter here we got home and in normal case we are going to display the step Edge contact this is login okay so this and go here I'm going to remove this home and click and touch here we got login yeah share I'm going to add a form inside from to add import and close it email to duplicate this one more time this is password type is password and I'm going to add a placeholder this is email this is password and after that button this is your sign in here on submit so add event here for us here I'm going to copy this after that to create a function for this get even here here console log this is C Dot Target sorry Dot email dot value and save this before the tiny tied up prevent copy the C Dot prevent default right click and inspect here go to console here I'm going to type something in email field click submit when sign in here we got value okay continue to close it before that I'm going to add a break here too okay yeah this is fine after that classes app which default class okay which one is this sign in let's try you sign in okay yeah this is fine I'm going to connect the Firebase to this okay so go to firebase.google.com click get started click add project hit Q male password login click continue to disable this and click create project yeah click continue here our project is created click this web third one give a nickname this is email password Okay click register it will generate a SDK yeah copy this and install in your project in my case I already installed okay so I'm going to copy this and go here here this page okay I'm going to paste it I want to add a Firebase here okay Firebase okay here I'm going to add get out I mean imported and I'm going to copy this after that const database test that get out and I'm going to pass this app I mean this app okay here also I'm going to export this yeah save this and copy this and here sorry here I'm going to put that okay database from dot slash database configure okay here I'm going to import Firebase out here okay Firebase slash auth this one and inside T8 user email and password this one okay copy this before that I want to remove this control log and count this is email here e Dot dot email dot value I'm going to duplicate this for one more time this is password this is password okay copy this and paste it here and I'm going to copy this after that paste it here here I'm going to pass this database and this email ID and password okay copy this email and password comma and Dot then yeah data console the date this is all data okay save this and go to browser into con complete this okay continue to console press ready I'm going to click build here go to auth Authentication click get started here click this this first one email and password add this I will enable this click save yeah click user I'm going to here I'm refreshing this page here I'm going to add data at mail.com here one five ones okay six one because if I give 5 1 if I click sign in to inspect here I will get error because it will show password should be at least six character okay this is default Firebase error message okay here it add more one click sign in okay here we got response from Firebase here we got click user here this is our email ID right this this one and click Firebase here we got sorry this is sold one close it and go here and if I refresh here we got data at mail.com right yeah he successfully sign in if I click again I will get error because this email ID is already in used okay because we already signed up with this email ID in our case now need we need to login okay before that we are successfully login means I am navigating to home page okay so after this entered accounts history add use navigate yeah here react router is imported okay this is one of the function inbuilt function and tracked router down and I'm going to copy this history after this if when it is created in Firebase means we are navigating to home screen okay slash oh and save this I'm going to add one more email ID this mail.com here one two three four five six okay and click sign in yeah it's navigate to home page still it's in the same page now we are going to add log out in this page okay go to home screen here into add a button this is sign out on click and click copy this sorry here comes here amount of Adder sign out okay this is one of the five base build function here I'm going to add a I need to pass this one okay this sorry to copy this because we need to pass this value in sign out okay here I'm going to add to copy this and paste it here okay in our success case yeah well here you want to add a history I need to copy this also okay and paste it here I'm going to add a history after this and copy this history paste it here I'm going to pass just slash because after after uh log out I'm going to pass this value just console the value after this what we get save this and go here if I click sign out just undepend it's not written any value but it's back to home page okay I mean sign in page this is registration screen okay I will change this I need to add a login screen okay so here to add a from State here this is login set login okay you state initially it's false if the state is true we are going to show the login screen okay here I'm going to pass one more parameter this is for login if this login is true for me to pass sign in else sign up okay same as okay I'm going to add a bracket here if sign in is true to cut this plugin is true I'm going to display this sign in else sign up okay same as here also plugin as true display sign in else sign up this login you need to add login here here Moto Adder I mean get that sign in or sign up in type these values are all same here into display f types equal to sign up here so sign up is true I'm going to display this else to copy this and paste it here it will change this to sign in with email and password okay it's imported here okay same credentials for a login also yeah same here navigating to home screen after that I'm going to add a catch here here a lot just print the error message dot code and same I'm going to copy this for sign up also okay yeah save this go here to refresh this page we are going to sign in with this same email and okay I'm referencing this page here we got this one okay I'm going to copy this I'm going to use this one okay I paste it here and I'm going to add one one I mean I mean it's six or okay click sign up it's so Humanity already used okay in this case we are navigating this to plug instead okay so I'm going to copy this paste it here here this is true I mean again Pages true in this case we are going to display a login screen and save this here I'm going to refresh this page and to copy this same email ID and paste it here to remove this I mean close that here and click sign up here we got error message I mean ready already used click ok it's navigating to sign in okay here I'm going to click sign in yeah it's navigate to home screen okay yeah and if I click sign out it's back to sign up screen here I want to add as two buttons for a sign up another one is for signing oh go here to add a div I'm going to create one more div and this is sign up okay and this is sign in I'm going to CSS page here I'm going to use this row here into add a class and paste that row here and here I'm going to add a on click into sit directly login value okay here to set when signup is Click we are going to display I mean we are going to pass false I'm going to copy this and paste it here in this case if we click sign in stroke okay I'm going to add a class here here login fault into use I mean I'm going to display this active okay paste it here else I'm going to display this pointer okay cursor pointer and I'm going to copy this in 10th class and paste it here here login is true true means same to display active and this one save this here we got I like this like this is sign up page if I click sign in sign in okay here I'm going to sign in with the same email ID paste it here and one two three and click sign in yeah it's directly going to sign in screen and if I click sign out back to sign up page here I want to add one more email ID this one com and click sign up yeah it's going to the screen like sign out and go to Firebase here I'm going to refresh we got a fourth email ID yeah this one sorry third email ID yeah this is what I tried to tell in this video bye bye

Channel: Coding Comics

Views: 26,014

Keywords: email and password signup with firease react, password signup with firease in react, email and password auth with firebase react, firebase authentication with firebase in react, firebase create user with email and password name react, login and registration form in react js using firebase, firebase sign-in with email and password react, react-firebase authentication, firebase login with username and password react, react routing, firebase signout with react, firebase auth signout, js

Id: LNzY3x4KHHg

Length: 21min 2sec (1262 seconds)

Published: Sat Jun 24 2023