Firebase Authentication in React Native Tutorial

hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can implement firebase authentication in our react native app so as you can see over here this is our app and this is the onboarding screen of our app the user will see this screen only once when the user will first installs the app to their device and after that the user will be presented with this login screen or this sign up screen i have created all this ui in my previous tutorials so if you haven't seen all those tutorials yet then you can check those tutorials in this tutorial i am going to implement the firebase authentication so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial [Music] so this is our project and since my previous tutorial i have just added two files here i have added this abstract file and here we have this home screen so within this screens directory i have added this home screen and this will be presented after user logged in to our app so there is nothing fancy it is just a screen with this text and this form button nothing else so now we need to install react native firebase in our app and for that we need to go to their official website and here we can see the documentation so we need to install it and to install it first we need to use this command i'm using npm so i will use this if you are using iron then you can use this one now paste this command and hit enter so it has been installed now we are going to use the authentication and for that we need to go to this authentication menu and then we need to install this auth package and to use this auth package we need to use the firebase which we have just installed so that is the core library which we need to install and after installing the code library we can install whatever we want to use from firebase so as we are going to use authentication so now we need to install it so it will be npm install react native firebase auth so our packages has been installed now let's see what we need to do so i'm going back we have installed the core library now we need to set a few things for both the platforms so here we can see the android setup right now i am skipping this i'm going to the ios setup and to setup it first we need to go to this firebase and within firebase we need to go to our console and here we need to create a project so click on this add to project and provide a project name over here i'm not going to use google analytics so i have disabled it now click on this create project so our project is ready now click on continue here is our project dashboard and we need to go to this authentication menu and here within the sign in method we are going to use this email and password so we can enable it and save it so this sign-in method has been enabled and then we need to go to this project setting and here within your app section we can see that there are no apps in your project so we need to create app for our project and first we are going to create our ios project so we need to click on this ios button and here we need to provide some information first we need to provide the ios bundle id and it will be like this so this is my bundle id and we can provide any nickname and this is optional and here we can provide the app store id but currently i'm not uploading it to app store so i'm not providing it now click on this register app now we are presented with this config file we need to download it so i have downloaded it now we need to configure it now we are completed with this step for ios app we don't need to do these things okay so we can just simply ignore these things and we can click on this continue to console so right now we can see that this ios app is present in our project now let's go to this react native firebase and here we can see we need to download it as we have downloaded then we need to open the project in xcode so let me open it so here we have opened our project to xcode now we need to right click on this project name and then we have this add files to option click on it here we are going to add this config file which we have downloaded now click on this add so it has been added now let's see what else we need to do now we need to provide few things in our appdelegate.m file so copy this code and this is our appdelegate.m file and here i have pasted it now we need to add these three lines within this bool application section so i have added it now save the file and then we don't need to do anything we can close it and then we can close this metro bundler ui process and we need to do pod install now go back to our root directory and rebuild our project so the firebase package has been installed properly we are not seeing any error for ios so now we can move to android so here similar to ios we need to first go to this firebase console and we need to add app and this time it will be for android and similar to ios we need to provide the package name here and we can provide a nickname for our app and then we don't need to provide this thing as we are not uploading it to play store so click on register app then we have this config file we need to download it and after downloading we don't need to follow any other step here now go to react native firebase documentation here we can see that we need to place that config file within our android app directory so within this android directory we have this app directory and over here we need to place this config file now after that we need to add few things we need to add this line to our build.gradle file which is located within this android directory so within android we have this build.gradle and then within this dependencies we need to add it so i have added it now we need to add this line to the build gradle file which is located within this app directory so after android we have this app directory and within it we have this build.gradle file and here we can add that line now save it after saving it let's see what else we need to do we don't need to do anything and for android we don't need to do any other step as we have done for ios so we can just start building our app now we need to open our project in android studio so here we have opened the project in android studio and currently the gradle build process is happening and it will build the project as we have added few things in our build.gradle file so it has been finished now we can start our emulator and run our project after installing this package you need to open the project within the android studio and android studio will do the necessary thing which is required to run the package in our app properly so here is our android emulator now close this metro bundler ui process and build our project for android so our app is running on android and the firebase package has been installed properly for android as well now we can start implementing firebase authentication functionality in our app so to implement the firebase authentication here in navigation directory we will create authentication provider i have created this authprovider.js file and after importing react we need to import auth from react native firebase authentication package to use the provider we need to use the context api here we will create a context so we will use this create context api from react so make sure you import it from react and my ide already imported it automatically and i am going to export it so that i can access it from other files now i am going to create the provider and we will export it and here within this earth context provider we will provide children prop and that children we will receive as prop so we need to mention that here now for this provider value we will create different state for the authentication such as login register and logout also along with this authentication state i am going to use some other value which will be the user state and i will use this use state hook and by default the user will be set to null so here within this provider value i have added this user state and this set user also so that we can set this user from any other file now here we have this login state and this function will be an asynchronous function so we need to use async and for login we are going to accept email and password now within this try block i am going to use the authentication and here we have this sign in with email and password function available and within this function we can pass these email and password fields and as this is the async function so we need to add a weight over here now for the error we will catch it and for any kind of error we can output it to our console so this is our login function now we need to create the register and logout function so register function will be similar to this login function it will be the asynchronous function and we are going to accept email and password as well now within this try block first we need to provide this average then for auth we have create user with email and password and similarly we need to provide this email and password in this function now we can do the similar thing with the error we will output the error in the console so the login and register has been created now we are left with the log out and it is also pretty simple it will be the async function and for the try block we have this auth sign out so simply we need to call this sign out function and for the error we will do the similar thing so we are completed with this provider now we need to use it and we are going to first use it in our routes js file in this route we are displaying this auth stack and remember i have created this abstract as well for our home screen so after a successful login the user will be provided with this home screen and that is located within this abstract so we will determine which stack we want to display in this route and to determine that we need to listen to the authentication state and here we can see the documentation listening to the authentication state and for it we have this on our state changed function so we can use this code snippet over here in our route js to determine the authentication state so let me implement that and also we need to import abstract and now i'm going to import auth context from auth provider and also here we can see that we need to import this auth from react native firebase auth package so i will add that over here and here we need to use this on auth state changed function by which we will subscribe to the current authentication state of the user so here from our auth context i am going to fetch user and set user and we need to use a state called initializing and we will set it by this function and by default this initializing will be set to true now while this component will be mounted that time this function will run and within this function we will subscribe to our current authentication state and for that here we can see the code so we are subscribing to this on our state changed function so i can simply copy this code and paste it here now we need to create this on state change function locally to set the user so here we will receive user value and by using this we can set user so it will update the user in our auth context which is located here and from the south context provider this value will be passed to other components within the component tree so we are setting the user over here now we need to change the initializing state so it will be false and we can provide a check over here if initializing is set to true then we will set it to false now here we can return if initializing is set to true that time we can return null so that mean when our app is establishing a connection with firebase that time it will return null because within that time our app is not determining which page it want to display so it will not display any page over here so you can do other thing as well you can provide a loader over here instead of returning this null but as this will be not visible for the user it will take fraction of a second so it will be not visible by the user we can safely use this return null also for your satisfaction if you want to use a loader then you can do that as well now after this if this initializing is not set to true then it will return this navigation container and by the authentication state we are going to use this auth stack or abstract so if the user is defined then we will display abstract otherwise we will display the auth stack now save this file now within this index.js we are returning these routes we need to wrap these routes with our provider so it will be auth provider and make sure you import it from authprovider.js file and my ide automatically imported it so now we have some error so here is the error we need to provide this are in capital now the error has been gone now we need to make these buttons work so first we need to implement this sign up and then we are going to implement the login so for sign up we have this register and we can access it by context api so now within this sign up screen by using this use context hook from earth context we are going to get this register function and this register is this one which we have provided in our provider value and make sure you import this auth context and this use context hook from react now we are going to use it in our sign up button so here we can use this register function and we need to pass the email and password and we have this email and password state which we are updating while user is typing the text in this fields right so i can simply use those local state over here now i can save it so right now i am not doing the validation of this password and confirm password if you want to see more about the validation then i have a previous tutorial which you can find from the i icon or you can get the link from the description below so i am not going to implement that validation over here test at email.com and password i will set to password now click on sign up now after clicking on sign up we can see that we are already redirected to the home screen right now let's see if the user is created in our firebase console or not so here is our project and within this authentication we can see that the user has been created right so it's working successfully now we need to do the log out over here also we want to fetch the user details in our home screen and we can do that by this user value from our provider so within this home screen by using use context we can get that from our auth context and from this user we are going to get user id so here we can see the user id is present right so by this we get the details of the user now we need to provide some functionality in this logout function and that is also we have created as this logout so it will be log out so for on press we need to provide this logout now after clicking on this logout we are logged out from our application now we need to implement the sign in function and we can do that similarly as we have done this register so we need to get login from auth context and then within this login function we need to provide the email and the password and that is also we are getting from this local state right now save it now let's check it once i have provided the email now for the password we have the password for the password click on sign in and we are redirected to the home screen right now click on this logout now check this for any random click on sign in so it's not working and if we see our console then we can see a error over here right so here is the error user not found so from this editor we can display the error to the user in our application right and then if we use the correct credentials then we are logged in successfully so that is it guys this is the tutorial i hope you have learned something new from this tutorial if you do so then hit the like button let me know by commenting down below and in my next tutorial i will implement social authentication or maybe the ui for our social app so don't forget to subscribe to my channel to see future videos of this tutorial series and share this tutorial with your friends and colleagues so i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 67,587

Keywords: react native firebase, firebase, react native, react native firebase tutorial, react native firebase authentication tutorial, firebase authentication in react native, react native firebase email authentication, firebase authentication in react native tutorial, firebase email password authentication react native, firebase tutorial, react native firebase social app, react native firebase auth tutorial, react native firebase login, rnfirebase authentication

Id: J7pkSP18Oko

Length: 20min 29sec (1229 seconds)

Published: Wed Sep 23 2020