Firebase 在重新加载 Expo 时注销用户

Question

Firebase 屏幕

import  firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "xxxxx",
    authDomain: "xxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxxxx",
    appId: "xxxxxxxx",
    measurementId: "xxxxxx"
};

let app;

if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig)
} else {
  app = firebase.app();
}


const db = app.firestore();
const auth = firebase.auth();
const api = firebase.app();
const phoneAuth = firebase.auth;

export { db, auth, api, phoneAuth};

应用程序屏幕

//redux
import {Provider} from 'react-redux';
import { createStore, applyMiddleware } from "redux";
import rootReducer from "./redux/reducers";
import thunk from "redux-thunk";
import { auth } from './src/config/firebase';


const store = createStore(rootReducer, applyMiddleware(thunk));

const Stack = createNativeStackNavigator();



export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
    };
  }

   componentDidMount() {
     auth.onAuthStateChanged((user) => {
      console.log(user)<------------------------------------------
      if (!user) {
        this.setState({
          loggedIn: false,
          loaded: true,
        });
      } else {
        this.setState({
          loggedIn: true,
          loaded: true
        });
      }
    });
  }

  

    render() {
      const { loggedIn, loaded } = this.state;

      if (!loaded) {
        return (
          <SafeAreaView>
              <Text>Template</Text>
              <ActivityIndicator  size='large' color='white'/>
          </SafeAreaView>
        );
      }
      if(!loggedIn) {
        return (
          <Provider store={store}>
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen name="Landing" component={LandingScreen}/>
                <Stack.Screen name="Register" component={RegisterScreen}/>
                <Stack.Screen name="SignGuest" component={SignGuestScreen}/>
                <Stack.Screen name="VerifyPhoneNumber" component={VerifyPhoneNumberScreen} />
                <Stack.Screen name="AddressSearchPage" component={AddressSearchPageScreen} />
                <Stack.Screen name="AddressSearch" component={AddressSearchScreen} />
              </Stack.Navigator>
            </NavigationContainer>
          </Provider>
        )
      }
        return (
          <Provider store={store}>
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen name="TabNavigator" component={TabNavigatorScreen} />
                <Stack.Screen name="Account" component={AccountScreen}/>
                <Stack.Screen name="Cart" component={CartScreen}/>
                <Stack.Screen name="RegisterModal" component={RegisterModalScreen} />
                <Stack.Screen name="AddressSearch" component={AddressSearchScreen} />
                <Stack.Screen name="DisplayItem" component={DisplayItemScreen} />
              </Stack.Navigator>
            </NavigationContainer>
        </Provider>
      )}
  }

  export default App;

Firebase 在重新加载 expo 时注销用户。我在 componentDidMount 中放置了一个 console.log 以查看问题，并且在应用程序重新加载后 returns null。

老实说，我不明白问题出在哪里。

我希望用户保持登录状态。我尝试了很多方法并阅读了很多教程，但它似乎不起作用。

Answer 1

要为您的身份验证问题添加解决方法，您可以应用模块化方法，而不是使用 firebase 中的兼容方法。

根据文档，如果您已经在使用 firebase v8 SDK，Compat 是一种临时解决方法。

它应该可以，但我也不知道为什么它不起作用。

为此，我创建了一个演示并使用了 firebase 的模块化方法，它工作正常。

查看文档：Firebase Modular Update documentation

您可以使用 firebase 的模块化方法来实现身份验证功能。

代码。

import React, { useEffect } from "react";
import { View, Button } from 'react-native'
import { initializeApp } from 'firebase/app'
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const App = () => {
  async function logIn() {
    try {
      const loginRes = await signInWithEmailAndPassword(getAuth(), 'user@gmail.com', 'xxxxxx')
      console.log('loginRes : ', loginRes.user?.email)
    } catch ({ message }) {
      console.log('[Error] logIn : ', message)
    }
  }

  useEffect(() => {
    const firebaseConfig = {
      apiKey: "xxxxxx",
      authDomain: "xxxxx",
      projectId: "xxxxxx",
      storageBucket: "xxxxxx",
      messagingSenderId: "xxxxxx",
      appId: "xxxxxx",
      measurementId: "xxxxxx"
    };

    // Initialize Firebase
    initializeApp(firebaseConfig);

    // Adding listener for firebase auth
    const unsubscribe = getAuth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user already loggen in')
      } else {
        console.log('user not logged in')
      }
    });

    return unsubscribe
  }, [])

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Button" onPress={logIn} />
    </View>
  )
}

export default App

Firebase 在重新加载 Expo 时注销用户

Firebase logs out user when reloading Expo

javascript

reactjs

react-native

firebase-authentication

expo