React Native iOS App: Resolving Google OAuth 2.0 Error 400 Due to Redirect URI

It looks like the issue is because the redirect URI used during your Expo development (in this case, something like:

exp://192.168.0.26:8081

) isn’t registered in your OAuth client settings on the Google Cloud Console. Even if you’ve configured your bundle identifier and iOS URL scheme in your app.json, Google will reject the authentication request if the redirect URI isn’t one of the approved URIs.

Steps to Resolve

1. Add the Development Redirect URI to Your Google Cloud Console

   • Go to your Google Cloud Console Credentials page.
   • Find your OAuth client for iOS (or create a new one if needed).
   • In the Authorized redirect URIs (or similar) setting, add the exact URI that appears in your error message (for example, exp://192.168.0.26:8081).

2. Check Your Expo Auth-Session Setup

   If you’re using Expo’s expo-auth-session or a similar library to handle OAuth, consider using the helper method:

   JSCopied
   import * as AuthSession from 'expo-auth-session';
   
   const redirectUri = AuthSession.makeRedirectUri({
     useProxy: true, // or false if you handle the URI differently
   });
   // Make sure the resulting redirect URI is also added in the Google Cloud Console.

   This method ensures your redirect URI is generated in a way that Google expects.

3. Double-Check Your app.json Configuration

   Even though the redirect URI is mainly controlled in the OAuth client on Google Cloud, confirm that your app.json has the correct values for the iOS URL scheme:

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

4. Remember the Difference Between Development and Production

   When you eventually build a production version of your app, the redirect URI will change (it won’t be something like exp://192.168.0.26:8081). Make sure you update your OAuth client settings with the production redirect URI accordingly.

By ensuring that the exact redirect URI used during the OAuth flow is approved in your Google Cloud Console, you should be able to resolve the "Error 400: invalid_request" issue.