Step-by-Step Guide: Implementing Google Sign-In Using React Native with Firebase (Android)

today we're going to learn how to make social login using Google how to login using our Google account so let's open Google and search with react native Firebase and let's open that link let's go down in authentication social authentication let's go down we have here Apple Facebook Twitter and finally Google first we're going to use that Library so let's install it let's go down I will install it using yarn so I will copy that code and here in our terminal let's add yarn add that's our first step our second step is to to initialize a Firebase app in our in our Android app and I have that before in the video I will leave to you in the description and you can press at the top of the video to go and check it the third step we need to enable Google Google signin provider in in our Firebase console so let's open Firebase console let's open our project and let's add new provider and it will be Google so let's enable it let's add any email your email here and let's press save and done now let's close this and close this and go to our third step follow those instructions to install and set up Google sign in so let's press here to uninstall our instruction let's go to Android guide let's go down here we must add that code inside AB build. Gradle that's our app that's Android that's build do Gradle let's add it here and save and let's add independencies those two lines here independencies let's add those two lines that is duplicated so let's remove that because we added that before previously in that tutorial okay so let's go down and let's to make that line the last line that line it's at the top here let's cut it and go down down and paste it here let's go down now let's generate our sha code so let's copy that code and go here in our terminal let's paste it here and press enter and in our Firebase console Firebase project inside our project settings let's select our Android app and press on ADD fingerprint as here in documentation we need to copy sha code so let's open our code let's go up go up see here app signning report search with that title and pick the sh the sha1 let's copy it and paste it here in our Firebase and let's press save and let's redownload our Google service to Json we have downloaded it and add it to our project just replace it with with the existing one replace now let's go back to our documentations now great we've almost done with integration now let's type our JavaScript code let's import let's add that import inside our login screen at the top here let's add that import Google signing and let's add that configure inside use effect hook use effect to get that web client ID we can get it from our Firebase Json file so let's open our Firebase Json file let's pick the client ID of client type three so let's copy that string yes that string let's copy it and paste it here and save and don't forget to save that file too let's run our app let's continue adding our code let's copy that function on Google button press and let's paste it here and let's save let's add a test button here just test button to test our Google for example button with title log in with Google and when we un press on it we just fire that function on Google button press and let's press save now let's test our function let's press here when we press here we have here our Google account let's let's select anyone to sign in with let's press here oops we didn't get any data we didn't log anything inside that function so let's log anything for example let's log our token and let's add alert do alert Success login and let's try one more time great success login and that's our token from Google we want also to to handle errors for example what if we won't what if we don't have that web client ID or we have any errors so let's add track hatch block and that's console to log our error let's pre beautify that code using command K and F or control K andf and let's try one more time with invalid web client ID let's delete that and save and let's [Music] try look we got here a developer error so now let's replace our client ID with the correct one and press save and let's try one more time loging with Google yes login success and that's our token we can get some more data like user and we can log the user let's try when we Press login with Google now we have here our user that's our email learn native 2021 family name s giv name Ahmed and that's our ID and that's our photo that's our Google data now follow me for the next lesson we want to make that Google icon works when I press on it we want also to navigate to home screen when we press here and log successfully and we want also to add a Google login with iOS so don't forget next lessons so subscribe to my channel and if you see that video is good please hit the like button and share it with your friends and leave any comments if you want thanks for watching

Channel: HeroDev

Views: 6,274

Keywords: react native, google authentication, google sign in, firebase, android, beginners, react, social login, tutorial, Google Signin, React Native, Firebase, Android, Implementing Google Signin, Google Signin in React Native, Google Signin with Firebase, React Native Tutorial, React Native Authentication, Firebase Google Signin, React Native Google Signin, Google Signin Tutorial, Firebase Authentication Tutorial, React Native Authentication Tutorial, Firebase Authentication Example, herodev

Id: J9qDaFTP9ao

Length: 9min 27sec (567 seconds)

Published: Thu Oct 12 2023