Email Authentication With Verification In React Native and Firebase App | React Native Tutorial |

hello guys my name is rohit kumar thakur and this is the demo of what we are going to build in this project tutorial uh we are going to build an email authentication with react native expo and firebase so let's register the user first [Music] now you can see that just after you press the register button you will see the dashboard screen and at the same time you will see an alert of an email sent so let's check the email [Music] we don't have a valid hosted url that's why you are seeing this verification mail in the spam list click on the link for the verification now in the dashboard when you click on the sign out button then the application will navigate you to the login screen you can now simply login using the email id and password we just created and you can see the name of the user on the dashboard screen without wasting any time let's start this project just initialize an expo application select the blank template and continue to dependence is downloading in this project we are going to use the react stack navigation and firebase so install these javascript dependencies you can see the installation on the screen [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] now you just have to follow the video to set up a firebase application [Music] [Music] [Music] [Music] [Music] [Music] we need this key in our project uh don't use my key because after this recording i will delete this firebase application also use your keys and don't share these keys with anyone [Music] [Music] [Music] uh now just enable the email uh password sign in method in the firebase application we are also going to store the user information like first name last name and the email address in our database so you just have to enable the firestore database and now in our application we need a header component and three screen components that is a login screen and the user registration scheme and the last one is the user dashboard also make these javascript files and and you just have to import these files in our app.js [Music] uh we are also going to make our header custom which means we are not using the default header name of stack navigation that's why i am using other props in the header component [Music] [Music] uh now in our app.js uh first we gonna import all the required components from the navigate from the navigation and the firebase dependencies uh then we gonna import the header component and the screen component [Music] [Music] now for the authentication to work uh we need to handle the user authentication state in simple words uh we have two states that is one is before the authentication and the second one is after the authentication with the firebase on on auth state change component are we gonna detect the user's state whether the user is logged in or not and if the user is not logged in and then we gonna show the user on the login screen from there they can either log in or register now in the second state if the user is logged in uh then we're gonna show the uh so the dashboard to that user uh now to handle all these uh we are going to use the use effect hook by using this hook you can tell react that your component need to do something after the rendering react will remember the function you passed and if you still don't get it then you can understand this by this diagram you can pause the video and analyze the diagram we are going to use this logic and so the user login screen and registration screen before the state change and the dashboard screen just after the state change uh here we are using the react navigation to get our job done [Music] so uh here in the header title option i am using the header name as bug ninja this is a custom header so you can customize it with different fonts colors and many other things [Music] [Music] [Music] [Music] [Music] [Music] [Music] uh then after the state change we gonna show the user dashboard so write the stack screen code for that [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] and now let's write the code for the login screen [Music] [Music] [Music] in the login screen we need an email and the password text input field [Music] [Music] [Music] on the firebase made a really simple component to login using an email id and password you just have to use the sign in with email and password component [Music] now we just have to render the email and password text input field with a beautiful button so follow the video and write the code [Music] [Music] [Music] first inside the text component i used a login header the font is bold and the font size is 26. [Music] next we gonna use the text input field for the email id and password [Music] [Music] so [Music] in the password field we want user to enter the password securely and that's why the secure key entry is set to true now we're gonna make a login button that's why i use the touchable opacity and then on press we gonna pass the value email and password and pass it along with the login user function [Music] for the new user i use the text inside the touchable opacity component when the user presses that text then it will navigate the user to the registration screen [Music] [Music] then at last i write the code for the styling of the view button and the text input component [Music] [Music] [Music] now uh let's uh test this login code are we gonna create a random user in the firebase and test our code with an email id and password and if the code is correct then we will navigate to the dashboard screen on login now let's just run the application [Music] okay uh we have an error uh let's fix that here i think i messed up with the fetching of the header component and i suggest you to don't trust the github copilot blindly because it will give you such type of error now simply login with the email id and password now you can see that the login is successful and we see the dashboard screen after the login in the next video i will write the code for the user registration with the email verification customize the dashboard and save the users data in the firebase database so see you in the next video [Music] thanks for watching this video subscribe this channel for more project based videos on react native python data science django and machine learning

Channel: Bug Ninza

Views: 45,577

Keywords: React Native Expo, Mobile App Development, iOS App Development, Android App Development, Native App Development, Javascript, Code, Programming, Technology, Software Engineering, Projects, ui-ux, cross platform framework, js, learn javascript, app development, react navigation, react navigation 6, firebase, React native Tutorial, react native tutorial in hindi, react js

Id: lBUjggiWQ1U

Length: 25min 55sec (1555 seconds)

Published: Tue Jul 19 2022