CODEWITHSUNDEEP
firebaseasynchronousvue.jsfirebase-authentication
anoff
anoff

Reputation: 63

Asynchronous new Vue() to wait for initial authentication

I am quite new to Vue and currently setting up an app that uses firebase authentication and firestore for basic RBAC. To prevent unauthorized users from entering routes my router has a custom AuthGuard inspecting the local users roles (The backend implements similar rules)

export default new Router({
  routes: [
    {
      path: '/users',
      name: 'Users',
      component: Users,
      beforeEnter: AuthGuard(user => user.uid && user.roles.admin)
    }
..
]})

One issue I have with this setup is that sending people links to protected pages does not work. The auth guard prevents them from loading the page because the local user is not set initialized when the Vue app initializes.

So I came up with a way to delay the creation of my Vue App by structuring my main.js something along:

import Vue from 'vue'
...
init()
.then(() => new Vue(..)

During the init function I am waiting for firebase.auth().onAuthStateChanged to fire and tell me if the user has a valid token or not. It does work but it does not feel right.

Is it ok to asynchronously create a new Vue App? Are there better methods like lazy loading the authentication guard on the route or something?

Upvotes: 2

Views: 2375

Answers (2)

Frenchcooc
Frenchcooc

Reputation: 1080

I'm doing the same thing as well. Here's a snippet in case someone is interested in a more concrete example:

import Vue from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'

/**
 * Initialize Firebase
 */

firebase.initializeApp(FIREBASE_CONFIG)

/**
 * Initialize Vue.js
 */

let app;

firebase.auth().onAuthStateChanged(user => {
  if (!app) {
    app = new Vue({
      render: h => h(App)
    }).$mount('#dashboard')
  }
})

Upvotes: 1

tim
tim

Reputation: 378

I do the same with Vue and Azure Active Directory authentication, seems to be the best way of doing it.

Please see Miguels answer: https://stackoverflow.com/a/45899653/2703700

Is that the answer you were looking for?

Upvotes: 1

Related Questions