expo-auth-session with Google login problems in Development build on android

[sikandarchishty]

Summary

hi,
Loggin in with expo-auth-session works absolutely fine in Expo Go App but as soon as .apk is built, the login workflow opens the signin page and then closes after the login is complete but the response vanishes and does not do anything, but this happens only in .apk but works fine in Expo Go App.

Managed or bare workflow? If you have made manual changes inside of the ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

Package versions

"expo-auth-session": "~3.6.1",

Environment

System:
OS: macOS 12.4
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.1 - /usr/local/bin/node
npm: 8.11.0 - /usr/local/bin/npm
Watchman: HEAD-317a5eb - /opt/homebrew/bin/watchman
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
IDEs:
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
npmPackages:
expo: ~45.0.0 => 45.0.6
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
react-native: 0.68.2 => 0.68.2
react-native-web: 0.17.7 => 0.17.7
npmGlobalPackages:
eas-cli: 0.54.1
expo-cli: 5.5.1
Expo Workflow: managed

Reproducible demo

const config = {
  expoClientId: "some value",
  iosClientId: "some value",
  androidClientId: "some value",
};

const [user, setUser] = useState(null);

const [request, response, googlePromptLogin] = Google.useAuthRequest(config);

const SignInWithGoogle = async () => {
  googlePromptLogin().then(async (response) => {
    if (response.type === "success") {
      const credential = GoogleAuthProvider.credential(
        null,
        response.authentication.accessToken
      );
      await signInWithCredential(auth, credential);
    }
  });
  return Promise.reject();
};

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      setUser(user);
    } else {
      setUser(null);
    }
  });
}),
  [];

Stacktrace (if a crash is involved)

No response

[esamelson]

Hi @sikandarchishty - I believe that for now, unfortunately, to use auth-session in a development build you need to write your code as if in the bare workflow, making the redirectUri yourself (using the native option), which you should then be able to pass into useAuthRequest.

We could definitely do a better job of documenting this! If you're able to confirm this works for you then I will go ahead and update our docs to reflect this.

[duggster]

Hi @esamelson - I am also having this issue. I got the authentication to work in Expo Go using the makeRedirectUri() like you said, but when I tried the native option in the dev client I am getting an error on the Google sign in page. I'm getting the same behavior with both iOS and Android, and I am on SDK 46.

Error 400: invalid_request

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy for keeping apps secure. 

redirect_uri: myapp://

Here's my relevant code excerpt:

import * as Google from 'expo-auth-session/providers/google';
import * as AuthSession from 'expo-auth-session';
import Constants from 'expo-constants';

const EXPO_REDIRECT_PARAMS = { useProxy: true, projectNameForProxy: '@username/myapp' };
const NATIVE_REDIRECT_PARAMS = { native: "myapp://" };
const REDIRECT_PARAMS = Constants.appOwnership === 'expo' ? EXPO_REDIRECT_PARAMS : NATIVE_REDIRECT_PARAMS;
const redirectUri = AuthSession.makeRedirectUri(REDIRECT_PARAMS);

const GoogleSignInComponent = () => {

  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: 'xxx',
    iosClientId: 'yyy',
    androidClientId: 'zzz',
    scopes: [
      'https://www.googleapis.com/auth/calendar.events',
      'https://www.googleapis.com/auth/calendar.readonly'
    ],
    redirectUri
  });

  useEffect(() => {
    console.log("Google Sign In Response:", response);
  }, [response]);

  const loginAsync = () => {
    promptAsync(REDIRECT_PARAMS);
  }

  return (
    <View>
      <TouchableOpacity onPress={loginAsync}>
        <Image source={IMG_GOOGLE_SIGN_IN} style={{ height: 46, width: 191 }} />
      </TouchableOpacity>
      <Text>{redirectUri}</Text>
    </View>
  );
}

and my app.json has a scheme in it as follows:

