search

react-native-google-signin / google-signin

Google Sign-in for your React Native applications
https://react-native-google-signin.github.io/
MIT License
3.12k stars 876 forks source link

ERROR: RN GoogleSignin not linked & TypeError: Cannot read property 'SIGN_IN_CANCELLED' of null, #1191

Closed Yanis540 closed 10 months ago

Yanis540 commented 11 months ago

Hi i'm pretty new to mobile dev, i'm currently using RN with EXPO and firebase, and for some reason Google Sign In doesn't wanna work i'm getting these two errors :

ERROR; RN GoogleSignin native module is not correctly linked. Please read the readme, setup and troubleshooting instructions carefully or try manual linking. ERROR : TypeError: Cannot read property 'SIGN_IN_CANCELLED' of null, js engine: hermes

Installations: 

npx expo install @react-native-google-signin/google-signin
npm install --save @react-native-firebase/app
npm i @react-native-firebase/auth
npx expo install expo-dev-client 
eas build:configure

eas.json

 "build": {
    "development": {
      "android":{
        "buildType": "apk"
      }
    },
    "preview": {
      "android":{
        "buildType": "apk"
      }
    },
    "production": {
      "android":{
        "buildType": "apk"
      }
    }
  },

Running this : 

eas build 
eas credentials # Got the SHA-1 certificat from here

After that in configured the project in firebase and put the SHA-1 for android, and activated the google auth

app.json : 

 "expo":{
     "android":{
         "googleServicesFile": "./google-services.json"
     },
     ...
     "plugins": [
       "@react-native-firebase/app", 
       "@react-native-google-signin/google-signin"
     ],
 }
eas build # generating the build to put on Android Studio emulator 
npx expo start --dev-client

After Installing that i installed the build on the emulator and ran 

npx expo start --dev-client

Code for the application : 

GoogleSignin.configure({
  offlineAccess: true, 
  scopes:["email","profile"], 
  webClientId:"WEB CLIENT ID FROM FIREBASE" ,
});

Dependencies:

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.19.1",
    "@react-native-firebase/app": "^18.3.0",
    "@react-native-firebase/auth": "^18.3.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "@tanstack/react-query": "^4.32.0",
    "@types/react": "~18.2.14",
    "axios": "^1.4.0",
    "expo": "~49.0.5",
    "expo-dev-client": "~2.4.6",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-toast-notifications": "^3.3.1",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.3",
    "zustand": "^4.3.9"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.3",
    "@types/react": "^18.2.16",
    "@types/react-test-renderer": "^18.0.0",
    "typescript": "^5.1.6"
  },
  "private": true
}
antoinersw commented 11 months ago

Hello !

I ve had the same issue yesterday. I believe this is because of the SDK49. Try to roll back to SDK48

Yanis540 commented 11 months ago

HI ! Still the same issu even when rolling back to SDK48 on expo .... but thank you

vonovak commented 11 months ago

Hello, sdk 48/49 should make no difference. please try deleting your android and ios folders in the project. Then run the

npx expo run:android

Or

npx expo run:ios

Commands as described in https://docs.expo.dev/workflow/customizing/

Let me know if that works 👍

Yanis540 commented 11 months ago

Hello , i tried as you suggested running the build for android , but got an error :

env: load .env env: export GOOGLE_WEB_CLIENT_ID GOOGLE_SECRET › Building app... Configuration on demand is an incubating feature. FAILURE: Build failed with an exception. * Where: Settings file '....\android\settings.gradle' line: 3 * What went wrong: A problem occurred evaluating settings 'frontend'. > Could not read script '....\node_modules\expo\scripts\autolinking.gradle' as it does not exist. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 1s Error: ....\android\gradlew.bat exited with non-zero code: 1 Error: ....\android\gradlew.bat exited with non-zero code: 1 at ChildProcess.completionListener (....\node_modules\@expo\spawn-async\build\spawnAsync.js:52:23) at Object.onceWrapper (node:events:628:26) at ChildProcess.emit (node:events:513:28) at cp.emit (....\node_modules\cross-spawn\lib\enoent.js:34:29) at maybeClose (node:internal/child_process:1091:16) at ChildProcess._handle.onexit (node:internal/child_process:302:5) ... at Object.spawnAsync [as default] (....\node_modules\@expo\spawn-async\build\spawnAsync.js:17:21) at spawnGradleAsync (....\node_modules\@expo\cli\build\src\start\platforms\android\gradle.js:72:46) at Object.assembleAsync (....\node_modules\@expo\cli\build\src\start\platforms\android\gradle.js:52:18) at runAndroidAsync (....\node_modules\@expo\cli\build\src\run\android\runAndroidAsync.js:35:24) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

the problem is i checked the folder in node modules and the autolinking.gradle was there (see below)

<img src="https://github.com/react-native-google-signin/google-signin/assets/88095727/5b554151-a4f8-4a37-86a8-0daf6ab48480" />

Just for info, when i use prebuild 

npx expo prebuild

it creates the .android folder normally but the error i mentionned (with google sign in ) is still there.

I know the gradle error is related to expo, but i searched for it there's nothing working tbh .. Thank you !

tony-hsu-lb commented 11 months ago

Still has this issue , any solution update ? thanks!

BarraR3port commented 11 months ago

