Nativescript Vue - async operations in main.js before rendering - vue.js

Question

i would like to add a login page to my app with Firebase Authentication:
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/master/docs/AUTHENTICATION.md
Following the guide i've added the "onAuthStateChanged" function inside the init firebase.
Now i would like to pass to the render function in the Vue instance creation the correct page, based on the value returned by the Firebase function.
If the user it's authenticated, will be rendered the "home.vue" page, otherwise the "login.vue" page.
The problem it's that the firebase function return the state of the user after the Vue instance creation.
Here my code:
import Vue from 'nativescript-vue'
import store from './store'
import Home from './components/Page/home.vue'
import Login from './components/Page/login.vue'
import VueDevtools from 'nativescript-vue-devtools'
var firebase = require("#nativescript/firebase").firebase;
var pageToRender;
firebase.init({
onAuthStateChanged: function(data) {
if (data.loggedIn) {
pageToRender = Home;
}else{
pageToRender = Login;
}
}
}).then(
function () {
console.log("firebase.init done");
},
function (error) {
console.log("firebase.init error: " + error);
}
);
if(TNS_ENV !== 'production') {
Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
new Vue({
store,
render: h => h('frame', [h(pageToRender)])
}).$start()
I already tried to move all the code inside an async function in order to await the firebase response before the Vue instance creation but i receive the error:
System.err: Error: Main entry is missing. App cannot be started.
Verify app bootstrap.
In this way:
async function start(){
var loggedIn = await firebase_start();
var pageToRender;
if (loggedIn) {
pageToRender = Home;
}else{
pageToRender = Login;
}
if(TNS_ENV !== 'production') {
Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
new Vue({
store,
render: h => h('frame', [h(pageToRender)])
}).$start()
}
Thanks for the help!

Answer 1

I would approach it differently.
When the user logs in, you can save this on the device with the https://github.com/nativescript-community/preferences plugin as follows:
function successLoginUser(){
const prefs = new Preferences();
prefs.setValue("isUserLogin", true);
}
And then when starting the application you can do something like this:
import Vue from 'nativescript-vue'
import store from './store'
import Home from './components/Page/home.vue'
import Login from './components/Page/login.vue'
import VueDevtools from 'nativescript-vue-devtools'
//This
const prefs = new Preferences();
const pageToRender = prefs.getValue("isUserLogin") ? Home: Login ;
if(TNS_ENV !== 'production') {
Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
new Vue({
store,
render: h => h('frame', [h(pageToRender)])
}).$start()
When the user logs out:
const prefs = new Preferences();
prefs.setValue("isUserLogin", false);
I haven't tried it but it should work

Answer 2

//for me here firebase is imported from a diffrent file where i already initialized it.
let app;
firebase.auth().onAuthStateChanged((user, error) => {
//decide which page to render
//also make sure both components you are trying to render are imported
if (!app) {
app = new Vue({
router,
store,
render: (h) => h(PageToRender),
}).$start()
}
});