{
  "expo": {
    "name": "My App",
    "slug": "myapp",
    "privacy": "public",
    "platforms": [
      "ios",
      "android"
    ],
    "jsEngine": "hermes",
    "version": "1.0.0",
    "scheme": "myapp",
...
}
}
 

[esamelson]

Hi @duggster -- I believe you'll need to follow the instructions here for setting up Google auth for iOS / Android native apps, including the piece where the scheme must match your app's bundle identifier. (Everywhere it says "bare workflow" in that doc applies to development builds as well.) Let me know if that helps.

[duggster]

I should mention I'm in managed workflow as well, and I already had my OAuth Client IDs set up and working fine with Expo Go, dev clients and in production on SDK 45 (and the Google Client's Bundle ID already matches my app.json ios.bundleIdentifier, as well as the Google Client's Package name matches my app.json android.package). This issue just started happening after I recently upgraded to SDK 46 and started testing everything.

I went through the steps again from the instructions, however when I get to the command
npx uri-scheme add <your bundle id> --ios
I get the error that "iOS project not found in directory", which makes sense since this is a managed project (and I do not want to go to bare project as my main development computer is Windows).

Are there any other files/config that would help for me to post?

[duggster]

So the Google login does indeed work when I changed my app.json scheme to match my bundle identifier: "com.myapp.myapp", and then in the code for the native parameter as well:

const NATIVE_REDIRECT_PARAMS = { native: "com.myapp.myapp://" };
const REDIRECT_PARAMS = Constants.appOwnership === 'expo' ? EXPO_REDIRECT_PARAMS : NATIVE_REDIRECT_PARAMS;
const redirectUri = AuthSession.makeRedirectUri(REDIRECT_PARAMS);
...

And run another dev-client build, and it's able to authenticate successfully.
Yay!
So now the only problem is I already have a website out in production that uses my old scheme "myapp://" to launch the app, and that link won't work with the new scheme "com.myapp.myapp". Is there a way to add more than one scheme in managed workflow?

[lrodden]

@sikandarchishty I'm experiencing the same issue on android. Did you ever find a work around. Also @esamelson - i tried utilizing your recommendation:

to use auth-session in a development build you need to write your code as if in the bare workflow, making the redirectUri yourself (using the native option), which you should then be able to pass into useAuthRequest.

My implementation:

environment: development build (testing internally on google play store)

  const redirectUri = makeRedirectUri({
    useProxy: USE_PROXY==='false' ? false : true,
    scheme: 'swade',
    path: '/auth'
  });

  const googleConfigs = {
    androidClientId: GOOGLE_ANDROID_ID,
    iosClientId: GOOGLE_IOS_ID,
    expoClientId: GOOGLE_PROXY_ID,
  }

  const [request, response, promptAsync] = Google.useAuthRequest(
    googleConfigs, 
    redirectUri
  );

  useEffect(async () => {
    if (response?.type === "success") {
      await getUserData(response.authentication.accessToken);
    }
  }, [response]);

And the results are still the same - maybe I'm missing something? Still no errors or crashes.

[raphaelobinna]

@sikandarchishty I'm experiencing the same issue on android. Did you ever find a work around. Also @esamelson - i tried utilizing your recommendation:

to use auth-session in a development build you need to write your code as if in the bare workflow, making the redirectUri yourself (using the native option), which you should then be able to pass into useAuthRequest.

My implementation:

environment: development build (testing internally on google play store)

  const redirectUri = makeRedirectUri({
    useProxy: USE_PROXY==='false' ? false : true,
    scheme: 'swade',
    path: '/auth'
  });

  const googleConfigs = {
    androidClientId: GOOGLE_ANDROID_ID,
    iosClientId: GOOGLE_IOS_ID,
    expoClientId: GOOGLE_PROXY_ID,
  }

  const [request, response, promptAsync] = Google.useAuthRequest(
    googleConfigs, 
    redirectUri
  );

  useEffect(async () => {
    if (response?.type === "success") {
      await getUserData(response.authentication.accessToken);
    }
  }, [response]);