Hi, I have this same error too, are there going to be any kind of updates about this?

paullam328 commented 11 months ago

Same error lingering for a week, new to mobile development as well. Is Google Authentication incompatible with Expo? Is it easier if I eject and use React Native cli instead to get my app working with Google Authentication? Considering packages such as expo-google-auth are deprecated.

vonovak commented 11 months ago

Hello and thanks for asking, so far, no one was able to provide a runnable reproduction (code or reproduction steps) of the issue. Unfortunately, I cannot debug your problems from comments or screenshots.

An example of issue I can help with is here https://github.com/vonovak/react-native-theme-control/issues/15

Thank you 🙂

paullam328 commented 11 months ago

Steps to Reproduce: (using: expo ~49.0.7, react 18.2.0, react-native 0.72.3, @react-native-google-signin/google-signin ^10.0.1)

  1. npx create-expo-app your-app (Create basic expo go app without template and just App.js)
  2. cd your-app && code .
  3. Create Auth.js: 
    
import React, { createContext, useState } from 'react'
import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';

const AuthContext = createContext({}); GoogleSignin.configure();

export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(false);

const signInWithGoogle = async () => { try { await GoogleSignin.hasPlayServices(); const user = await GoogleSignin.signIn(); setUser(user); } catch (error) { if (error.code === statusCodes.SIGN_IN_CANCELLED) { // user cancelled the login flow setLoading(false); } else if (error.code === statusCodes.IN_PROGRESS) { // operation (e.g. sign in) is in progress already setLoading(true); } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { // play services not available or outdated setLoading(false); } else { // some other error happened setLoading(false); } } } return ( <AuthContext.Provider value={{ user, signInWithGoogle, loading, }}> {children} </AuthContext.Provider> ) }

export default useAuth = () => useContext(AuthContext);

4. In App.js:

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import { AuthProvider } from './Auth.js';

export default function App() { return (

Open up App.js to start working on your app!

); }

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


5. npx expo start
6. i (iphone emulator)
Yanis540 commented 11 months ago

Steps to reproduce :

1- Installations:

1.1- Basic installs 

npx expo install @react-native-google-signin/google-signin
npm install --save @react-native-firebase/app
npm i @react-native-firebase/auth
npx expo install expo-dev-client 
eas build:configure

eas.json

 "build": {
    "development": {
      "android":{
        "buildType": "apk"
      }
    },
    "preview": {
      "android":{
        "buildType": "apk"
      }
    },
    "production": {
      "android":{
        "buildType": "apk"
      }
    }
  },

1.2- Run : 

eas build 
eas credentials # Got the SHA-1 certificat from here

After that in configured the project in firebase and put the SHA-1 for android, and activated the google auth

app.json : 

 "expo":{
     "android":{
         "googleServicesFile": "./google-services.json"
     },
     ...
     "plugins": [
       "@react-native-firebase/app", 
       "@react-native-google-signin/google-signin"
     ],
 }
eas build # generating the build to put on Android Studio emulator 
npx expo start --dev-client

2- Code:

2.1- App.tsx

import 'expo-dev-client'
import { StyleSheet, Text, View , StatusBar } from 'react-native';
import { registerRootComponent } from 'expo';
import Navigator from './src/routes/Navigator';
import { ToastProvider } from 'react-native-toast-notifications'
import google from './src/lib/google';
import {useEffect} from "react"
export default function App() {
  useEffect(()=>{
    google.config()
  },[])
  return (
  <ToastProvider>
    <Navigator />
  </ToastProvider>
  );
}

2.2- ..../lib/google.ts

import { GoogleSignin,GoogleSigninButton,statusCodes, } from '@react-native-google-signin/google-signin';
export const config = () =>GoogleSignin.configure({
  offlineAccess: true, 
  scopes:["email","profile"], 
  webClientId:"WEB CLIENT D" ,
});

const google = {
  config, 
}

export default google ;

Thank you 🙂

vonovak commented 10 months ago

hello everyone, @paullam328 thanks for providing repro steps. You need to launch your app with the commands mentioned here https://docs.expo.dev/workflow/customizing/#generate-native-projects-with-prebuild (documented in the readme at https://github.com/react-native-google-signin/google-signin#expo-installation)

@Yanis540 I wasn't able to reproduce the issue from the information you provided. If you're stuck, feel free to reach out to me and I can fix your problem, as a paid service.

thank you!

IvanRodriCalleja commented 10 months ago

I had the same issue as described and following this:

Hello, sdk 48/49 should make no difference. please try deleting your android and ios folders in the project. Then run the

npx expo run:android

Or

npx expo run:ios

Commands as described in https://docs.expo.dev/workflow/customizing/

Let me know if that works 👍

And then running a new eas dev build with: eas build --profile development --platform android and reinstalling the app in the device or emulator worked for me.

isnolan commented 10 months ago

Is there any latest progress or solution to this problem?

vonovak commented 10 months ago

hello, no, there is no progress. If there was any, it would be posted here.

I believe the solution is given in https://github.com/react-native-google-signin/google-signin/issues/1191#issuecomment-1677136018

If that doesn't help, a runnable reproduction is needed.

Thank you

isnolan commented 10 months ago

Yes, after prebuild, it finally runs normally, thank you