React Native Tutorial #9 - Sign In with Google

hey guys welcome back so I know this series was completed but some of you guys asked me to do a video on sign in with Google so here it is now first of all we will need to add a application iOS application here so you can add it from here Apple and you will need a bundle ID of your application so you need to provide that here and the way you can get that is you need to open this iOS folder in your finder and then open this folder and you will see a project file here so you need to double click on it and it will open in xcode and after clicking on the on your project name you will find your bundle ID here so you need to copy paste this bundle ID in here so we can connect this application to our project and after that registration is complete you need to download this file this Google services file we will need that so just download this file and open it and we need to drag and drop this file into our project so just drag and drop this file into expensify project here and then you need to click all the targets and finish okay so let's get back and complete the app setup just click on next and leave all the things that is as it is and after that now we need to enable Google sign in with Google so go to authentication and sign in methods then add a new provider Google you need to enable this and yeah save your everything looks good now we need a a third party Library which is called react native Google sign-in we will use this to log in with Google I've already installed it into our project but you will need to copy this command and paste it into the terminal here and this will be installed if you face any error just go to the iOS folder and run a pod installer command this will fix the issue now let's read their documentation and we will need a sign Google sign in method so yeah here it is but we don't need this uh yeah we will need this function so let's just copy paste this into our project okay we will add it in the welcome screen let's just copy this function to our component need to declare it as const okay so now we need to connect this to our Firebase application so we need to use this configure code we won't be adding all the parameters we just did web client ID so I will remove this additional parameters we won't need this and we also now need this okay so now we need to get the web client ID so we need to move the Firebase console and we can get the web client ID from Google sign in method from here here is your web client ID just copy this and paste it here like this and now if we save this and now we are getting a very ugly error which I don't know why is it's happening because we already added the web client ID so let's just rebuild our application maybe that will fix this problem so let's run npm run iOS that will rebuild the application okay so the issue is gone that means it's a our configuration is successful okay so now we will need a button for Google login so it will add it under the sign up button so let's just copy paste this button and change this method to sign in that we just created and we also don't need a background of the screen we will just add a simple white background we have the round of white okay let's give the merchant bottom for sign up okay so now we also need to add a Google logo here so let's add a view so the shadow Clause of flux so you can Flex them side by side next row Define Center and items Center and a little spacing between them okay let's add the text here and now we need to add our Google logo here you already added the logo in the in the assets so let's just import it assets images Google icon like this and we also need to give it a height and width so it can be displayed let's give it a height of 8. save it Google Icons so it should be icon okay so this text should be dark let's make it gray of 600. okay we also need to share this text it will say sign in with Google okay so now let's make some changes to the sign in method so first of all it will check if device has Play services it will only work then if down then it will show some error so the process is very simple first of all we will get the user info from Google sign in and that user info will also include an ID token that we will use to create Google credentials and that Google credentials will be used to sign in with Firebase so let's move this and instead of user info we will just get an ID token and we will use this ID token to create Google credentials and Firebase has already a service provided for that it's called Google auth provider we'll use that and it has a method credentials which we will pause our ID token and this will give us the Google credentials now we will use another method from Firebase sign in with credentials and we need to pause these credentials so this will just log in the user with these credentials and if it works it will log in the user with Firebase if it don't it will give us an error let's just console all this cell for now error Dot message with this now hopefully this should work and fingers crossed Let's test our implementation everything looks good okay okay for some of you guys this implementation will work perfectly but if you face this error then you need to follow these steps just open the project in xcode and then you need to click on your Google services file and then you will see a reversed client ID you need to copy this value and then you need to click on your expensify project just click on it and move to the info tab and then in the bottom of these tabs you will see URL types just click on it and add a new URL type then you need to paste the value that you just copied here so let's paste it here and click on anywhere else okay so the process is finished now just head back to the vs code and we need to rebuild our application so let's run npm run iOS this will rebuild our obligation and hopefully this will fix our radar as well Okay so we are our implementation was successful so now we need to choose a Google account and this will log Us in in a second let's see it looks get ID token response of undefined okay I think we missed something I think we need to pause authentication Service here as well okay so let's change this we will pass our odd servers and then we need to provide Google credentials okay I think this was the issue let's try again continue choose an account oh yeah and we are successfully moving to the home page that means it is successfully working so let's add a trip here Pakistan yeah it's working or adding expense here action movie 200 retainment and expense okay so it's all working perfectly okay so our sign in with Google is also completed and if you still have any questions about anything you can ask them into the comment section and I will try to answer them as soon as possible and do like the video and subscribe the channel [Music] thank you

Channel: Code With Nomi

Views: 22,691

Keywords: firebase developers, firebase tutorial, firebase auth, react native, react native tutorial, react native app, react native project, react native tutorial for beginners, react native for beginners, react native course, react native app tutorial, react native crash course, app development, learn react native, react native expo, flutter vs react native, react native ui, react native google login, firebase, react native firebase firestore, product: firebase, gds: yes;, tailwind

Id: k11SZYZIn14

Length: 10min 27sec (627 seconds)

Published: Mon Mar 20 2023