And the results are still the same - maybe I'm missing something? Still no errors or crashes.

Did you find a solution to this ?
On my end , I get response type as success but my authentication object is null.

[lrodden]

@raphaelobinna I was able to get it working in production but not in dev (i.e. does not work in expo-go app). This was my full implementation:

WebBrowser.maybeCompleteAuthSession();
const EXPO_REDIRECT_PARAMS = { useProxy: true, projectNameForProxy: '@swade-io/swade' };
const NATIVE_REDIRECT_PARAMS = { native: "com.swade.swade://" };
const REDIRECT_PARAMS = Constants.appOwnership === 'expo' ? EXPO_REDIRECT_PARAMS : NATIVE_REDIRECT_PARAMS;
const redirectUri = AuthSession.makeRedirectUri(REDIRECT_PARAMS);



function GoogleButton(props) {


  const googleAuthUrl = `${API_URL}/v1/auths/google`

  const [next, setNext] = useState(null)
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();



  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: GOOGLE_PROXY_ID,
    iosClientId: GOOGLE_IOS_ID,
    androidClientId: GOOGLE_ANDROID_ID,
    redirectUri
  });


  const removeNext = async () => {
    await AsyncStorage.removeItem('@next')
    return
  }

  useEffect(() => {
    if (response?.type === "success") {
      getUserData(response.authentication.accessToken);
    }
  }, [response]);


  useEffect(() => {
    if (props?.next){
      setNext(props.next)
    }
    return
  }, [props?.next])
 


  const getUserData = async (token) => {

    setLoading(true)
    props.callBack(true)
    await axios.post(googleAuthUrl, {'token': token})
      .then((r) => {

        // save data in store
        var person = r.data
        store.dispatch(
          authSlice.actions.setAuthTokens({
            access: person.user.access,
            refresh: person.user.refresh,
          })
        );
        store.dispatch(
          authSlice.actions.setAccount(person.user.user)
        );
        store.dispatch(
          authSlice.actions.setUserAccount(person.customer)
        )
        
        // decide where to navigate user
        if (person.auth_type === 'login'){
          if (person.customer.active){
              removeNext()
              setLoading(false)
              props.callBack(false)
              navigate(`${next ? next : '/'}`);
          }else{
              setLoading(false)
              props.callBack(false)
              navigate('/phone')
          }
        }else{
            props.callBack(false)
            setLoading(false)
            navigate('/phone')
        }


      })
      .catch((e) => {
        console.log(e)
        props.callBack(false)
        setLoading(false)
      })
    
  }



  const authGoogle = async () => {
    await promptAsync(REDIRECT_PARAMS)
  }



  return (

      <View className='flex flex-row justify-center w-full my-4' >
        <Pressable 
          className={`w-[80%] h-12 rounded-xl ${loading ? 'bg-slate-300/50' : 'bg-white'} pt-4 flex-0 flex-row justify-center`} 
          disabled={loading}
          onPress={authGoogle}
          shadowColor='gray'
          style={{ 
              borderRadius: 35, 
              shadowColor: '#000',
              shadowOffset: { width: 0, height: 1 },
              shadowOpacity: 0.2,
              shadowRadius: 2,  
              elevation: 5
          }}
        >   

          <View className='w-[80%] flex flex-row justify-evenly'>
            <Image 
              source={google_logo} 
              style={{ 
                  width: 20, 
                  height: 20,
                  
              }}
            />
            <Text className='text-md font-semibold text-slate-800 text-center my-auto'>
              Continue With Google
            </Text>
          </View>

        </Pressable>

      </View>

  );
}

[imhilla]

Facing this issue after migrating from 45 to 47 expo sdk.

[raphaelobinna]

Facing this issue after migrating from 45 to 47 expo sdk.

same, mine was from 45 to 46

[imhilla]

Quick question for the scheme did you use "com.app.app://"

[raphaelobinna]

Quick question for the scheme did you use "com.app.app://"

