Google Sign in Using React Native and Firebase Tutorial | React Native Tutorial And Project | JS

[Music] hello guys my name is Rohit Kumar thakur and in this video I will show you how to build a Google sign-in application using react native Expo and Firebase you can see that this is the demo of this project so without wasting any time let's start this project first users have to initialize an explore application select the blank template and name the application and then continue to dependencies downloading now I just want to tell you that the code of the Google sign-in is not that much difficult but the setup is little bit hectic because the Google sign-in package is deprecated in the SDK version 46 of the react native Expo so we have to use the native code to get our job done so follow the video carefully and pay a little bit extra attention thank you uh now if you check the documentation of the react native Firebase then we have to install this react native package first [Music] now under the social authentication are we gonna follow the steps of Google sign in [Music] now now if you scroll down or you can see the Expo installation guideline here it is mentioned that this package cannot be used in the Expo go so our uh so our Expo mobile application is useless uh but don't worry we're gonna use a different way here uh next if you read this documentation uh then it is mentioned that if you are using the custom native code then the uh then the Expo mobile application does not gonna work I had two different methods are given the first one is development build and the second one is the previewed method but here we gonna use the development build method foreign just install the export div client package [Music] here I am going with the Android devices but you can go for the iOS devices to copy the command and paste it into your terminal window now confirm your Android package name or press y to generate a new Android key store [Music] uh here if you wonder what is this com.ninja7.google Expo then it is my Android package name uh here the ninja 7 is my username and the Google Expo is the project slug [Music] uh you have to wait 5-10 minutes here let the build complete then we proceed to the next step you can see that our build is complete now so let's proceed with the next step now install the react native Google sign-in package [Music] [Music] foreign [Music] this plugin and paste it inside the Json file don't forget to use the comma at the end now for the next step let's configure the Firebase application first foreign [Music] here we need to set up our Firebase application for Android [Music] go to the package.json file scroll down and copy the package name then paste it here now now we need a debugging sign-in certificate to get that we need to get a EAS credential select Android then development then key store then set up a new key store then use the down arrow and select the create a new build credentials [Music] now you can see that we have a newly built sha one configuration key are we gonna use this in our Firebase application [Music] we're gonna use the default Keys too so don't download the Google service file Google service Json file now foreign configuration case and download the Google service Json file [Music] foreign snippet inside the Android section of Json file [Music] next just place the downloaded Google service Json file inside the project directory [Music] uh here I missed one react native package to install so install it using the npm and now according to the documentation uh you have to rebuild your project so run this command in your terminal and wait 5-10 minutes to let the build complete foreign [Music] you can see that the build is complete now so now let's test this application on an Android device for this you have to use a QR code scanner application you can simply download it from the Play Store and and just scan the QR code and open it in your browser download the application and this file is not harmful because you just made it so it's fine [Music] [Music] now just install the downloaded file you can see that this is how a development build project looks now run the export div client code thank you scan this new QR code and copy the URL and paste it into your development build application you can see that on screen as well by the way the QR code application was my first mobile application that's why it looks so bad and I published that on Play Store too so if you wanna use the Sim and then I will provide the link in the description box uh you can see that our application is running and it is rendering the default code of react native now our setup is complete uh so we're gonna write the code [Music] uh here if you are facing any problems regarding the setup then you can message me on Instagram [Music] uh now for the web client ID go to the Google service Json file and inside the oauth client we need the client type 3 so copy this and paste it there [Music] uh we're also gonna use the authentication State change uh here we have two State uh one is the user is logged in and the next is the user is logged out so if the user is not logged in then we're gonna show them the login screen otherwise we're gonna show them show them their dashboard other react native Firebase has a built-in code for that we just have to use it okay foreign [Music] button Place function we are going to use the default codes let's customize it a little bit we are going to console.logs the user information that is on successful login you're gonna see the user's data on your terminal window foreign [Music] [Music] [Music] and now if the user is not logged in and then we're gonna show them the login screen [Music] [Music] foreign [Music] foreign [Music] foreign [Music] [Music] [Music] uh you can see that we rendered a Google signing button uh but I think we need a header so let's write a code for the header here I don't want to drag this video so I'm just trying to keep it simple as possible [Music] [Music] foreign [Music] [Music] foreign [Music] [Music] [Music] next if the user is logged in then we're gonna show them their name profile picture and sign out button so let's write the code for that [Music] thank you [Music] [Music] [Music] foreign [Music] [Music] foreign [Music] [Music] you can see the multiple Google accounts and here I can select any and you can see my name here foreign [Music] [Music] [Music] foreign [Music] picture of me now let's write the code for the sign out button [Music] [Music] foreign [Music] [Music] uh now if you click on the sign out button and the application will render you the login screen because the state has changed you can log in again with a different Google account the application is working smoothly you can see the user's data in the Firebase too thanks for watching this video subscribe this channel for more project waste videos on react native python data science Django and machine learning foreign [Music]

Channel: Bug Ninza

Views: 30,470

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, google, authentication

Id: d_Vf41Sb0v0

Length: 20min 56sec (1256 seconds)

Published: Thu Sep 01 2022