How do I perform an onAuthStateChanged in Vue Native?

Question

I want to perform something equivalent to this:

export default class LoadingScreen extends React.Component {
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.props.navigation.navigate(user ? 'App' : 'Auth');
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Loading</Text>
        <ActivityIndicator size='large'></ActivityIndicator>
      </View>
    );
  }
}

I have setup my routes to go through the Loading to check the user's auth state before proceeding to either Auth or App. When I add mounted(), the loading text and activity-indicator don't show.

 <template>
      <view class="container">
        <nb-text>Loading</nb-text>
        <activity-indicator size="large" color="#0000ff" />
      </view>
    </template>
    
    <script>
    import firebase from "firebase";
    import Fire from "./../../api/firebaseAPI";
    
    export default {
      // Declare `navigation` as a prop
      props: {
        navigation: {
          type: Object,
        },
      },
      async mounted() {
        await firebase.auth().onAuthStateChanged(function (user) {
            this.navigation.navigate(user ? "App" : "Auth");
        });
      },
    };
    </script>

When I run this code above I get a white screen.

Answer 1

Maybe we should move the code in mounted to a method.

<script>
mounted(){
this.checkAuth()
},
...
methods:{
async checkAuth(){
await firebase.auth().onAuthStateChanged(function (user) {
          if(user){
this.navigation.navigate("Auth")
}else{

this.navigation.navigate("App")
}
        });
}

}
</script>