Yeah without the ://

[imhilla]

Am able to make it work on dev wasn't passing REDIRECT_PARAMS when pressing the button promptAsync(REDIRECT_PARAMS);

[imhilla]

Might create an example and link it here for anyone to save them time especially if they are migrating to 47. For me the error was Error: Cannot use the AuthSession proxy because the project full name is not defined. Prefer AuthRequest (with the useProxy option set to false) in combination with an Expo Development Client build of your application. To continue using the AuthSession proxy, specify the project full name (@owner/slug) using the projectNameForProxy option.

[romjear12]

I am having the same error after migrating 45 to 46 version.

[didar-dev]

same , sdk 47.0.0

[mahmoud16h]

I'm having a similar Issue on SDK 47.0.0 - The app works fine on Expo Go, but as soon as I build and run on testflight, or run with the folllowing command expo start --no-dev --minify the app crashes:

• schemes match bundle ID
• all steps followed in setup

Code is here:

const EXPO_REDIRECT_PARAMS = { useProxy: true, projectNameForProxy: USERNAME/SLUG };
 const NATIVE_REDIRECT_PARAMS = { native: 'com.foo.bar://' };
 const REDIRECT_PARAMS = Constants.appOwnership === 'expo' ? EXPO_REDIRECT_PARAMS : 
 NATIVE_REDIRECT_PARAMS;
 const redirectUri = AuthSession.makeRedirectUri(REDIRECT_PARAMS);

  function GoogleSignin({ onSuccessCallback }) {
  const dispatch = useDispatch();
  const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
    expoClientId: EXPO_ID,
    iosClientId: IOS_ID,
    redirectUri,
  });

  const fetchGoogleUser = async (idToken) => {
    try {
      const res = await dispatch(googleThunk({ idToken })).unwrap();
      onSuccessCallback(res.data);
    } catch (e) {
      console.error('error fetching google user', e);
    }
  };

  useEffect(() => {
    if (response?.type === 'success') {
      const { params } = response;
      fetchGoogleUser(params.id_token);
    }
  }, [response, request]);

  return (
    <TouchableOpacity onPress={() => promptAsync()}>
      <Image source={GooglePic} style={{ height: 50, width: 50 }} />
    </TouchableOpacity>
  );
}

export default GoogleSignin;

[hammadsohail]

**### Hi, I'm having the same issue, App works Fine on Expo Go, but as I switch to Development, it won't work.

it's only giving a prompt, and returning to the main screen, but not returning any object.**

` const [accessToken, setAccessToken] = useState();
const [userInfo, setUserInfo] = useState();
const [auth, setAuth] = useState();
const [requireRefresh, setRequireRefresh] = useState(false);

const [request, response, promptAsync] = Google.useAuthRequest({
androidClientId:
"xyz",
iosClientId:
"zyx",
expoClientId:
"xyz",
});

useEffect(() => {
if (response?.type === "success") {
setAccessToken(response.authentication);

  const persistAuth = async () => {
    await AsyncStorage.setItem(
      "auth",
      JSON.stringify(response.authentication)
    );
  };
  persistAuth();
}

}, [response]);

useEffect(() => {
const getPersistedAuth = async () => {
const jsonValue = await AsyncStorage.getItem("auth");
if (jsonValue != null) {
const authFromJson = JSON.parse(jsonValue);
setAuth(authFromJson);

    let userInfoResponse = await fetch(
      "https://www.googleapis.com/userinfo/v2/me",
      {
        headers: { Authorization: `Bearer ${authFromJson.accessToken}` },
      }
    );

    userInfoResponse.json().then((data) => {
      setUserInfo(data);
    });

    setRequireRefresh(
      !AuthSession.TokenResponse.isTokenFresh({
        expiresIn: authFromJson.expiresIn,
        issuedAt: authFromJson.issuedAt,
      })
    );
  }
};
getPersistedAuth();

}, [response]);

const logout = async () => {
await AuthSession.revokeAsync(
{
token: auth.accessToken,
},
{
revocationEndpoint: "https://oauth2.googleapis.com/revoke",
}
);

setAuth(undefined);
setUserInfo(undefined);
await AsyncStorage.removeItem("auth");

};`

