React Native Google Sign In Using Firebase - Vanilla React Native

hi guys what's up my name is Al and welcome back to my YouTube channel coding with a so today I'm going to implement a Google login in Rec native app using firas so let's don't waste time let's jump into the code let me share my screen first yeah so I already created a basic uh R native app uh using npx R native init command and let's uh open the code in vs code yeah now the our app is open in Visual Studio code that's it yeah so this is the basic recognitive template so we have we need to clean up some code after we are using JavaScript no typescript at the moment let's clean some code go down C it yeah clean this [Music] one right so clean the new [Music] section yeah yeah let's create a view inside the safe area view let's create a touchable let's create a simple [Music] button yeah inside button text sign in with Google that's it so import this one are done so after that [Music] the we have to go to the rec Firebase documentation let's search on Google chome Rec Firebase yeah so the first step will be uh integrating Firebase in our project is to install retive Firebase app package go to the [Music] teral here so hit the command enter hit on here so it will install Rec fire app in our rec project so after that the app install now so what's the next step go uh go down for scroll down so we need to set up Android Android app so go to the Firebase console cre new app add a project name it re social app login name it anate name it it's not is not an issue name we're just practicing it create project so it will take few seconds or minutes to create a new project on Firebase uh so project is creting let's go documentation so we need to follow documentation made so it's necessary to follow all the steps for Android setups and after that we go to the iOS build so first we have to do with the Android build it take some time yeah so our project is created now so let's we are we are doing Android so we have to create an Android app inside our fireb so we need to know our Android packing name so for Android packing name we have to go inside the Android folder inside app inser Source inside main inser Java inside main activity this is our uh package uh package uh package name inside main activity file copy and paste that package name here after that we need signing certificates for signing certificates go into the documentation uh yeah and run this command because for Google login for deep links and for phone authentication we need a sha one and Sh 256 certificate signing certificates for uh debugging here for using this type of functions in our app go there copy and paste these commands yeah it will take few seconds or minutes based on the machine so it will give us a signing certificates for our retive app for our fireb yeah so let's wait a few seconds yeah are done so we need this this which which one we need let's go into documentation we need a debug Android test certificate for debug mode so let's go forther Android deug key Android debug Android test yeah so we need this one we need this one s one signing certificate copy this one and go to the Firebase and paste here register your app click on register done so we need to download this Google services tojson file but but we download it later after uh authentication after uh adding a provider Google provided in our app you click next click next continue conso yeah our app is now created then go to the build go to authentication yeah so get started yeah I click on Google log enable it add the add the email yeah we are using this account save it yeah it will take few seconds to save this uh information yeah so download it download from here Google service. file click done yeah so our file is downloaded now go to our directory yeah this one click on this one go to our app yeah so scroll this go to inside of app yeah so scroll yeah let's click on it let uh copy and drag it yeah let's copy and drag it inside app folder yeah so inside app we need we go toile let close the finder yeah so after that now we have a Google service. file now so let's go back yeah and go into Firebase documentation go into the authentication section go into the usage we have to install this package made for all re Firebase all copy and paste this hit enter it will install the re fire package done the terminal after that scroll down yes scroll done so this part is done now so let's go back to the get started command we need to set up re Firebase inside our Android credential so copy this point copy this line go to Android build file inside Android build build file and and inside dependencies we have to paste this inside dependencies paste here here done so this one copy this pH and go to Android app build file inside app folder uh build file build. file yeah paste here apply plugin this one here yeah done so if let's check if any step is missing yeah we're done with all the steps now so let's go into the social L social step uh let's click on Google provider so for Google provider for Google sign with f we need to install this Library reative Google signin Google sign in so copy this line and go to the terminal on the add Google and Google sign it will install the library inside project done so we have to configure the Google sign let's copy the code paste inside over app GS file yeah we need a web client ID for web client ID we have to go to Android folder app folder uh Google service file and if you see there is a client type three you you have to copy this ID for your web client ID copy this one go to go to the app pro file and paste here in FL ID contrl s c contr s then after that go further down and uh you already have this line copy this line to Fire and import this on straight move and after that copy that fun for Google direct native and then uh paste inside the app so F use try cat for error handing left's try try cat C for [Music] error console log conso dolog error done so after that copy this these lines and and paste inside the tri yeah after that consol to loog if you sign sign successful then write users user sign in successfully test done me now yeah remove that code yeah that's it so on touch we have to we have to call this function which was the name of function on Google button press the call this function on this one they done that's done May that's done that's simple now uh build Android Android command build and folder I think we have to go to the goog s Library I think I missed one simple step uh go to Google sign in documentation ofation C setting up Android set up after that we need to copy this line and go to Android build Let's uh this one here build Android build G file and paste here yeah now now we have to run this y command again yeah it take few seconds to run thisy let check yeah it's fail it's failed because du toid Google servic file it fail because Google services to Jon file is missing we have to put this inside Android app go Services file oh we write an name we have to read name it may we have to rename it that's why it's not finding our file that's why it's sing build it again so for that mistake it takes few seconds yeah I don't think it takes too much time let where this doing doing just follow the documentation just follow the documentation is so simple yeah first uh first of all you need to install this pack package package uh yeah Firebase app then you have to enro setup on Firebase create an uh Firebase project and add an Android app after that signning certificate create a signning certificate by uh running this command uh and put copy and paste the signing certificate in Firebase console after that you have to uh create an authentication uh folder authentication uh get started and after I create a i Google provider and after adding Google provider just download the Google services file and put it inside Android app folder that's it that's simple yeah that's simple yeah to easy steps yeah and for configuration just do these steps just follow the path and copy paste these lines that's it we done is down done so let's run it justly consigning with Google oh it's open the popup it's open the popup it's open the popup click on it then let's check the terminal you see user sign is successfully PR PR PR PR PR y so let's check on go ination click on user you see s gmail.com is done May is done so Google sign in with Android part is done now so we need to go with iOS part now yeah let's check let's check let's go on iOS yeah for iOS that's step most of the steps are same so let's delete an account because we need to sign again so for go go on project project settings add an app add a new app click on iOS we need a app bundle ID for bundle ID we have to open xode for for bundle ID let's open xode first of all let's go and finder uh desktop uh let's go on project uh inside iOS open thec workspace file inside xcode it will open inside the xod let's compile it's all automatic open in xode yeah so it takes some few seconds to open the xcode so Android part is done now so let's quit the Android Android emulator at the moment because we don't need it yeah we don't need Android ulator at the moment so let's and done so that Cod yeah it's loading it's loading it take few seconds to load yeah General yeah this is our Bund identify this is our bundle identifier let's write it all. react gs. example let SL it or where yes do native. sample do Rec native app we can also copy it but St where R and o yeah r r and yeah let's let's weing an app yeah so it takes a seconds to Reg app so we need to download this Google Services St this file let's download it now yeah click next click next click next we don't need to follow these steps yeah done so go and find her go and find Google this so where where we have to put this file we have to put this file inex go on the target cck the target uh click on this one add file to all have then hide options go to desktop uh downloads inside downloads We have this file Google services Google services yeah this is a file add it yeah so file is added now so let's uh create let's go first and let's follow the other steps yeah this one is done this step is done now so for yeah so now we have to copy this line of for and go there inser the iOS uh project name app to app delegate. mm file let's search this file go to the iOS uh re delegate file past here below the app delegate file after that uh copy this line of copy this piece of code and paste inside that dat finishing launching with options yeah the function is here so let's uh save let's paste here and save it yeah after that we have to uh do something do some stuff with uh CA P coca PS sorry CA portation issue yeah so go into the port file go inside the port inside the target let's put here youring so after that so with the following after that yeah copy this line of all piece of code so and paste here so basically Rec native uh Rec native is you see here uh in the documentation recog Firebase uses use framework which has compatibility issue with flipper so we have we have to disable a flipper configuration our for file so let's go further down and comment this line of com this piece of for comment the speed of C is very important for iOS build so let's go into the iOS folder and let run forw I think I missed some St but that's okay man I don't think so it will create an issue that's done that's done Auto linking is done now so that's done yeah just copy this command and then check check here in Social L is there any issue is there anything we have to change I spot yeah that's is done Google for that's done let's jump into the let's jump into the Google Science let's check here if any issue setup is done check iOS setup or install iOS code configuration we have to add this yeah we missed St we missed this St we need to add a in Ur go to the xode go to the xod inside info I think inside inside URL scheme Ur add the new URL scheme the your scem will be R side Ur scen go to the go to the I think go to the Min file reverse ID copy the reverse ID this is reverse ID copy this ver let's go back let's click on it info and URL scen paste here yeah that's done man that's done so we don't need to to do anything else here yeah we copy this line reverse ID here that's it yeah so let's uh for this install again let's install again for update we have to need to for update but for install will also work here yeah it's done you're done done let's check in yeah it's added me add it in Google place file yeah so after that run on y iOS so to build the iOS I project again yeah it's it's running running yeah it takes few seconds few minutes to p on device so it takes few seconds let's let's wait and watch yeah for I think there's something we need to change here I C we need to add highest client ID here highest client ID option here client ID for cl ready let's go back inside our uh Google service L file yeah so inside export we have this file yeah so where file client ID this is our client ID let's copy this ID and paste inside of a code done that's done that's simple that's simple steps for integrating Google sign up in red native app using firas yeah if you don't integrate Firebase just so the basic thing is just uh get Google CRS from just get ID token from Google sign and put uh send that token to the backend server and then backend server will uh do all the all the steps uh at their own handle all the steps at their own yeah so that's May taking few seconds and times recing fond yeah y take some time we have to wait for this build [Music] yeah it's doing it's doing it's doing it's near it's very near you can you can skip this you can skip this part in the video move forward l it's doing it's doing it's very near very near it's doing yeah it's no installing or building are your simulator now done now successfully build the app now done so let's open a simulator it will launch the app here inside the simulator you know yeah this is our app boom it's open me it's open it's open now yeah let's wa some minutes here so let's click on it goog sign Google yeah continue click continue it will open the account of google.com uh enter enter your email let's write uh let's write this email let's this email let's let try with other this my cck continue yeah so let's click now done man it's done it's done let's check the console you see user sign in successfully on iOS yeah let's go let's go and check let's go and check in authentication May yeah you see our user is ADD now our new user is added now from IOS yeah 25 January 2024 That's it man that's it that's for today video If you like this video subscribe to this video subscribe to this Channel and like and like and watch more videos like this in on this channel more content is coming so you have to follow this channel man so that's it for today uh let's see you in the next video take care keep coding keep sharing and keep watching my videos that's in Bye Bye Bye Tata take care

Channel: CodingWithA

Views: 1,597

Keywords: Firebase, Authentication, Social Logins, react native, Google Sign, google login react native, Vanilla React Native, Expo, react native firebase auth, android, ios, cross platform app, react-native-firebase authentication google, react native authentication, mobile app development, mobile app, apps

Id: vJqMRegowSI

Length: 24min 49sec (1489 seconds)

Published: Fri Jan 26 2024