Expo, Supabase Google-Sign-In DEVELOPER_ERROR. NOT using Firebase

Question

I'm trying to get google oauth to work using Expo and Supabase, but I keep getting the below error ONLY when trying to sign in on Android. I am not using Firebase. I do not receive this error on web or iOS:

  {
    "nativeStackAndroid": [],
    "userInfo": null,
    "message": "DEVELOPER_ERROR",
    "code": "10"
  }

in a file called GoogleSignInButton.native.tsx, i have this

export default function GoogleButton(props: any) {
  GoogleSignin.configure({
    scopes: [],
    webClientId: WEB_CLIENT_ID,
    iosClientId: IOS_CLIENT_ID,
    offlineAccess: true,
    forceCodeForRefreshToken: true,
  });
  
  ...
}

I believe the android sign in was working a few weeks/months ago, but I hadn't tested it in a while during development and I can't track where it went wrong.

What's also weird is that when I sign in on iOS, the sign in shows a different app name in comparison to the android sign in (images below). Movies is for ios (succeeds) and capybaratest is android (fails) - I'm re-using an older google oauth credential, movies, that I created for an app I was building before.

Here is my package.json file

{
  "name": "...",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@gorhom/bottom-sheet": "^4.6.1",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-google-signin/google-signin": "^11.0.1",
    "@react-native-picker/picker": "2.6.1",
    "@react-navigation/native": "^6.1.17",
    "@shopify/restyle": "^2.4.2",
    "@supabase/supabase-js": "^2.42.0",
    "expo": "~50.0.14",
    "expo-font": "~11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.6",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-pager-view": "6.2.3",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.4",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

app.json

{
  "expo": {
    "name": "capybaratest",
    "slug": "capybaratest",
    "scheme": "com.name.capybaratest",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.name.capybaratest",
      "infoPlist": {
        "CFBundleURLTypes": [
          {
            "CFBundleURLSchemes": [
              "com.googleusercontent.apps.141673689420-cstuimdc24iel5o76me2vlint42gj66r"
            ]
          }
        ]
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.name.capybaratest"
    },
    "web": {
      "bundler": "metro",
      "favicon": "./assets/images/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "6e859fa6-d9e9-4511-b4d8-7f37398500b0"
      }
    },
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["./assets/fonts/OpenSans-Regular.ttf"]
        }
      ]
    ],
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

I've tried creating a fresh expo install, trial and error with Supabase and other configs, and read through a ton of discussions. I've tried many solutions but nothing's changed

Answer 1

I was able to finally resolve this from help from this thread: https://github.com/react-native-google-signin/google-signin/issues/1192

The problem was that the SHA-1 certificate fingerprint configured in the google console was incorrect for some reason. I believe the console instructs users to use this command, keytool -keystore path-to-debug-or-production-keystore -list -v, to generate the SHA-1 certificate

Instead, what users need to do (after doing all the initial credential creation) is to use the SHA-1 from your local computer.

Excerpt from the github thread that I linked:

Find out your SHA-1 signing key for your development/production apk. If you've built using EAS, get your sha-1 by running eas credentials, then selecting android > com.yourbuild.app.dev. Put that SHA-1 Key, and the appropriate package-name in your Android OAuth credential in Google API console.

1. Navigate to your local project in the command line (where your package.json file is located)
2. In the command line, type in eas credentials
3. Select Android in the options that pop up
4. For the question Which build profile do you want to configure?, I selected development-simulator
5. Copy the SHA1 Fingerprint property that gets written
6. Paste it into the google credentials console for your Android config for the SHA-1
7. Wait until it finishes updating (there's no indication for this, but the page says it could take 5 minutes+)
8. Retry the google sign-in and pray it works