Auth0 Home Blog Docs

Need to refresh the page after login to new the page into login status

auth0
login

#1

import auth0 from ‘auth0-js’
import Vue from ‘vue’

let webAuth = new auth0.WebAuth({
    domain: 'cs3900.au.auth0.com',
    clientID: 'CyF2yOxLafjmlJ75djXxCdeslXo2LU9N',
// make sure port is 8080
    redirectUri: 'http://localhost:8080/callback',



  audience: 'http://djangovuejs.digituz.com.br',
   responseType: 'token id_token',
 scope: 'openid profile'})

let auth = new Vue({
 computed: {
token: {
  get: function() {
    return localStorage.getItem('id_token')
  },
  set: function(id_token) {
    localStorage.setItem('id_token', id_token)
  }
},
accessToken: {
  get: function() {
    return localStorage.getItem('access_token')
  },
  set: function(accessToken) {
    localStorage.setItem('access_token', accessToken)
  }
},
expiresAt: {
  get: function() {
    return localStorage.getItem('expires_at')
  },
  set: function(expiresIn) {
    let expiresAt = JSON.stringify(expiresIn * 1000 + new Date().getTime())
    localStorage.setItem('expires_at', expiresAt)
  }
},
user: {
  get: function() {
    return JSON.parse(localStorage.getItem('user'))
  },
  set: function(user) {
    localStorage.setItem('user', JSON.stringify(user))
  }
} },
  methods: {
login() {
  webAuth.authorize()
},
logout() {
  localStorage.removeItem('access_token')
  localStorage.removeItem('id_token')
  localStorage.removeItem('expires_at')
  webAuth.logout()
},
isAuthenticated() {
  return new Date().getTime() < this.expiresAt
},
handleAuthentication() {
  return new Promise((resolve, reject) => {
    webAuth.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.expiresAt = authResult.expiresIn
        this.accessToken = authResult.accessToken
        this.token = authResult.idToken
        this.user = authResult.idTokenPayload
        resolve()

      } else if (err) {
        this.logout()
        reject(err)
      }
    })
  })
}

export default {
install: function(Vue) {
Vue.prototype.$auth = auth
}
}

callback.vue
template
div class=“callback”></div
/template

script
export default {
name: ‘callback’,
mounted() {
this.$auth.handleAuthentication().then((data) => {
this.$router.push({ name: ‘home’ })
})
}
}