Expo web: RN GoogleSignin native module is not correctly linked

[fernandasecinaro]

Hello,

Thanks for this awesome library! I have installed it and it works great for Android and iOS!

Now I'm trying to compile my Expo router web app but i'm getting the error:

RN GoogleSignin native module is not correctly linked.

I have added the following code:

layout.tsx:

GoogleSignin.configure({ offlineAccess: false, iosClientId: 'XXXX-XXXX.apps.googleusercontent.com', webClientId: 'XXXX-XXXX.apps.googleusercontent.com', });

app.json:

"ios": { ..., "infoPlist": { "CFBundleURLTypes": [ { "CFBundleURLSchemes": [ "com.googleusercontent.apps......" ] } ] } },

I also tried to add the following code in the "+html.tsx" file:

<script src="https://accounts.google.com/gsi/client" async></script>

Expected Behavior

I want to get my web app compiled, whether with or without the google sign in feature. Of course I would prefer to have this feature on my web app too, but it's not required.

I know that the documentation mentions "Web support is only available to sponsors️.", but I don't get if the error i'm getting is due to i'm not a sponsor yet or if I've overlooked something in the setup. I mean, should I become a sponsor to successfully compile my app, or is there a workaround to resolve this issue, even if it means opting out of the web feature?"

Actual Behavior

Web throws error RN GoogleSignin native module is not correctly linked.

Environment

• Expo SDK 50
• react-native version: 0.73.4
• @react-native-google-signin/google-signin version: 11.0.1

[ladyshaitan]

I'm experiencing this exact same issue with the same dependencies. Did you figure this out OP?

Like here in this guide: https://react-native-google-signin.github.io/docs/one-tap#web-support

This functionality is only available to sponsors️. It takes just a few clicks to get access ❤️.

What is "this"? Web? Is that why it's crashing? I'm all for seizing your opportunity for income, but pretty irritated if this is causing my web app to crash.

[sudowoodo200]

This blog helped: https://hackernoon.com/google-sign-in-and-expo-go-a-guide-to-help-you-fix-any-issues-that-arise
Don't think it's a sponsorship issue, at least now

@vonovak, if you need proper sponsorship, I might be able to help. This is an important library that should be supported by a corporate partner. Will be sad if you have to gate critical features for it

[ladyshaitan]

I figured this out! This was not very clear to me upfront. Web is incompatible with (at least the free version of) react-native-google-signin/google-signin because it's a "react native" package for mobile. Those of us who are using true react-native in a mono-repo to support mobile and web will get a crasher.

How to fix:

1. Locate all references to '@react-native-google-signin/google-signin' and make a list of the functions used in your code
2. Start going down the list and making platform specific files / functions for web. You can use react native's platform specific file extensions to make a file for mobile and a file for web.

Example, please note that this works for me because of my specific setup where I can assume that google signin will always be an option in web.

isGooglePlayAvailableAsync.ts

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

export default async () => GoogleSignin.hasPlayServices();

isGooglePlayAvailableAsync.web.ts

export default async () => true;

4. In your code import the file: import isGooglePlayAvailableAsync from './isGooglePlayAvailableAsync' and use this to replace all instances of GoogleSignin.hasPlayServices

Example:

import isGooglePlayAvailableAsync from './isGooglePlayAvailableAsync'

const Button = () => 
    <TouchableOpacity onPress={() 
        => isGooglePlayAvailableAsync().then(() => {
          // do something
        })}>
    </TouchableOpacity>

5. This works because the native code can't actually be compiled properly for web, so even if you're not invoking a method, your app will crash if the native package is imported into a file that is used at runtime.

[vonovak]

Hello and thanks for asking,
The reason you're getting this issue is that you're importing the package on the web. Importing on the web, even if not directly calling the package, leads to the error.

The free package was made to work on Android and iOS. The package was always native-first and web support was never considered. This is, to my knowledge, the first issue that reports this problem in this way.

I agree that a hard-crash is not the right behavior and I will implement a change that will log a warning, but won't crash. However, I'm vacationing now and I'll get to it at the end of May.

@sudowoodo200 I'll be very happy if you can find a partner that would be willing to support the maintenance. You can reach out to me to discuss this using the contact information listed in my profile.

Thank you 🙂