Google Login React Native payload Error 403

Help
,
1

Testing environmet: React Native v0.72.7 and iOS simulator running on MacOS

Greetings! I keep getting the error 403 when trying to log in using the Google Social connection. I’ve already set up the Google API for the correct audience value, and gave to the Google API M2M app all the permissions so that permissions wouldn’t be a problem anymore. Also when I ‘Try Connection’ from Auth0, it says that the connection is working succesfully.

I have properly made the Apple Login and the Username-Password-Authentication within my project, and the only issue is with the Google Login. I have also set up correctly everything on the Google Cloud Console, where I got my GOOGLE CLIENT WEB ID and my GOOGLE CLIENT IOS ID.

I already wrapped my App component inside the Auth0Provider tag.

Here’s the useEffect I use to link my IDs from the Google Cloud Console:

  useEffect(() => {
    GoogleSignin.configure({
      webClientId: GOOGLE_CLIENT_WEB_ID,
      iosClientId: GOOGLE_CLIENT_IOS_ID,
      offlineAccess: true,
    });
  }, []);

And this is the function I apply to try make the connection:

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

  const signInWithGoogle = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      console.log('User Info: ', userInfo);
      const { idToken, user } = userInfo;
      const payload = {
        grant_type: 'authorization_code',
        id_token: idToken,
        code: userInfo.serverAuthCode, // Include authorization code in the payload
        audience: auth0GoogleAudience,
        client_id: auth0GoogleClient,
        scope: 'openid profile email',
        connection: 'google-oauth2',
        redirect_uri: redirectUri,
      };

      console.log("payload: ", payload);
      // Make request to Auth0
      const auth0Response = await axios.post(
        `https://${auth0Domain}/oauth/token`,
        payload,
      );
      } catch (e) {
      console.log(e);
      console.error('Auth0 Error Response:', e.response.data);
      }
};

After clicking the button that calls that function, the Account selector from Google pops up, and after I click on a Google Account, this is what shows up in my terminal:

 LOG  User Info:  {"idToken": "eyJh***", "scopes": ["openid", "https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile"], "serverAuthCode": "4/0Ae***", "user": {"email": "m***@***.com", "familyName": "M***", "givenName": "M***", "id": "116***", "name": "M***", "photo": "https://lh3.googleusercontent.com/a/ACg8***"}}
 LOG  payload:  {"audience": "https://a***", "client_id": "Rr***", "code": "4/0Ae***", "connection": "google-oauth2", "grant_type": "authorization_code", "id_token": "eyJh***", "redirect_uri": "com.***://dev-z***.us.auth0.com/ios/com.***/login/callback", "scope": "openid profile email"}
 LOG  [AxiosError: Request failed with status code 403]
 ERROR  Auth0 Error Response: {"error": "invalid_grant", "error_description": "Invalid authorization code"}

Note: the symbols ‘***’ represent the characters that go on inside those values, being a random string on letters in cases like the idToken, and sensitive tenant information in cases like the redirect_uri.

Considering this, I’d really appreciate the help on making the correct POST request to Auth0, to show on my user management dashboard the users that have logged into my mobile app using Google.