Estoy creando un Login con Google en mi aplicación de Expo (React-Native), el inicio de sesión funciona perfecto, pero el cierre de sesión en lugar de llevarme de nuevo a la página del login, me redirige directamente a la página de selección de cuenta nuevamente, y a mi parecer todo lo tengo configurado de forma correcta, no se si el problema está en el componente LoadingScreen que les mostraré adelante, o en alguno de los otros, agradecería cualquier ayuda.
LoadingScreen (Que sirve como el intermediario entre el componente Login y Menu:
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
ActivityIndicator,
} from "react-native";
import { getAuth, onAuthStateChanged } from 'firebase/auth';
class LoadingScreen extends Component {
componentDidMount() {
this.checkIfLoggedIn();
}
checkIfLoggedIn = () => {
onAuthStateChanged(getAuth(), function (user) {
if (user) {
this.props.navigation.navigate('MenuScreen');
} else {
this.props.navigation.navigate('LoginScreen');
}
}.bind(this)
);
};
render() {
return (
<View style={styles.container}>
<ActivityIndicator size="large" color="black" />
</View>
);
}
}
export default LoadingScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
LoginScreen (que es el componente donde se encuentra el login)
import ExpoStatusBar from "expo-status-bar/build/ExpoStatusBar";
import React, { Component } from "react";
import { View, Text, StyleSheet, Dimensions, Button, Image, TouchableHighlight,
ImageBackground, ToastAndroid } from "react-native";
import * as Google from 'expo-google-app-auth';
import { getAuth, onAuthStateChanged, signInWithCredential, GoogleAuthProvider,
setPersistence, inMemoryPersistence } from 'firebase/auth';
import styles from "../Style/LoginScreen.style";
import { showMessage, hideMessage } from "react-native-flash-message";
const image = { uri: "https://reactjs.org/logo-og.png" };
class LoginScreen extends Component {
isUserEqual = (googleUser, firebaseUser) => {
if (firebaseUser) {
const providerData = firebaseUser.providerData;
for (let i = 0; i < providerData.length; i++) {
if (providerData[i].providerId === GoogleAuthProvider.PROVIDER_ID &&
providerData[i].uid === googleUser.user.id) {
// We don't need to reauth the Firebase connection.
return true;
}
}
}
return false;
}
onSignIn = googleUser => {
// We need to register an Observer on Firebase Auth to make sure auth is initialized.
const auth = getAuth();
onAuthStateChanged(auth, (firebaseUser) => {
// Check if we are already signed-in Firebase with the correct user.
if (!this.isUserEqual(googleUser, firebaseUser)) {
// Build Firebase credential with the Google ID token.
const credential = GoogleAuthProvider.credential(
googleUser.idToken,
googleUser.accessToken,
);
setPersistence(auth, inMemoryPersistence).then(() => {
return signInWithCredential(auth, credential)
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
});
} else {
console.log('User already signed-in Firebase.');
}
});
}
singInWithGoogleAsync = async () => {
try {
ToastAndroid.showWithGravity(
"Iniciando sesión",
ToastAndroid.SHORT,
ToastAndroid.CENTER
);
const result = await Google.logInAsync({
androidClientId: '28004125478-
ncijefgaqs2ktlei9378oi2dd1tcf6rt.apps.googleusercontent.com',
//iosClientID: '',
});
if (result.type === 'success') {
this.onSignIn(result);
return result.accessToken;
} else {
return { cancelled: true };
}
} catch (e) {
return { error: true };
}
};
render() {
return (
<ImageBackground source={require('../../images/fondo.jpg')} resizeMode="cover" style=
{styles.image}>
<View>
<View>
<View style={styles.imagecontainer}>
<Image
source={require('../../images/menu.jpg')}
style={styles.sideMenuProfileIcon}
/>
</View>
</View>
<View>
<View style={{ alignItems: 'center' }}>
<TouchableHighlight onPress={() => this.singInWithGoogleAsync()}>
<View style={styles.buttoncontainer}>
<View style={styles.logoconainer}>
<Image
source={require('../../images/LogoG.png')}
style={styles.logoimg} />
</View>
<View style={styles.textcontainter}>
<Text style={styles.text}>Inicia con Google</Text>
</View>
</View>
</TouchableHighlight>
</View>
</View>
</View>
</ImageBackground>
);
}
}
export default LoginScreen;
Menu (Que es el componente donde se encuentra la función Logout que es la que me da el problema mencionado)
import React, { Component } from "react";
import { SafeAreaView, Image, Button, View, Text, TouchableHighlight } from 'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItem,
} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import firebase from 'firebase/compat/app';
import { Feather } from '@expo/vector-icons';
import DashboardScreen from '../../../../screens/DashboardScreen';
import styles from '../Style/menu.style.js';
import { signOut } from '@firebase/auth';
import * as Google from 'expo-google-app-auth';
const Drawer = createDrawerNavigator();
const MenuItems = ({ navigation }) => {
return (
<DrawerContentScrollView>
<Image
source={require('../../images/menu.jpg')}
style={styles.sideMenuProfileIcon}
/>
<TouchableHighlight style={styles.buttonContainer} onPress={() =>
navigation.navigate('DashboardScreen')}>
<Text style={styles.buttonText}>Página Principal</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.buttonContainer} onPress={LogOut}>
<Text style={styles.buttonText}>Cerrar Sesión</Text>
</TouchableHighlight>
</DrawerContentScrollView>
)
}
const LogOut = async () =>{
const config = {
//expoClientId: `<YOUR_WEB_CLIENT_ID>`,
//iosClientId: `<YOUR_IOS_CLIENT_ID>`,
androidClientId: '28004125478-ncijefgaqs2ktlei9378oi2dd1tcf6rt.apps.googleusercontent.com',
//iosStandaloneAppClientId: `<YOUR_IOS_CLIENT_ID>`,
//androidStandaloneAppClientId: `<YOUR_ANDROID_CLIENT_ID>`,
};
const { type, accessToken } = await Google.logInAsync(config);
if (type === 'success') {
/* Log-Out */
await Google.logOutAsync({ accessToken, ...config });
/* `accessToken` is now invalid and cannot be used to get data from the Google API with HTTP
requests */
}
}
function MyDrawer() {
return (
<Drawer.Navigator drawerContent={(props) => <MenuItems {...props} />}
initialRouteName="Dashboard" screenOptions={{
drawerStyle: {
backgroundColor: '#007bff',
width: 240,
},
}}>
<Drawer.Screen name="DashboardScreen" component={DashboardScreen} />
</Drawer.Navigator>
);
}
class MenuScreen extends Component {
render() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
}
export default MenuScreen;