Error: WebBrowser is already open, only one can be open at a time

user_756566 0
Viewed 705

I am trying to use Expo Auth Session in a React Native/RNW app. It works great on iOS and web, however when trying to use it on Android, I get the following error message in my adb logs:

05-15 07:47:57.370 18423 18556 E ReactNativeJS: 'Unhandled promise rejection', { [Error: WebBrowser is already open, only one can be open at a time]
05-15 07:47:57.370 18423 18556 E ReactNativeJS:   line: 231503,
05-15 07:47:57.370 18423 18556 E ReactNativeJS:   column: 28,
05-15 07:47:57.370 18423 18556 E ReactNativeJS:   sourceURL: 'http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false' }

The error is happening when I click on this component (and also a very similar Facebook-based component):

const GoogleAuthBtn = (props) => {
  let [request, response, onButtonPress] = Google.useAuthRequest(googleAuth);

  useEffect(() => {
    if (response && typeof props.onAuthenticate === "function") {
      props.onAuthenticate(response, "Google");
    }
  }, [response]);

  return (
    <AuthButton
      styles={[MainStyles.loginButton]}
      icon={<SocialIcon light raised={false} type="google" />}
      onPress={onButtonPress}
      buttonText={"Sign In with Google"}
    />
  );
};

I assume it must be relating to this call: Google.useAuthRequest(googleAuth) as I have tried to put code into the useEffect function, and it does not trigger.

my googleAuth variable looks like this (keys obviously redacted):

export const googleAuth = {
  responseType: Platform.OS === "web" ? ResponseType.Token : ResponseType.Code,
  webClientId: "<redacted>",
  expoClientId: "<redacted>",
  iosClientId: "<redacted>",
  androidClientId: "<redacted>",
  iosStandaloneAppClientId: "<redacted>",
  androidStandaloneAppClientId: "<redacted>",
  androidsecret: "<redacted>",
};

I am not seeing what could cause multiple Expo Browser windows being open at once.

Could it be a conflicting library? This isn't in any sort of webview or anything, and there's only a few very sparse areas I use webviews in the app.

This is in an Expo Bare Workflow React Native app

expo react-native oauth android javascript
1 Answers

This was actually due to my call in

It was this:

const AuthButton = (props) => {
  return (
    <TouchableOpacity self={this} onPress={props.onPress}>
      <HoverButton style={LoginButtonStyles}>
        {props.icon}
        <Text style={MainStyles.loginText}>{props.buttonText}</Text>
        <View></View>
      </HoverButton>
    </TouchableOpacity>
  );
};

But this line:

<TouchableOpacity self={this} onPress={props.onPress}>

Should instead be this:

<TouchableOpacity self={this} onPress={() => props.onPress()}>
user_7565660
Related