Sign in with Google using Firebase Authentication In Project React Native CLI

Question

I was trying to implement Google sign-in functionality that uses Firebase Authentication.

However, it was not able to work well and an error occurred:

Error: A non-recoverable sign in failure occurred

I want my application to be able to get usage information after clicking the sign in button with google.

Package.Json

{
"name": "TravelApp",
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": \[
"./src/assets/fonts"
\]
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"link": "react-native link rn-fetch-blob",
"test": "jest"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.22.2",
"@react-native-community/geolocation": "^3.2.0",
"@react-native-firebase/app": "^19.0.1",
"@react-native-google-signin/google-signin": "^11.0.0",
"@react-navigation/bottom-tabs": "^6.5.12",
"@react-navigation/native": "^6.1.10",
"@react-navigation/native-stack": "^6.9.18",
"@shopify/restyle": "^2.4.2",
"axios": "^1.6.7",
"babel-plugin-module-resolver": "^5.0.0",
"react": "18.2.0",
"react-native": "^0.73.3",
"react-native-dotenv": "^3.4.11",
"react-native-dropdown-select-list": "^2.0.5",
"react-native-gesture-handler": "^2.15.0",
"react-native-image-crop-picker": "^0.40.3",
"react-native-image-picker": "^7.1.0",
"react-native-linear-gradient": "^2.8.3",
"react-native-loading-spinner-overlay": "^3.0.1",
"react-native-maps": "^1.10.3",
"react-native-ratings": "^8.1.0",
"react-native-reanimated": "^3.7.1",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.29.0",
"react-native-svg": "^15.1.0",
"react-native-switch": "^1.5.1",
"rn-secure-storage": "^3.0.1",
"zustand": "^4.5.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.73.20",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.4",
"@react-native/typescript-config": "0.73.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
"engines": {
"node": "\>=18"
}
}

Android/build.gradle

buildscript {
ext {
buildToolsVersion = "34.0.0"
minSdkVersion = 21
compileSdkVersion = 34
targetSdkVersion = 34
ndkVersion = "25.1.8937393"
kotlinVersion = "1.8.0"
}
repositories {
google()
mavenCentral()

    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
        classpath 'com.google.gms:google-services:4.4.1'
    }

}

apply plugin: "com.facebook.react.rootproject"

Android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

react {

}

def enableProguardInReleaseBuilds = false

def jscFlavor = 'org.webkit:android-jsc:+'

android {
ndkVersion ndkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
compileSdk rootProject.ext.compileSdkVersion

    namespace "com.travelapp"
    defaultConfig {
        applicationId "com.travelapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug `your text`{
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    externalNativeBuild {
        cmake {
            version = "3.22.1"
        }
    }

}

dependencies {
implementation("com.facebook.react:react-android")
implementation("com.facebook.react:flipper-integration")

implementation platform('com.google.firebase:firebase-bom:32.7.4')
implementation 'com.google.firebase:firebase-analytics'
implementation 'com.google.firebase:firebase-auth:22.3.1'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
    
    implementation(project(':react-native-maps')){
      exclude group: 'com.google.android.gms'
    }
    implementation 'com.google.android.gms:play-services-base:18.0.1'
    implementation 'com.google.android.gms:play-services-location:19.0.1'
    implementation 'com.google.android.gms:play-services-maps:18.0.2'

}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
apply plugin: 'com.google.gms.google-services'; applyNativeModulesAppBuildGradle(project)

Code Sign With Google

import { GoogleSignin } from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
webClientId: '419858778154-71igag2egaq5n11290ddf711mfkimh2b.apps.googleusercontent.com', // client ID of type WEB for your server. Required to get the idToken on the user object, and for offline access.
});

const signInWithGG = async () =\> {
try {
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
console.log('SignGG: SUCCESSFULLY: ' + JSON.stringify(userInfo))
} catch (error) {
console.log('SignGG: ERROR: ' + error);
}
};

<TouchableOpacity style={{ backgroundColor: "transparent" }} onPress={() => signInWithGG()}>
     <Text style={styles.buttonText}>Sign in with Google</Text>
</TouchableOpacity>