[avantassel]

Yeah this worked great before but hey lets replace it with some other shit that doesn't work at all, thanks...

[sort72]

Please fix this!!!!111

[graphen007]

Facing same issue

[cothientai]

I had the same issue. Works in the Expo Go app, but not on my android .apk.
What I found out was that it did not get the access token after the prompt where it did do that in the Expo Go app.

What fixed it for me was forcing to exchange the access token (also be sure to add the schemes and such https://docs.expo.dev/versions/latest/sdk/auth-session/#usage-in-standalone-apps):

import Constants, { ExecutionEnvironment } from "expo-constants";

const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
    expoClientId: GOOGLE_PROXY_ID,
    iosClientId: GOOGLE_IOS_ID,
    androidClientId: GOOGLE_ANDROID_ID,
    // ADD THIS TO FORCE THE AUTO EXCHANGE CODE TO GET THE ACCESS TOKEN ONLY WHEN NOT USING THE EXPO GO APP
    shouldAutoExchangeCode:
      Constants.executionEnvironment !== ExecutionEnvironment.StoreClient
        ? true
        : undefined,
  });

useEffect(() => {
    if (response?.type === "success") {
      const { id_token } = response.params;
      console.log(response);
    }
  }, [response]);

I verified this with Expo v47 and v48 and using auth package ("expo-auth-session": "~4.0.3",).

Hopes this helps!

[preyeopudu]

any update with this ? this is 2023 and i cant find a solution

[mtegi]

Encountering this in v3.7.4 and expo 46. It works properly on all platforms except android release apk build where it doesn't return any response after logging in via prompt.

Seems like many others are also experiencing this bug.
https://stackoverflow.com/questions/73136119/expo-auth-session-cannot-complete-google-login-on-android-standalone-app
https://stackoverflow.com/questions/73022300/expo-auth-session-with-google-login-problems-in-development-build-on-android
https://stackoverflow.com/questions/75743681/google-authentication-in-expo-managed-app-fails-in-production-build

[imarc7]

Same issue with expo 48 on android only. It works on iOS but on android there's no redirect to the app after logging in

[mtegi]

Same issue with expo 48 on android only. It works on iOS but on android there's no redirect to the app after logging in

@imarc7 that means your setup is incorrect. Your android schema name has to match package name which you then use in redirect uri. So basically:

package name: com.example
android:scheme: com.example
redirect uri: com.example:///oauthredirect

[Kittinutz]

Do have any change ??
I found android 400 redirect_uri_invalid in SDK 48 follow document.

[raphacbs]

Hey guys! Do we have anything new? I'm using SDK 48 and getting the error: "Access blocked: This app's request is invalid. Error: 400: redirect_uri_mismatch" This error only occurs when I generate the build (apk) through Expo Go and the Web works.

My code:

