google Sign-in Crashing Apk(React Native)

Viewed 406

i am trying to implement Google Sign-in in react native. The way i am implementing the sign-in is not supported in expo, it is supported only in production, but when i build the apk and try to run it on my android app, the app still crashes, is there way i can view the error associated with crash?

also here is my code in case someone spots the error:

import React, { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as GoogleSignIn from "expo-google-sign-in";
import axios from "axios";
import { StyleSheet, Text, View, Platform } from "react-native";
import RootStack from "./app/navigators/RootStack";
import LoginScreen from "./app/screens/LoginScreen";

export default function App() {
  const [login, setLogin] = useState(0);
  const [alertmebad, setalertmebad] = useState("");
  const [alertmegood, setalertmegood] = useState("");
  const [googleSubmitting, setgoogleSubmitting] = useState();
  //setting the login key
  const storeData = async (value) => {
    try {
      await AsyncStorage.setItem("@login_key", value);
    } catch (e) {
      // saving error
    }
  };

  // THIS IS WHERE THE CODE STARTS______________________________________________________
  useEffect(() => {
    initAsync();
    checklogin();

  });
  const androidClientId =
    "MY_ANDROID_API_KEY";
  const iosClientId =
    "MY_IOS_API_KEY";

  const initAsync = async () => {
    try {
      await GoogleSignIn.initAsync({
        clientId: Platform.os === "android" ? androidClientId : iosClientId,
      });
      getUserDetails();
    } catch (e) {
      console.log(e);
    }
  };

  const getUserDetails = async () => {
    const user = await GoogleSignIn.signInSilentlyAsync();

    
  };

  const handleGoogleSignin = async () => {
    try {
      await GoogleSignIn.askForPlayServicesAsync();
      const { type, user } = await GoogleSignIn.signInAsync();
      if (type == "success") {
        // getUserDetails();
        setalertmegood("Signin was success");
        setalertmebad("");
        const { email, name, photoUrl } = user;
        signup({ name: name, email: email, password: "sfgfgsfg" });

        setTimeout(() => {
          storeData(JSON.stringify({ email, name, photoUrl }));
          // console.log(JSON.stringify({ email, name, photoUrl}));
          // navigation.navigate("HomeScreen", { email, name, photoUrl });
          checklogin();
        }, 1000);
      } else {
        setalertmebad("Signin had an error");
        setalertmegood("");
      }
    } catch (error) {
      setalertmebad(error);
      setalertmegood("");
    }
  };

  // THIS IS WHERE THE CODE ENDS______________________________________________________

  const signup = (credentials) => {
    console.log(credentials);
    const url = "https://blooming-escarpment-74540.herokuapp.com/user/signup";
    axios
      .post(url, credentials)
      .then((response) => {
        const result = response.data;
        const { message, status, data } = result;

        if (status !== "SUCCESS") {
          console.log("if: " + message, status);
        } else {
          // console.log(...data[0]);
          console.log("else: " + message, status);
        }
      })
      .catch((error) => {
        console.log("catch:" + error);
      });
  };


  // to check if someone is logged in already
  const checklogin = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem("@login_key");
      jsonValue != null ? setLogin(1) : setLogin(0);
    } catch (e) {
      console.log(e);
    }
    // storeData(null)
    // setLogin(0);
  };

  
  return login == 1 ? (
    <RootStack />
  ) : (
    <LoginScreen
      onPress={() => handleGoogleSignin()}
      alertmeBad={alertmebad}
      alertmeGood={alertmegood}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
1 Answers

we are getting this error Error: Objects are not valid as a React child (found: Error: GoogleSignIn.null: DEVELOPER_ERROR). while we login with google

Expo Solution:

The problem is fixed.

  1. Get Android hashes from Expo
expo fetch:android:hashes
  1. Copy Google Certificate Fingerprint and save it in your app.json under
{
    "expo": {
        "android": {
            "config": {
                "googleSignIn": {
                    "certificateHash": "<Google Certificate Fingerprint>"
                }
            }
        }
    }
}
  1. Add the same Fingerprint in your Android app settings in Firebase console

React Native Solution:

You need to add your SHA1 key to firebase console configuration. You can do it in this way:

Firebase console ( https://console.firebase.google.com ) -> your project -> configuration -> scroll to

enter image description here

You can find your SHA1 key running "Signing report" from Android Studio:

enter image description here

Then, look the "run tab" and click the button:

enter image description here

I think it's the easier way. Hope this help.

if you wanna more solutions then you can check this Thread

Related