React Native Firebase - Google Sign In Tutorial 🔥

hello everyone welcome back to Kobe veto super excited to be here back again with you guys with another review and in today's video we are gonna learn how to integrate sign in with Google when we are using Firebase as a backend service okay uh we're gonna be using react native Expo and here we have the demo of what we're gonna be doing as you can see this is going to work for IOS and Android and if I press on the sign in with Google on the iOS device you're gonna see that we have this um model and on the Android we get redirect to another um to the browser and then we have the same screen basically okay so I'm going to select my account on the iOS device and as you can see we are signed it in automatically no problem at all and as you can see here um I'm using the same Google account and when I press it we get redirect back to the Android device and if we wait a little bit you're gonna see that we get redirect back to the home screen as well okay and now I'm saving this session locally and if I reload the application on Android you're gonna see that we we see a activity indicator for like half a second and then we um we check that the user already signed it in so we go back to the home screen but we can go here to the settings screen and clear clear the local storage on both devices and reload the application again so we don't have the user saved locally anymore that's why we get redirect back to this sign-in screen okay and now to prove you guys that this works on Firebase I'm going to bring my console here and as you can see here we have this user which is the only one that I have it's the same one because I'm using the same email in both devices but I could use another account and I would get another another user here okay okay guys so this is basically what we're gonna be doing if you want to learn how to do this make sure that you stick till the end that you subscribe and let's start and before we start guys actually I want to mention that if you want to download the code for this project you can go to code with better.death project and you're gonna find all the projects that we create in this YouTube channel and I want to tell you as well that we are going to be using this react navigation application that we created in my last video so if you want to create the navigation and the application that we are using make sure that you check out my last video and here we here you have all the instructions as well in code Liberto dependencies and Link if you want to download the code directly okay so now that you know that and of course you don't see this video here because I'm recording it recording it right now but as soon as I release it it's going to be available okay so now that I've been said let's actually start creating this application okay guys so here I have the application that we're gonna be using and I already opening it on Visual Studio code and I'm going to start this project by uh well before I actually start this project I just want to mention that this is the project that we created in my last video the navigation tutorial so if you want to create this application make sure you check out the my last video okay and well before I actually start this project I need to install some dependencies that we are going to be using so for that I'm going to uh just copy here the Firebase extra package so in order to install Firebase in your react native application you can just simply run the npx points.firebase and let's wait a little bit okay uh we are going to be using the Expo Health session package as well so after that I'm going to run this command as well and um guys if you want to just copy these dependencies make sure you go to cultivator.dev and in this project I'm going to put all the dependencies that we're going to be using and as well as instructions and how to set up your project okay so let's start install Expo out session Expo crypto and Expo web browser Expo crypto it's a pair dependency of Expo out session we need that if we are going to be using export session and Expo web browser it's going to be basically the web browser that we are opening in opening when we select this continue this is a web browser that we are using so that's why we need to install this export web browser so I'm going to hit enter and then we are going to need another pair dependency that we need to use for Android and this is going to be Expo application so let's go ahead and install that one as well and finally because we want to test this application on a real live scenario we need to make the builds okay and in order to make the bills we're going to be using export Dev clients exploit a client basically allows us to build the application and then run it like it were like like it was um running on the production environment but in our simulators okay so let's install Expo devclient as well and finally the last dependency that we need guys it's going to be async storage because I want to save the user information whenever they sign in so I don't have to I mean so the users don't have to sign in every time they reload the application we can save the information locally and then retribute retrieve it from the local search so let's go ahead and install this dependency as well and I believe those dependencies are the ones that we need now we need to make some configurations uh before we actually can use these dependencies so I'm going to clear my terminal and we need to configure the met the metroconfig.js file because we are using a recent version of Firebase I mean the latest one so we can um as you can see here we don't have the metro.config.js file that is because we are using Expo but if we run this command npx customize metroconfig.js and hit enter you are going to see that we generate this metroconfig.js file and now we can simply substitute this with this okay basically we are saying we are configuring some things because uh in order to Firebase to work correctly with our application okay now you have learned that we actually going to need as well um we're gonna be using EAS if you are not familiar with EAS it's X4 application Services basically Expo builds your application on the cloud and then they give it to you so you can test it out and then you can put it on the App Stores so make sure that you have um as installed EAS if you want to make sure that you have it you can simply run npax install globally EAS CLI now I already have it so I'm not going to run this command but after you run this command you can simply checked uh or login into your account I already signed in into my account and I believe I can say um yes well if I run as I'm going to get a lot of commands that we can use with s as you can see here we have this account command and if I say now as account hit enter you are going to see that um okay so we need to provide a command so we can say the account sign in or init login logout open and we can also say who am I so let's run s o m i hit enter and as you can see I'm already logged in into my account of expo here in my CLI okay so make sure that you are signing in and then after that we need to configure some things because we're going to be creating our builds using AIS of course we can build the application as well locally but just to show you how you can configure EAS you can simply run the command EAS build configure and hit enter and let's um let's say yes here let's wait a little bit let's select all and that's it so the EAS um file.json here was created and if you go to this file you're gonna see the configuration that you can change and customize as you need so for example whenever you are going to build your application with EAS you can you can specify which build profile you want to use for example development review or production and you can make some configurations here depending on what you want to do right okay so now that we have that we can actually um start by creating our projects in the cloud so we're gonna be using Firebase and as a requisite for that you're gonna need a Firebase account so let's go to the Firebase account and I'm going to bring here my Explorer so you can see here um I have my Firebase account open let me put this like this and move it like this make a little bit bigger and that's it so if you don't have an account on Firebase go ahead and create one I already have one so I'm going to go to my console and as you can see I have one Acme project now guys we're we're gonna need as well a Google Cloud account I already have mine here open and as you can see I'm in the current project Acme which is the same one that I created well they have the same name but they are different projects okay so let's start creating the Firebase project for this tutorial I'm going to hit on create project and then I'm gonna say tutorial um tutorial signing Google you can name it as you want let's hit continue and now you're gonna be asked if you want to enable analytics we don't want that for now just hit create project and this is going to create a project in your Firebase okay now let's go to the Google Cloud website and here we need to create a new project if you have one already you don't need to create one but let's create a new one so you can see how you can do that if you don't know how to do it hit new project and then this project is going to be tutorial sign in like this okay hit create and this is going to start creating your project as you can see there so this is going to take a couple seconds let's go back to the okay and that was quick now we just created this tutorial sign in we can select this project okay and just make sure that you select it you can check out here that says tutorial sign in now let's go back to Firebase and the project is ready as well so let's hit continue here we are automatically redirect back to this project and we are you can check here that we are in the sign-in tutorial okay so now let's connect this back end to uh to our react native application okay so now we can hit here we can click this settings button then select project settings once you are in the project settings you can scroll down here in general all the way down and we need to select this web icon you're going to be redirect uh to this page in which you can name the web application that you want to connect to this application okay to the react native application so the application that I want to connect to my backend is going to be my my react native okay and you can name it as you want this name doesn't matter too much register application and this is going to give us the credentials that we need to provide in our react native application in order to connect to this Firebase projects or back-end project okay now you gotta make sure guys that you are careful and you don't expose these these Keys here uh of course I'm going to delete this project so I don't have to worry about that but you can copy this um and then once you copy this you can continue to console then I'm going to make this a little smaller okay now let's go back to the react native project and in order to connect with the configuration that we just copied I'm going to create a new file which is going to be called Firebase config the JS okay and inside this project sorry inside this file I'm going to paste my configuration and my configuration is going to look something like this I'm going to start by deleting these comments that we don't need too much now as you can see here we are initializing the application automatically so we don't have to do anything these are my credentials maybe you want to use environment variables to hide this if you want to push this to GitHub for example or if you are going to share this code okay and now that we are here guys I want to go ahead and import a method called get out and well as you can see I don't have autocomplete but if we put here Firebase slash out we can import from here get out which is a method that basically connects to our authentication Service in the Firebase cloud and provides us with all the methods and all the things that we need to authenticate users in our application okay so to initialize this authentication we can say out equal to get out which is this function up here and this function if I do hover here you're gonna see that this takes an application of Firebase right and my application it's right here so I can just simply copy this and paste it here this is all we need and now we can reference this out object and basically provide that in the functions that we can use with Firebase so Firebase nodes which service or which account of Firebase we are dealing with okay now let's export this out because we are going to be using it in our application and hit save okay this is all the configuration that we need so let's close this for now and let's go back to the console now here I just created my project so I can select this um project overview and I'm going to make this a little smaller okay now if I click here you're gonna see that we have this sidebar that is hiding but uh once you have this you can start actually adding the authentication Service okay you can select here authentication or if you prefer you can scroll down a little bit here in the main application in the main screen and select authentication okay it's going to be basically the same and once you are in this screen you just have to Simply click here on get started this is going to activate the authentication Service for our Firebase account or parabase project and because for now we just want to have Google as a provider to authenticate users we can select Google then we need to select enable and this is going to ask us for a support email we need to provide us for email so I'm going to select the one that I have here and clicked on Save okay let's wait a little bit until this is done we need to go back to the Google Cloud but before we go once this is enabled you can click on this edit configuration and once this is created if you select here a web SDK configuration you're gonna see this web client ID and you can use this to us to add links or to connect to fire to Google Cloud sorry to tell Google Cloud that this application is going to be dealing with our account to authenticate users okay and so you know what I'm saying here I'm just going to copy this then I'm going to go back to my Google Cloud account I'm already in my sign-in account remember so here I'm going to select this navigation menu and from here I'm going to select API and services credentials click on credentials and let's create a new credential now we are going to need a all out client ID for this project but before we can do that we need to set up a all out consent screen this consent screen basically is going to be the screen that the user is going to see when they are trying to sign in into our application now I'm going to select the type that I want to create here you can create an internal one or external I'm going to select external and hit create I'm going to make this a little bigger so you can see a little better now the name of my application it's going to be as well tutorial signing um tutorial sign in just like that now we need to provide a support email as well I'm going to select the only one that I have here scroll down you can specify a logo app domain we don't need that because we don't have a domain for the application you can just leave those blank and you can select authorized domains as well but we don't have anything at the moment and finally we need to provide a a email okay now this email is going to be it's going to be my email that I'm using for now so it's going to be code with metal and gmail.com okay save and continue save and continue okay now we are redirect this step two which is Scopes you can manage the Scopes and information that your application needs from Google here but we are going to leave just the default values and save and continue now you can add test users that it's a good idea if you want to be testing so I'm going to add my account Beto medano01 gmail.com which is the account that I'm going to be using to sign in since from my uh simulators okay so let's add this this account it is here as you can see and now save and continue okay this is a summary which means we are all done we can go back to the dashboard and that's it our our oauth consent screen it's set up so we can go to the credentials okay and now in credentials we are going to need to create a credential for the iOS and one for the Android application so the credential that we need is going to be a all out client ID select this one here in the application type let's start with iOS okay iOS is going to ask us for the bundle ID of the application if you don't have one you can go to your application on react native and simply pre-build this application in order to Prevail this application we can run the command npx export previews now just just so you can see what this is going to do if we open the app.json file you are going to see that inside the iOS part we don't have the bundle identifier at the moment and inside the Android part we don't have the package okay so once we do that or once we run this command we are going to generate those themes that we need now we're at we are I mean Expo is asking us which package name we want to use you can customize this as you want so for example I would customize this if these were I in an important application that I'm creating I would say dev.codile dot my application name so for example navigation this but for now I'm just going to select the defaults which is going to be my username so it's going to end up being com.navigation test hit enter and Now for iOS bundle identifier hit enter so we're gonna have the same one for IOS and Android now this command as well generated the IOS and Android folder locally in my project so now we have the native projects inside our project ready to be built and ready to test got it okay so now we have this bundle identifier we can simply copy this and go back to the console to the Google Cloud account and select and tell basically Google Cloud that this um this application is going to be the one that is going to be using this service okay now you can provide as well the App Store ID or team ID but we don't have that now so we can just simply select create okay and now we get the first client ID that we need let's copy this let's go back here and we need to save this somewhere so for now I'm going to select my Firebase config and down here I'm going to create a comment say iOS equal to the the ID that I just got okay so I'm going to go back here click OK and now we need to create one for Android and you can also create one if you are gonna build this application for web you can create one for um for web but for now we're just gonna be doing Android and iOS so let's select Android this time and now we're gonna need the package name okay so the package name is gonna be the same one that we have here so you can go to the after Json and copy this go back to the console sorry go back to the Google Cloud console and paste this here now we need the sha1 certificate fingerprint this is a little bit tricky this is why we need to use EAS so I'm going to clear my terminal here and what I'm going to do now okay guys so this is why we needed EAS and for that we can simply run EAS credentials platform Android okay so hit enter and now you need to select the profile that you want to use you can select the one you want but I'm going to select production for now because I want to make sure that this is going to run in production in in the real world so now here we can select key store and then set up a new keystore hit enter if this is the first time that you are doing this then I'm going to hit enter again then we need to press yes this is going to generate the keystore and now we can press any key to continue this is going to give us what we need here so I'm going to move this here and make this a little bit bigger so you can see okay I'm going to move this up here so you can see that we have the sha1 that we need so I'm going to copy this thing this large number and now I'm going to put this back okay now we can paste that here and finally hit create okay this is going to give us the client ID copy and then go back to the Firebase config to finally simply quit this we don't need this anymore and we can clear the terminal and maybe close it for now okay now uh we can create another or Android and paste it here okay now these IDs are the ones that we need in order to integrate the sign in with Google but there's another important thing that we need to do okay so let's select this web client ID in the Firebase console and here I'm going to go to my um well and I'm going to assume here a little bit well I can add some here on the on the link but what I want to do here is basically on google.com API slash credentials then I'm going to say slash o house or else client and then slash okay and if you don't want to put all out client what you can do is simply hit create oauth client ID and then just delete this line ID slash and here you need to paste this web client ID Okay so come back paste it here and hit enter this is going to take us to the configuration that we need to add in order to connect this Google cloud with the Firebase with the Firebase account okay so as you can see here you're gonna get these um Auto created Google service web client and now um you have here the link authorized to gen to bb or region for JavaScript applications and then the authorized redirect URL which is going to be the Firebase basically the Firebase URL okay so this is mine this is my application personally application you need to copy this web client ID and paste it like I did so you're gonna get this generated like this okay so now we can hit save and now this uh basically connected the Firebase with Google Cloud but now we need to connect the client IDs with pirates okay because we are going to be saving the users here right so now if I select this safest client IDs from external projects here it's where we need to specify the client ID for iOS so I'm going to paste this so basically we're saying that we we give permissions to the iOS application and we want to give permissions as well to the Android application so let's copy the client ID for Android go back here and paste it and hit add okay now we have these two applications that can use this um this client I mean that are authorized to do stuff with Firebase okay so now let's hit save and now guys this is all the configuration that we need to do in order to start implementing this on the react native application okay now okay guys so now let's actually start the implementation and now that we installed all the things that we needed we can reveal the application by running the command npx Expo per build rebuild it it's going to generate the iOS folder in Android folder so we can make the build locally but you can use EAS service of Expo if you want to build the application with them on the cloud in this video we are going to do it locally so now once you run this uh this command you're gonna have this Android and iOS folder and now we can run it on iOS to start so I'm going to say yarn iOS I switch from npm to jar so that's why I run jar iOS and this is basically going to run npx X4 run uh semicolon iOS okay once this is done this should be uh build application on the simulator as you can see here so it's loading and there we have our application okay now if you want to learn how to create this this application and all the navigation that we have here make sure you check out my last video and if you want to learn more than that make sure that you go to codewebedo.de and check out my react native course okay nice so now that we have these guys we can actually start implementing all the new all the logic of the authentication now before I do that I'm going to make the build for Android as well so I'm going to say yarn Android and this is the same as saying if you are using npm you can say MPX X4 run Android oops Android like this and this is going to create a build for Android okay and it's going to install it in your Android emulator now that's actually um just close the configuration that I have here for now and I went ahead and created this sign-in screen.js this is going to be a fairly simple UI just to display the button that we're gonna be using so I'm gonna say MP export Depot function and the name is going to be signing screen okay let's return for now a safe area View or we can return just a normal view from react native I'm going to create a text that says sign in with Google Now I I imported from react native web but we need this from react native now uh my build is ready by the way so I'm going to um reload this so this should be now load then the application that we are running okay and there we have it so the application is working on IOS and Android and by the way um this application is compatible with dark mode I'm going to reload my application here on the right and if I change to dark mode you're going to see that this is going to work as well but this is not the topic for this video now that we have this running on Android I'm going to move this away and actually start creating my UI right so for this I'm going to basically just copy a component that I have here already now don't pay attention too much to this component it's just the UI as you can see here we have just this text and for each letter of Google and I'm giving it a color of course I don't think this is the best way to do this but I wanted to hurry up now um I'm passing this prompt async function as a property to this screen and you're gonna see why in a moment but now if I hit save we can actually use now this sign in screen I'm going to go to my app.js which is the entry point of my application and for now just to see what we have I'm going to return my sign in screen okay hit save and this is how it looks okay and as you can see this is working as well on Android but now guys one important thing that I forgot to mention is that in order to direct react back to the application to work correctly we need to specify a scheme into the app.json file so I'm going to go ahead and check double check that I don't have already a scheme and as you can see I don't have it so I'm going to say here skin oops scheme like this and this is going to be a string that identifies your application now I'm going to use this log I recommend that you use this log as well and I'm going to paste it but you can change it as well as you or something that you that you want now because we added that we need to rebuild a gained application so I'm going to say MPX export preview this is going this is to make sure that the changes of this app.json file are going to apply to the application okay so now let's run this on Android let's wait a little bit and we can actually test if that is working by trying to navigate to this link from Safari so I'm going to wait a little bit until this is done okay and it's running right there cool so now okay so we have this application and if I go to my Safari here and delete this and paste the scheme that we defined so I'm going to go ahead and delete this and paste my scheme that that we defined and put a colon slash slash hit enter and this is going to ask us to open navigation test which means that the Deep link navigation is working now whenever we try to open this this is going to open the application okay so this is a cool way to test that the scheme is working okay now we can close this and now we know that this is working so we can actually start applying the logic okay guys now to manage the authentication of the application I recommend that you do this in a higher order component which is the application in this in this example it's the app.js file this is going to allow us to basically just check the authentication State before we render anything to the user okay okay so I don't know what I'm doing here but let's actually start by importing some things that we're gonna need in order to implement this remember that we are using Expo out session so Expo alt session comes with a provider Google and we can access all the methods for Google here so let's import that we are going to need as well to import the web browser window so I'm going to say import all as web browser from Expo web browser remember that we installed this at the beginning okay now apart from this um well we're gonna need to initialize this web browser right away so I'm gonna called the maybe complete out session this is basically going to capture when the user wants to to sign in and instead of taking the user out to Safari for example we are going to open the model screen and display the web browser inside the application got it okay now after this we are going to need to import some things from X sorry from Firebase we are going to need to import Google Earth provider in oauth state change sign in with Google sign in with credential sorry so these methods from Firebase allows us to sign in a user with a provider in this case it's going to be Google Now The All Out State change it's a function that is going to help us to listen to health events um from the user okay and this is going to be like a trigger that is going to basically run a function whenever the user signs in or whenever the user creates an account or something happens in the authentication flow this on Earth stage change function it's going to run and we are going to see how we can use that in a moment now if you remember we have this Firebase configuration here and we need to reference this out object that we have here so we actually know um so I mean so all these functions now to which developer this application um belongs okay so let's import auth from the configuration as you can see here and I believe this is all we need for now but I'm going to go ahead and import as well as in storage because we want to save information that we are going to be retrieving so let's import that we are importing as well the sign-in screen up here and I believe this is all we need for now okay now let's actually start integrating the logic that we're going to be using so I'm going to be using the um sorry I'm going to be using uh state from react so I'm going to import use a state like this but I'm gonna be needing react so I'm going to import all as react from react okay so now we can reference react and Abstract all the functions that we need okay so we're going to be using state to manage or to save the information of the user so I'm going to call this user info and set user info okay now we're going to be using a hook that comes with um authentication with the Google object here so this Hook is going to look something like this it's going to when I say Google dot use out request and is in this hook basically it's going to load the authorization request and Returns the loaded request Okay so the things that this hook returns we are going to get them here so I'm going to say requests like this then response and finally we get a prompt async function this prompt async function it's the one that starts the signing process okay now important we need to specify the applications client ID so let's start with iOS and then if I just put a empty string for now we can specify the Android as well and if you remember we pasted this here so let's copy the iOS super quickly come back here and copy the Android one okay now guys make sure that you don't share this with anyone again and there we go so we have now the request their response and the function from async so the prompt async we can use it like this I'm passing this prompt async to my sign in screen and I'm just calling it like this now the reason why we are calling this function like this it's because we want to make sure that this function is only called when the user presses this touchable opacity which is assigning with Google button so let's uh call it like that make sure that you call it like that because you can also call it like this but this is not going to work correctly so make sure that you call it like this now I'm going to close my sign in screen because we don't need it anymore I'm going to close my Firebase config as well and now we can actually set up a use effect hook to listen whenever the response change okay guys so down here I'm gonna say react dot use effect use effect is going to take two parameters the first one is going to be a callback function and the second one is going to be an array of dependencies in which we can include the variables or dependencies that we can use that we that we want to be checking and whenever this dependencies change we want to run the functionality that is inside this function now the dependency that we need here is going to be the response that we are retrieving from the use of Hook okay now we can check here if the response DOT type it's equal to success and as you can see here we have these methods so I would recommend that you handle every single one as you prefer or following the best practices so for now we're gonna check just if the type is Success what we want to do is abstract some things that we are going to get from the response parents okay and the thing that we need here is going to be the ID token from the user now we can use this token to generate a credential and then authenticate this user okay so I'm going to say credential equal to and here we're going to be using the Google Earth provider that we are importing from Firebase so I'm going to say credential and then to create this credential we need to pass the ID token okay once we have this credential we can actually authenticate the user by calling the function sign in with credential okay and we are going to pass well and if you pay attention here when I open the parentheses this function is going to take the instance of the Authentication of our configuration of Firebase and then the credential so let's fast this out that we are importing from the configuration so let's say here out and then we need to pass um the credential okay which is this credential that we are regenerating with the Google out provider perfect so now this is going to mean that the user is going to be saved into our Firebase Cloud okay so now let's hit save and I believe that this should be working now so I'm going to try to press this sign in of course it's not going to happen because I'm not passing the prompt async as property in this screen remember that we are passing it okay so hit save and now let's try it sign in continue okay and this is working as you can see guys at this point so let's select my account and that's it now let's go to Chrome and let's check here if we have some users okay and we have this user now uh we have the user we did everything correctly but we still in this screen okay now I'm going to teach you as well how you can handle this Authentication and to in order to do that we're going to be using the on out State change from from Firebase like I mentioned before it's this method that we are importing here okay so let's use another use effect for that use effect remember this is going to take two parameters and this use effect is just going to run once because this respect is going to set up the listener so in order to do that we need to say we need to create a subscription and the convention to do that is to call the subscription on subscribe so I'm gonna say on sub this is short or unsubscribe and I'm going to call my method on outstage change as you can see this is going to take my out and then it's going to take a callback function which is going to return the user as you can see here now here is the point where we can grab the information of the user and create a user in our database or just simply save the user locally in this case so let's say async we are going to grab the user in this function and now we can simply validate if we have a user we can do something otherwise we can say console log um else okay so you can handle the state whenever the user is not authenticated okay now let's check if the user exists which means we can actually put this user on the console by saying Consular user now this is going to bring a object super ugly in order to make this a little bit readable for us we can put it in a Json stringify and then pass null as a second parameter and give to us space if I hit save now you are going to see that in my terminal because I sign in I have this information okay and this is the information of the user now as you can see here we have the ID the email my email is verified my display name is anonymous equal to false we can grab a photo as you can see here this is my Avatar Photo and we also have this important information that is going to help us to authenticate the user so here we have the secret token manager object inside this SQL token manager you're gonna find the refresh token as well as the access token and down here you don't see it because my base is in the way but if I put this here you're gonna see that we have this expiration time now this is out of the scope of this tutorial but I would recommend that if you have an important application that you check this expiration time and whenever this token expires you get a new one okay or you authenticate the user again now let's put this down here again and I'm going to actually I could do that okay got it so now we have this information and as soon as we get this information what we can do is call the said user info which is this Setter that we created here using your state so we're going to grab the user info here got it so let's put the user and that's it cool so now we need to actually remove this whenever this component is unmounted so the way we do that with the use effect it's with the cleanup function that it's called whenever the component is on Mount so we are going to call unsubscribe which is on so like this okay so this is for performance make sure that you add it and now uh we can actually start validating what we are going to show on screen depending if we have a user or not and the way we do that is just simply saying that if we have a user well actually I can do it like this if user then navigation which is all my application logic otherwise just print the sign in screen and this is extra okay now let's see if this works okay user does not exist because it's user info actually this is my state variable that I have here okay hit save and now because we have a user we are signed it in that is amazing huh now let's uh go actually to the settings here and add a button to sign out the user okay so let's go to the settings folder sorry settings file and create a button and you're gonna be surprised how easy is to sign out the user I'm going to give it a title which is going to be sign out and then whenever the user presses this button we are going to call an async function and this function is going to await or the sign out method of Firebase hit save now if I press sign out okay we have some error down here let's check it out okay sign out it's giving me an error and that is because I didn't pass my off remember always checked that you are passing all the parameters so let's import out for from the Firebase configuration hit save and now let's try this again now in the state nothing is happening because we are not handling anything here so we so the application doesn't doesn't know that we don't have a user anymore but if I reload this application you're gonna see that the user is not authenticated and we are entering into the else statement that we have in the app.js file here okay so when the user is not authenticated you can basically do whatever you want but in this case um we can say user is not authenticated hit save and now as you can see the user is not authenticated now let's sign in with Google again continue remember that this is going to trigger this um designing with credential and as well it's going to trigger this listener on else they change because the out state is going to change literally uh so we are going to set the user and then this validation is going to change okay so that's why we're going to be rendering the navigation okay let's hit save I mean let's hit on the user and it's working now if I reload the application you're gonna see that we are going back to the sign in screen the reason for that is because we are not saving the user locally we are not saving the session and the way we can do that is using async storage so one way to do that is here right after we get the user we can actually call a weight and then call async Storage which is a dependency that we installed earlier to save to save information in the device of course I would recommend that you encrypt this data or I don't know try to try to do it in a safer way because uh the user could actually hack the device and access this information which contains the token and at the end of the day is information of the user well now that you know that we can actually call A C async Storage dot set item and now we need to provide a key it's a good convention to put a eight ads for this symbol at at the beginning of the string or the name that you want to save in this case is the user and now we can pass the actual information now we can pass the user but remember this user is going to be a huge object and async search is only capable to it's only capable to save strings so that's why we need to say Json string if I hear and close it like this hit save now whenever we authenticate the user we are going to save the information here now whenever we load the application we need now to check if we have a user locally and if we have a user locally we can go ahead and and put the navigation screens right so let's create a function up here this function is going to be an AC function so I'm going to say cons check local user you can name this function as you want this is going to be an async function and it's going to just basically do a try catch so I'm going to say try catch in the case we have an error we can actually put an alert that says error.message Maybe message like this and what we want to try to do is say await async storage dot gets item now we want to get the user and remember that the key was um add user okay okay so this is going to return us the information but in Json format so I'm going to say user Json equal to this now we can simply say constitemp equal to and ecobee user data equal to and here we want to check if we actually have something locally and we can basically say Json if we have something we want to parse this Json so we can use it in JavaScript so I'm going to say json.parse user Json otherwise we want to return node and finally we can save this into the step into the state by saying set user info and pass the user data now at this point this user data can be no or can have actually the information of the user and we are going to set this here so when this happens we are going to trigger again this validation and we are going to render um whatever we need to render now in this case of course we could say console log called storage and then we can put the user data so we can actually see what we have locally and hit save and let's try to actually we're not calling this function anywhere now we can call this function right before we start this subscription so let's call it here I'm going to copy check local user and hit save and as you can see down here local user it's equal to null perfect now let's try to sign in continue this should save the user information locally okay now whenever we try to sign in again sorry whenever we reload the application you're gonna see that we see the signing screen for a moment and then we check the local state and this this switch right now if I check my logs here you're gonna see that local storage is equal to all these object here this huge object in which we can abstract the information of the user right so you can see here the email and all that got it so one thing that I don't like here is that whenever I reload the application we see the sign in screen and then we are um suddenly changed to the home screen now we can easily fix that by creating a loading variable using state so we can actually duplicate this user infline create a function sorry and create a variable called loading and set loading okay this is going to help us to keep track of whenever the whenever we are loading the user for the first time so we can call this function in the check here I want to say set loading voila equal to true and then we can add a finally here so finally I'm gonna say set loading equal to false and the reason I do this on the finally it's because this finally it's going to run no matter what so if we find the user we are going to hit the finally and if we get an error we are going to hit the finally after there so we don't get stuck in the loading equal to True forever okay so now basically we can just add an extra validation here and say if loading return a loading screen but we don't have a loading screen for now so we can use a simple view from react native so let's import from types I guess and then put a text actually we can just put an activity indicator and this activity indicator it's going to be from react native and size it's going to be large so hit save and now I need to change this input because it's wrong this is going to be just react native hit save okay so I think this is working now we are not going to see this because we need to Center this on the screen I'm going to add a style super quickly so let's do a flex one align item Center oops enter and then justify content Center this is going to Center everything now um something it's wrong here I don't know why okay so yeah this is wrong sender hit save reload the application okay and that was quick but I hope that you see that the loading indicator was there so let's reload we are checking we find out that we have the user locally so we grab the user locally now uh I just want to add guys that here um sorry not not here here whenever we checked if we have a user locally I would recommend that you check the expiration token and compare it to the now date so you could basically just graph the number of seconds in which the token expires and then compare it to a new date like this and I guess I think you can you can get the time or get the seconds of the moment and compare it directly so I think you can say get date or get time yeah get time and this is going to return the milliseconds so you can compare it directly but yeah this is going to be out of the scope of this tutorial but basically this is what I wanted to show you guys of course this is going to work as well with the Android device and I'm going to bring it here so you can check it out for yourself let's see it okay so this application request is invalid okay and the reason for this guys I believe is because we need to make the build uh using Expo EAS because we are using remember that we we got the Shi K and the demo that I showed you I created oh never mind this is working here okay so I just needed to reload the application I'm going to select my profile and as you can see this is working on Android perfectly without any problems on too low and there we have it and well guys that's it for this video I hope you liked this video I hope you learned something new I hope you go to Kobe better.dev and buy my react native course as well check out the resources that we have there and otherwise I'll see you in the next video don't forget to be relaxed subscribe and that's it for now bye

Channel: Code with Beto

Views: 41,399

Keywords: React Native, Firebase, Google Sign In, Tutorial, JavaScript, React, Beginners, ios, android, google cloud, social login, google authentication

Id: XB_gNDoOhjY

Length: 64min 25sec (3865 seconds)

Published: Mon Jun 05 2023