Undefined auth0 variables after routing in Vue

Question

I am trying to add Auth0 to a colleagues Vue app while he's on holiday but I am struggling with creating a reusable navbar.

I followed a tutorial to get most of it setup: https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication

My main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'
import Vuex from 'vuex'
import store from './Store'
import 'vue-awesome/icons'
import icon from 'vue-awesome/components/Icon'
import auth from './auth/auth'
import meta from 'vue-meta'

Vue.config.devtools = true;
Vue.config.productionTip = false;
Vue.config.errorHandler = function(err, vm, info) {
    console.log("error: " + err);
    console.log("error info: " + info);
};
Vue.use(BootstrapVue);
Vue.use(Vuex);
Vue.use(auth);
Vue.use(meta)

Vue.component('icon', icon);

new Vue({
    router,
    store: store,
    render: h => h(App)
}).$mount('#app');

My App.vue:

<template>
    <b-container>
        <div id="app">
            <navbar/>
            <router-view/>
        </div>
    </b-container>
</template>

<script>
import WidgetBuilder from './components/WidgetBuilder/WidgetBuilder'
import Navbar from './components/NavBar.vue'

export default {
    name: 'app',
    components: {
        Navbar: Navbar,
        WidgetBuilder: WidgetBuilder
    }
}
</script>

My Navbar:

<template>
  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="/home">
      <img src="https://a.storyblok.com/f/39898/1024x1024/dea4e1b62d/vue-js_logo-svg.png" width="40" height="40">
    </a>
    <div>
      <img :src="$auth.user.picture" width="30" height="30">
      <span class="text-muted font-weight-light px-2">{{$auth.name}}</span>
      <button type="button" class="btn btn-outline-secondary btn-sm" @click="$auth.logout()">Logout</button>
    </div>
  </nav>
</template>

<script>
  export default {
      name: "navbar",
      mounted() {
          console.log(this.$router.params.auth)
      },
  }
</script>

My Callback:

<template>
  <div class="callback"></div>
</template>

<script>
    export default {
        name: 'callback',
        metaInfo: {
            title: 'Callback',
        },
        mounted() {
            // eslint-disable-next-line
            this.$auth.handleAuthentication().then((data) => {
                this.$router.push({ name: 'index' })
            })
        }
    }
</script>

The problem is, after loggin and redirection my navbar cannot access the $auth object.

console:

error: TypeError: Cannot read property 'picture' of null

main.js?1c90:18 error info: render

main.js?1c90:17 error: TypeError: Cannot read property 'name' of null

main.js?1c90:18 error info: render

If i visit /home directly it works fine.

I'm not a really a JS dev and this ES6 stuff might as well be in Arabic, any of you vue experts out there point me in the right direction?

I've tried passing variables from the component like this:

<template>
    <b-container>
        <div id="app">
            <navbar :auth="$auth"/>
            <router-view/>
        </div>
    </b-container>
</template>

I've tried importing the service into my Navbar component (although that grates me)

I've tried different redirects, re-authenticating, re-mouting it in the navbar component with mounted() and data().

Im sure its something simple but im tearing my hair out, because as i said it totally alien to me at the moment.

MikeLi · Accepted Answer · 2018-07-01 07:36:02Z

I also followed the tutorial and had the same issue.

Since the navbar component is in my App.vue and not in my home component I found that the toolbar was being rendered before the response from auth0 was being set to localStorage (hence why a refresh on second load worked). Moving the navbar component inside the home component fixed the issue, but this was not ideal for me.

I used the event bus approach as recommended by a similar stack overflow question -

Re-render navigation bar after login on vuejs

auth.js

   user: {
  get: function() {
    return JSON.parse(localStorage.getItem('user'))
  },
  set: function(user) {
    localStorage.setItem('user', JSON.stringify(user))
    this.$bus.$emit('logged', 'User logged')
  }
}

navbar.vue

data() {
  user: this.getUser() 
}
created () { 
    this.$bus.$on('logged', () => { 
        this.user = this.getUser() 
    }) 
}, 
methods: {   
getUser: function () { 
  var user = JSON.parse(localStorage.getItem('user')); 
  if (user === null) { 
    return '' 
  } else { 
    return user 
  } 
}

},

Not the cleanest solution but it worked for me.

Rafael Guillen · Accepted Answer · 2018-06-05 20:14:11Z

0

The object this.$auth is provided by a custom plugin from Auth0, in the guide you can read how to install and use it:

https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication#setup-auth0--vuejs-auth-plugin

answered Jun 5, 2018 at 20:14

Rafael Guillen

1,69312 silver badges25 bronze badges

3 Comments

Edward Over a year ago

dude... i don't mean to ungrateful or anything but "I followed a tutorial to get most of it setup: storyblok.com/tp/how-to-auth0-vuejs-authentication" the problem is i followed that tutorial and i have this problem

Rafael Guillen Over a year ago

Then you missed some steps, maybe installing the plugin to your vue instance: import auth from '@/auth' Vue.use(auth) in the main.js file.

Edward Over a year ago

I don't think so, it seems to work great when logged in, its just the initial callback redirect im having trouble with.. anyway i have updated my question with my current main.js

Collectives™ on Stack Overflow

Undefined auth0 variables after routing in Vue

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related