{"id":7360,"date":"2023-09-07T16:16:10","date_gmt":"2023-09-07T10:46:10","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=7360"},"modified":"2023-09-07T16:16:16","modified_gmt":"2023-09-07T10:46:16","slug":"google-integration","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/google-integration\/","title":{"rendered":"Google Integration"},"content":{"rendered":"\n

GOOGLE INTEGRATION<\/p>\n\n\n\n

1.Go to the <\/em>Firebase Console<\/em><\/a> and create a Firebase project:<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2.Dependency: <\/em>yarn add react-native-google-singin<\/em><\/p>\n\n\n\n

3.<\/em>Update <\/em>android\/build.gradle<\/em><\/strong> with the following configuration:<\/em><\/p>\n\n\n\n

buildscript {<\/p>\n\n\n\n

    ext {<\/p>\n\n\n\n

        buildToolsVersion = “27.0.3”<\/p>\n\n\n\n

        minSdkVersion = 16<\/p>\n\n\n\n

        compileSdkVersion = 27<\/p>\n\n\n\n

        targetSdkVersion = 26<\/p>\n\n\n\n

        supportLibVersion = “27.1.1”<\/p>\n\n\n\n

        googlePlayServicesAuthVersion = “16.0.1” \/\/ <— use this version or newer<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

…<\/p>\n\n\n\n

    dependencies {<\/p>\n\n\n\n

        classpath ‘com.android.tools.build:gradle:3.1.2’ \/\/ <— use this version or newer<\/p>\n\n\n\n

        classpath ‘com.google.gms:google-services:4.1.0’ \/\/ <— use this version or newer<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

…<\/p>\n\n\n\n

allprojects {<\/p>\n\n\n\n

    repositories {<\/p>\n\n\n\n

 mavenLocal()<\/p>\n\n\n\n

  google() \/\/ <— make sure this is included<\/p>\n\n\n\n

        jcenter()<\/p>\n\n\n\n

        maven {<\/p>\n\n\n\n

            \/\/ All of React Native (JS, Obj-C sources, Android binaries) is installed from npm<\/p>\n\n\n\n

            url “$rootDir\/..\/node_modules\/react-native\/android”<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

4.Update android\/app\/build.gradle with the following configuration:<\/p>\n\n\n\n

…<\/p>\n\n\n\n

dependencies {<\/p>\n\n\n\n

    implementation fileTree(dir: “libs”, include: [“*.jar”])<\/p>\n\n\n\n

    implementation “com.android.support:appcompat-v7:23.0.1”<\/p>\n\n\n\n

    implementation “com.facebook.react:react-native:+”<\/p>\n\n\n\n

    implementation(project(“:react-native-community_google-signin”)) \/\/ <— add this dependency<\/p>\n\n\n\n

}<\/p>\n\n\n\n

FOR IOS<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

1.1: Apple bundle id from ios folder (AgribreedersSellerHub.xcodeproj) open<\/p>\n\n\n\n

Bundle id is apple bundle id<\/p>\n\n\n\n

2.Next, we copy the GoogleService-info.plist<\/strong> file to the Xcode project as shown in the screenshot below:<\/p>\n\n\n\n

3.Now, we need to add the reversed client ID present in the GoogleService-info.plist<\/strong> file to the URL Types, as shown<\/p>\n\n\n\n

 in the screenshot below:<\/p>\n\n\n\n

4.Next step is to go to Info<\/strong> \u2192 URL Types<\/strong> then fill the URL Schemes<\/strong> as shown in the screenshot below:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

FOR ANDROID<\/p>\n\n\n\n

1.First, we need to create an Android app on Firebase. For that, we need a package name and certificate SHA-1<\/strong> from our app. Then, we can register the Firebase app as shown below:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2.  For Android package name we have check in MainApplication.java file in android open  [package com.appname;<\/strong><\/p>\n\n\n\n

3.Next, we can get the SHA-1 key in the Keystore file. In the android\/app directory, we can run the command:<\/strong><\/p>\n\n\n\n

3.1 for windows:<\/strong>keytool -exportcert -list -v –<\/strong>alias<\/strong> androiddebugkey -keystore %USERPROFILE%\\.android\\debug.keystore<\/strong><\/p>\n\n\n\n

3.2 for mac:<\/strong>keytool -exportcert -list -v –<\/strong>alias<\/strong> androiddebugkey -keystore ~\/.android\/debug.keystore<\/strong><\/p>\n\n\n\n

4.<\/strong>After successfully creating the Firebase setup app, we need to download the google-services.json file and copy it to the directory, as shown in the screenshot below:<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Installing the React Native Firebase Package<\/strong><\/h3>\n\n\n\n

In order to install react-native-firebase package version 6, we need to run the following command in our project command prompt:<\/strong><\/p>\n\n\n\n

# Using npm <\/strong>npm<\/strong> <\/strong>install<\/strong> –save @react-native-firebase\/app<\/strong><\/p>\n\n\n\n

Then, the SHA-1<\/strong> key will appear, as shown in the screenshot below:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After successfully creating the Firebase setup app, we need to download the google-services.json <\/strong>file and copy it to the directory, as shown in <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For iOS<\/strong><\/h3>\n\n\n\n

We already have GoogleService-Info.plist <\/strong>added to Xcode. What is left is to allow Firebase on iOS to use the credentials. The Firebase iOS SDK must be configured during the bootstrap phase of your application.<\/p>\n\n\n\n

To do this, we need to open our \/ios\/{projectName}\/AppDelegate.m file, and add the following:<\/p>\n\n\n\n

At the top of the file, we need to import the Firebase SDK:<\/p>\n\n\n\n

#import <Firebase.h><\/p>\n\n\n\n

Within your existing didFinishLaunchingWithOptions method, we need to add the following to the top of the method:<\/p>\n\n\n\n

– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {<\/p>\n\n\n\n

  \/\/ Add me — \\\/<\/p>\n\n\n\n

  if ([FIRApp defaultApp] == nil) {<\/p>\n\n\n\n

    [FIRApp configure];<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

  \/\/ Add me — \/\\<\/p>\n\n\n\n

  \/\/ …<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Finally, we need to run the following command to finalize the installation of the CocoaPods package:<\/p>\n\n\n\n

cd ios ; pod install<\/p>\n\n\n\n

For Android<\/strong><\/h3>\n\n\n\n

We need to configure Firebase with Android credentials. To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory.<\/p>\n\n\n\n

First, add the google-services plugin as a dependency inside your android\/build.gradle<\/strong> file:<\/p>\n\n\n\n

buildscript {<\/p>\n\n\n\n

  dependencies {<\/p>\n\n\n\n

    \/\/ … other dependencies<\/p>\n\n\n\n

    classpath ‘com.google.gms:google-services:4.2.0’<\/p>\n\n\n\n

    \/\/ Add me — \/\\<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Lastly, execute the plugin by adding the following to the very bottom of your \/android\/app\/build.gradle file:<\/p>\n\n\n\n

apply plugin: ‘com.google.gms.google-services’<\/p>\n\n\n\n

React Native Firebase Authentication Module<\/strong><\/h2>\n\n\n\n

After the installation completes, we need to set up the parent Firebase package. Next, we need to install the child module for authentication. For that, we need to open a terminal and run the following command:<\/p>\n\n\n\n

yarn add @react-native-firebase\/auth<\/p>\n\n\n\n

These are integration on Facebook<\/p>\n","protected":false},"excerpt":{"rendered":"

GOOGLE INTEGRATION 1.Go to the Firebase Console and create a Firebase project: 2.Dependency: yarn add react-native-google-singin 3.Update android\/build.gradle with the […]<\/p>\n","protected":false},"author":504,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-7360","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1UI","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/504"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7360"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7360\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}