Nativescript Vue - async operations in main.js before rendering

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!

Vallemar · Accepted Answer · 2021-05-21 17:00:58Z

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

Komi · Accepted Answer · 2021-05-22 10:16:32Z

0

//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()
    }
});

answered May 22, 2021 at 10:16

Komi

4765 silver badges16 bronze badges

1 Comment

marco Over a year ago

Hi, if i try to move the Vue initializiation function in other points (inside of a function for example, as you do in your example), i receive the error at startup:

System.err: An uncaught Exception occurred on "main" thread. System.err: Unable to start activity ComponentInfo{org.nativescript.costhly/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed System.err: Error: Main entry is missing. App cannot be started. Verify app bootstrap.

Collectives™ on Stack Overflow

Nativescript Vue - async operations in main.js before rendering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related