vue-auth0-handler

vue-auth0-handler

Handles login/logout and authentication callback from Auth0's lock screen in Vue2

Quick Start

Requirements

You need your Auth0 configuration from http://auth0.com

Installation

    > npm i vue-auth0-handler

Configuration

// define the configuration:
const authConfig = {
  clientId: '[your-auth0-ID]',
  domain: '[your-auth0-domain].auth0.com',
  callbackUris: {
    'development': 'http://development.your-application-url.com',
    'production': 'http://your-application-url.com'
  }
}

// initiate as a Vue plugin:
Vue.use(hAuth, {configuration : authConfig});

Add to your App.vue:

Inside <template> tag:    

    <h-callback />

Inside <script> tag:    

    import hCallback from "vue-auth0-handler/Callback.vue";
    export default {
        ...
        components: {
            hCallback
        }
    }

$hAuth api methods

login()

    // redirects to Auth0's login page
    this.$hAuth.login();

logout()

    // clears any authentication information 
    this.$hAuth.logout();

isAuthenticated()

    // returns a Boolean
    this.$hAuth.isAuthenticated()

getToken()

    // returns JWT token
    this.$hAuth.getToken();

getUserProfile()

    this.$hAuth.getUserProfile();
    // returns the User's info in JSON with the following format:
    let returnsFormat = {
           email: '',
           name: '',
           nickname: '',
           pictureUrl: '',
           idAuth0: '',
           updatedAt: '',
           lastName: '',
           firstName: ''
      }

Options

Once a successful login happens, you can have your hCallback component to perform a redirection OR to fire an event.

Redirecting:

    let redirectPath = 'some/vue/router-path/1';
    // url will be called by the hCallback component
    this.$hAuth.login(redirectPath); 

Firing an event:

    // firing an event:
    <h-callback loginEventName="logged_in" v-on:logged_in="testLoginEvent"></h-callback>