Android - OAuth login impossible
Description:
When you try to login with OAuth via webview (so the bug does not affect Google login) and hit the page where below there was another oauth button, it redirects to that login and again and again every time you hit somewhere where below there is a oauth login button. The real problem arises when a username/password/textfield from the oauth webview page overlaps a oauth login button making it impossible to login since it will always redirect to somewhere else.
Environment Information:
- Rocket.Chat Server Version:
- Rocket.Chat App Version: 4.42.0
- Device Name: Samsung S20 FE/Motorola G9 Play/others
- OS Version: Android 11/13
Steps to reproduce:
- Tested on open.rocket.chat
- Try to login with github and once on github login page
- Hit/Click the page where google login was before
Expected behavior:
Nothing
Actual behavior:
The browser opens as we had clicked the googe oauth login button Continue with Google
Additional context:
The issue only happens on Android devices. Basically it looks like the webview propagates the click event below on the ServiceList view and whenever it hits a login button it execeutes its openOAuth() function.
Hey , have set up the app locally and was able to reproduce the issue. While going through the code, I came about this part. I am confused as to why openOauth fn has not been used in case of login with google
Also , one fix would be to simply maintain state of visitation and make sure the fn doesn't execute depending on state. I tried setting pointer events to none in the web view however that didnt work.. any help would be appreciated
Thanks
hi @aenonGit, I noticed, this issue is only when app is running in debug mode. when debug is disabled it is working fine. also working fine when used with reactotron. is this same for you?
@aenonGit Does this error still happen to you?
I'v been seen same behviour with another oauth provider. I used many keycloak realms. Fixed patching app/containers/LoginServices/ButtonService.tsx
-import { Text, View } from 'react-native';
+import { Text, View, Button } from 'react-native';
- <Touch
+ <Button
key={name}
+ title={name}
onPress={onPress}
style={[styles.serviceButton, { backgroundColor }]}
activeOpacity={0.5}
underlayColor={colors.buttonText}
>
- <View style={styles.serviceButtonContainer}>
- {authType === 'oauth' || authType === 'apple' ? (
- <CustomIcon name={icon} size={24} color={colors.titleText} style={styles.serviceIcon} />
- ) : null}
<Text style={[styles.serviceText, { color: colors.titleText }]}>{buttonText}</Text>
- </View>
- </Touch>
+ </Button>
i.e. replace Touch component to Button. Looks uglier, but works fine
I tested on several different servers, I even configured the oauth issue manually. I was unable to reproduce the error, if anyone has any more information please share, but at the moment I consider the task as closed.