Google.logInAsync function for OAuth not doing anything in React Native - reactjs

Question

Google.logInAsync function which is supposed to used for OAuth in React Native, is not giving any response, or is stuck. Take a look at my code, from line 14 to 36. This signIn function is calling Google.logInAsync and is stuck there. No error, nothing. How ever when I press the button again, and the signIn function gets called again, an error is passed: Error: Cannot start a new task while another task is currently in progress: Get Auth
This is my code currently. It shows a label " Sign In With Google" and a Button on the screen. Tapping on the button starts this.signIn funtion, prints "Started logInAsync" on the debugger screen, but theGoogle.logInAsync never completes, no errors are thrown anywhere. console.log('Completed logInAsync') never gets executed!
import {Google} from "expo"
...
console.log('Starting logInAsync')
const result = await Google.logInAsync({
androidClientId:
"<CLIENT_ID>",
scopes: ["profile", "email"]
})
console.log('Completed logInAsync')
that gave an error saying install "expo-google-app-auth"
I installed that module and then changed the import and the function
import * as Google from "expo-google-app-auth"
...
console.log('Starting logInAsync')
const result = await Google.logInAsync({
...
})
console.log('Completed logInAsync')
And after there,
import { StyleSheet, Text, View, Image, Button } from "react-native"
import * as Google from "expo-google-app-auth"
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
signedIn: false,
name: "",
photoUrl: ""
}
}
signIn = async () => {
try {
console.log('Starting logInAsync')
const result = await Google.logInAsync({
androidClientId:
"860657237026-jfosg5hu52u1vedclccs1vgihghva534.apps.googleusercontent.com",
scopes: ["profile", "email"]
})
console.log('Completed logInAsync')
if (result.type === "success") {
this.setState({
signedIn: true,
name: result.user.name,
photoUrl: result.user.photoUrl
})
} else {
console.log("Cancelled!")
}
} catch (e) {
console.log("Error: ", e)
}
}
render() {
return (
<View style={styles.container}>
{this.state.signedIn ? (
<LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} />
) : (
<LoginPage signIn={this.signIn} />
)}
</View>
)
}
}
const LoginPage = props => {
return (
<View>
<Text style={styles.header}>Sign In With Google</Text>
<Button title="Sign in with Google" onPress={() => props.signIn()} />
</View>
)
}
const LoggedInPage = props => {
return (
<View style={styles.container}>
<Text style={styles.header}>Welcome:{props.name}</Text>
<Image style={styles.image} source={{ uri: props.photoUrl }} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
header: {
fontSize: 25
},
image: {
marginTop: 15,
width: 150,
height: 150,
borderColor: "rgba(0,0,0,0.2)",
borderWidth: 3,
borderRadius: 150
}
})
No error occur in this code, except if you press the SignIn button twice. I am on the latest version of Node, React-Native and Expo as of now.