// src/auth/authService.js

import auth0 from 'auth0-js';
import EventEmitter from 'events';
import authConfig from '../../auth_config.json';

const webAuth = new auth0.WebAuth({
  domain: authConfig.domain,
  redirectUri: `${window.location.origin}/callback`,
  clientID: authConfig.clientId,
  responseType: 'id_token',
  scope: 'openid profile email'
});

class AuthService extends EventEmitter {

  // Starts the user login flow
  login(customState) {
    webAuth.authorize({
      appState: customState
    });
  }

}

export default new AuthService();

{
  "domain": "YOUR_TENANT",
  "clientId": "YOUR_CLIENT_ID"
}

// src/auth/authService.js

// Other imports and WebAuth declaration..

const localStorageKey = 'loggedIn';
const loginEvent = 'loginEvent';

class AuthService extends EventEmitter {
  idToken = null;
  profile = null;
  tokenExpiry = null;

  // Starts the user login flow
  login(customState) {
    webAuth.authorize({
      appState: customState
    });
  }

  // Handles the callback request from Auth0
  handleAuthentication() {
    return new Promise((resolve, reject) => {
      webAuth.parseHash((err, authResult) => {
        if (err) {
          reject(err);
        } else {
          this.localLogin(authResult);
          resolve(authResult.idToken);
        }
      });
    });
  }

  localLogin(authResult) {
    this.idToken = authResult.idToken;
    this.profile = authResult.idTokenPayload;

    // Convert the JWT expiry time from seconds to milliseconds
    this.tokenExpiry = new Date(this.profile.exp * 1000);

    localStorage.setItem(localStorageKey, 'true');

    this.emit(loginEvent, {
      loggedIn: true,
      profile: authResult.idTokenPayload,
      state: authResult.appState || {}
    });
  }

  renewTokens() {
    return new Promise((resolve, reject) => {
      if (localStorage.getItem(localStorageKey) !== "true") {
        return reject("Not logged in");
      }
      
      webAuth.checkSession({}, (err, authResult) => {
        if (err) {
          reject(err);
        } else {
          this.localLogin(authResult);
          resolve(authResult);
        }
      });
    });
  }

  logOut() {
    localStorage.removeItem(localStorageKey);

    this.idToken = null;
    this.tokenExpiry = null;
    this.profile = null;

    webAuth.logout({
      returnTo: window.location.origin
    });

    this.emit(loginEvent, { loggedIn: false });
  }

  isAuthenticated() {
    return (
      Date.now() < this.tokenExpiry &&
      localStorage.getItem(localStorageKey) === 'true'
    );
  }
}

export default new AuthService();

// src/plugins/auth.js

import authService from '../auth/authService';

export default {
  install(Vue) {
    Vue.prototype.$auth = authService;

    Vue.mixin({
      created() {
        if (this.handleLoginEvent) {
          authService.addListener('loginEvent', this.handleLoginEvent);
        }
      },

      destroyed() {
        if (this.handleLoginEvent) {
          authService.removeListener('loginEvent', this.handleLoginEvent);
        }
      }
    });
  }
};

// src/main.js

import Vue from "vue";
import App from "./App.vue";

// Import the plugin here
import AuthPlugin from "./plugins/auth";

// Install the authentication plugin here
Vue.use(AuthPlugin);

Vue.config.productionTip = false;

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

npm install vue-router

<!-- src/components/Callback.vue -->

<template>
  <div>
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleLoginEvent(data) {
      this.$router.push(data.state.target || "/");
    }
  },
  created() {
    this.$auth.handleAuthentication();
  }
};
</script>

// src/router.js

import Vue from 'vue';
import Router from 'vue-router';
import Callback from './components/Callback';

Vue.use(Router);

const routes = [
  {
    path: '/callback',
    name: 'callback',
    component: Callback
  }
];

const router = new Router({
  mode: 'history',
  routes
});

export default router;

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import AuthPlugin from './plugins/auth';

// NEW - import the router
import router from './router';

Vue.use(AuthPlugin);

Vue.config.productionTip = false;

new Vue({
  router,   // NEW - register the routes with the application
  render: h => h(App)
}).$mount('#app');

<!-- src/views/Profile.vue -->

<template>
  <div v-if="profile">
    <div>
      <div>
        <img :src="profile.picture">
      </div>
      <div>
        <h2>{{ profile.name }}</h2>
        <p>{{ profile.email }}</p>
      </div>
    </div>

    <div>
      <pre>{{ JSON.stringify(profile, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      profile: this.$auth.profile
    };
  },
  methods: {
    handleLoginEvent(data) {
      this.profile = data.profile;
    }
  }
};
</script>

// src/router.js

//.. other imports
import Profile from "./views/Profile.vue";

const routes = [
  {
    path: '/callback',
    name: 'callback',
    component: Callback
  },

  // NEW - add the route to the /profile component
  {
    path: "/profile",
    name: "profile",
    component: Profile
  }
];

// Unchanged code
const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

// src/App.vue

//... other navigation code

<li>
  <router-link to="/">Home</router-link>
</li>
<li v-if="!isAuthenticated">
  <a href="#" @click.prevent="login">Login</a>
</li>

<!-- new link to /profile - only show if authenticated -->
<li v-if="isAuthenticated">
  <router-link to="/profile">Profile</router-link>
</li>
<!-- /profile -->

<li cv-if="isAuthenticated">
  <a href="#" @click.prevent="logout">Log out</a>
</li>

// src/router.js

// .. other imports
import auth from "./auth/authService";

// .. routes list

// Existing router declaration
const router = new Router({
  mode: 'history',
  routes
});

// NEW - add a `beforeEach` handler to each route
router.beforeEach((to, from, next) => {
  if (to.path === "/" || to.path === "/callback" || auth.isAuthenticated()) {
    return next();
  }

  // Specify the current path as the customState parameter, meaning it
  // will be returned to the application after auth
  auth.login({ target: to.path });
});

// Existing export
export default router;