`/* eslint-disable prettier/prettier */
import React, { useEffect, useState } from "react";
import { StyleSheet, View, Text, Image, Button } from "react-native";
import * as Google from "expo-auth-session/providers/google";
import * as AuthSession from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";
import { getUserData } from "../services/authGoogle";
import GoogleButton from "../components/GoogleButton";
import Constants, { ExecutionEnvironment } from "expo-constants";

WebBrowser.maybeCompleteAuthSession();
const EXPO_REDIRECT_PARAMS = {
useProxy: true,
projectNameForProxy: "@raphacbs/faz-feira",
};
const NATIVE_REDIRECT_PARAMS = { native: "com.raphacbs.fazfeiraapp://" };
const REDIRECT_PARAMS =
Constants.appOwnership === "expo"
? EXPO_REDIRECT_PARAMS
: NATIVE_REDIRECT_PARAMS;

const AuthScreen = () => {
const [accessToken, setAccessToken] = useState();
const [userInfo, setUserInfo] = useState();
const redirectUri = AuthSession.makeRedirectUri(REDIRECT_PARAMS);

const [request, response, promptAsync] = Google.useAuthRequest({
androidClientId:
"xxxx",
iosClientId:
"xxxx",
expoClientId:
"xxxx",
webClientId:
"xxx",
redirectUri,
shouldAutoExchangeCode:
Constants.executionEnvironment !== ExecutionEnvironment.StoreClient
? true
: undefined,
});

const handleUserInfo = async () => {
if (accessToken == undefined || accessToken == null) {
await promptAsync(REDIRECT_PARAMS);
}
};

useEffect(() => {
console.log("response", response);
async function getUser() {
if (response?.type == "success" && response.authentication) {
setAccessToken(response.authentication.accessToken);
let userInfo = await getUserData(response.authentication.accessToken);
console.log(userInfo);
setUserInfo(userInfo);
}
}
getUser();
}, [response]);

function showUserInfo() {
if (userInfo) {
return (

<Image source={{ uri: userInfo.picture }} style={styles.profilePic} />
Welcome {userInfo.name}
{userInfo.email}

);
}
}

return (

{showUserInfo()}
{!accessToken && (
<GoogleButton onPress={handleUserInfo} title={"Login com o Google"} />
)}

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
userInfo: {
alignItems: "center",
justifyContent: "center",
},
profilePic: {
width: 50,
height: 50,
},
});

`

[SavageWilliam]

Do have any change ?? I found android 400 redirect_uri_invalid in SDK 48 follow document.

I'm also facing this issue:

    "expo": "^47.0.0",
    "expo-auth-session": "~3.8.0",
     "expo-web-browser": "~12.0.0",
       "expo-application": "~5.0.1",

Have followed the setup:

Create a [androidClientId](https://docs.expo.dev/versions/latest/sdk/auth-session#googleauthrequestconfig--properties) by following the steps below from the Google Cloud console:

In the Google Cloud console, go to Credentials > Create OAuth client page.
For Application type, select Android from the dropdown menu.
For Name, enter the name such as Android Client ID to identify different client IDs in case you have more than one for multiple platforms.
Under Package name, enter the package name of your app. This is the same package name you have set up in the app config file under [android.package](https://docs.expo.dev/versions/latest/config/app#package) field, for example, com.example.myapp.
Under SHA-1 certificate fingerprint, you'll need to add the signing certificate value. To get this value:
In the terminal window, run eas credentials -p android, then select the build profile. For example, if you are generating the credential for development, select the build profile for it.
Select Keystore: Manage everything needed to build your project > Set up a new keystore > select the default value for Assign a name to your build credentials > press Y to Generate a new Android Keystore.
This will generate a new keystore and print the SHA-1 certificate fingerprint. Copy the value of SHA1 Fingerprint and paste it into the Google Cloud console.
Click Save.

[amandeepmittal]

We've deprecated Google auth provider from expo-auth-session starting SDK 49. We recommend using a native library such as @react-native-google-signin/google-signin. We don't maintain the native library. However, we did write a short guide on what steps might be required to configure an Expo project: https://docs.expo.dev/guides/google-authentication/. The same library can also be used with previous SDK versions.

[nicolae536]

@amandeepmittal the library seems to have issues on react-native-web. I find it quite weird to suggest an experimental library which the owner states that he will not fix bugs :(

[NataliiaRybalka]

Try to change "expo-auth-session" version to "^4.0.3". And code:
import * as AuthSession from 'expo-auth-session';

const signin = async () => {
const redirectUri = AuthSession.getRedirectUrl();
const response = await AuthSession.startAsync({
authUrl:
https://accounts.google.com/o/oauth2/auth?client_id=${EXPO_CLIENT_ID}&redirect_uri=${redirectUri}&response_type=token&scope=openid%20profile%20email
});
};

It works for me.