CODEWITHSUNDEEP
callbackvue.jslocal-storagevuejs2auth0
mrks
mrks

Reputation: 5631

Vue.js 2 and auth0 authentication resulting with 'nonce'

I am trying to implement auth0 in my Vue.js 2 application.

I followed this link to implement the auth0 lock: https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login

This is my application in Login.vue:

HTML:

<div v-show="authenticated">
    <button @click="logout()">Logout</button>
</div>
<div v-show="!authenticated">
    <button @click="login()">Login</button>
</div>

Javascript:

  function checkAuth() {
    return !!localStorage.getItem('id_token');
  }

  export default {
    name: 'login',
    data() {
      return {
        localStorage,
        authenticated: false,
        secretThing: '',
        lock: new Auth0Lock('clientId', 'domain')
      }
    },
    events: {
      'logout': function() {
        this.logout();
      }
    },
    mounted() {
      console.log('mounted');
      var self = this;
      Vue.nextTick(function() {
        self.authenticated = checkAuth();
        self.lock.on('authenticated', (authResult) => {
          console.log(authResult);
          console.log('authenticated');
          localStorage.setItem('id_token', authResult.idToken);
          self.lock.getProfile(authResult.idToken, (error, profile) => {
            if (error) {
              console.log(error);
              return;
            } else {
              console.log('no error');
            }
            localStorage.setItem('profile', JSON.stringify(profile));
            self.authenticated = true;
          });
        });
        self.lock.on('authorization_error', (error) => {
          console.log(error);
        });
    });
    },
    methods: {
      login() {
        this.lock.show();
      },
      logout() {
        localStorage.removeItem('id_token');
        localStorage.removeItem('profile');
        this.authenticated = false;
      }
    }
  }

I am pretty sure that it already worked, but suddenly it doesnt work anymore.

My callbacks defined in auth0: http://127.0.0.1:8080/#/backend/login That is also how I open the login in my browser.

When I login it I only get this in my localStorage:

Key: com.auth0.auth.14BK0_jsJtUZMxjiy~3HBYNg27H4Xyp

Value: {"nonce":"eKGLcD14uEduBS-3MUIQdupDrRWLkKuv"}

I also get redirected to http://127.0.0.1:8080/#/ so I do not see any network requests.

Does someone know where the problem is? I ran the demo from auth0 with my Domain/Client and it worked without any problem.

Obviously I do not get any errors back in my console.

Upvotes: 3

Views: 1048

Answers (1)

mrks
mrks

Reputation: 5631

Atfer research I finally found the answer to my problem.

The reason, why it is not working is because my vue-router does not use the HTML5 History Mode (http://router.vuejs.org/en/essentials/history-mode.html).

To have it working without the history mode, I had to disable the redirect in my lock options and to disable auto parsing the hash:

lock: new Auth0Lock(
    'clientId', 
    'domain', { 
         auth: { 
             autoParseHash: false, 
             redirect: false 
         }
    }
)

Reference: https://github.com/auth0/lock

Upvotes: 2

Related Questions