Cannot log in for some users in Auth0 SPA using VueJS - vue.js

Question

I have an access_denied error that occurs only for some users in my web app when they try to login user username/password.
Using the auth0-js 9.3.3 plugin for a VueJS 2.0 SPA using the authorization extension.
I get the following response in the logs window in Auth0. How can I debug these kind of errors and see what's the cause?
This results in the access_token and id_token being empty.
{
"date": "2018-06-03T11:15:15.478Z",
"type": "f",
"description": "Unexpected token { in JSON at position 19",
"connection": null,
"connection_id": "",
"client_id": "1ySh5N0sOXxMkcAslnuhRfxO5BloY56t",
"client_name": "IRIS",
"ip": "80.57.245.139",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36",
"details": {
"body": {
"wa": "wsignin1.0",
"wresult": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1c2VyX2lkIjoiNWFlODM0ZTc5MjA4YjgwNThhNGEyMDFkIiwiZW1haWwiOiJtYXJnZXJ0aG8xQGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJsYXN0X3Bhc3N3b3JkX3Jlc2V0IjoiMjAxOC0wNS0xMlQxNDo1Njo0My4xNzFaIiwic2lkIjoiVVZQSThRWG9RdHRlNzg4c2c0Yy14VHZqNnFRRHdQVHMiLCJpYXQiOjE1MjgwMjQ1MTMsImV4cCI6MTUyODAyNDU3MywiYXVkIjoidXJuOmF1dGgwOjUwMXN0OlVzZXJuYW1lLVBhc3N3b3JkLUF1dGhlbnRpY2F0aW9uIiwiaXNzIjoidXJuOmF1dGgwIn0.lnK7k568DtWiUUEQEqn1PIOAQGeGQ6kg2Y6cwZUyl655ae-9dA-uM4oijD3ByDwVBL8aqFxxAAZmdPOr8pSpehTgsI7WTYrZee1sT2i80zG2IaKb-0Ue8Yx_7aGNMzhXVZHdkdY13EL5gzNeV52IVlhQLmUtDL9C4LZqApjN7wk",
"wctx": "{\"strategy\":\"auth0\",\"auth0Client\":\"eyJuYW1lIjoibG9jay5qcyIsInZlcnNpb24iOiIxMC4xOC4wIiwibGliX3ZlcnNpb24iOiI4LjcuMCJ9\",\"tenant\":\"501st\",\"connection\":\"Username-Password-Authentication\",\"client_id\":\"1ySh5N0sOXxMkcAslnuhRfxO5BloY56t\",\"response_type\":\"token id_token\",\"scope\":\"openid profile email groups permissions roles\",\"protocol\":\"oauth2\",\"redirect_uri\":\"http://localhost:8080/callback\",\"state\":\"s31LeZ-DQZLfAX10cTZ4AcoP9E7-nl-w\",\"nonce\":\"0j2CVd8Aogz2sgh8MaetsgEEq-uKo0sN\",\"sid\":\"UVPI8QXoQtte788sg4c-xTvj6qQDwPTs\",\"audience\":\"https://iris.501st.nl\",\"realm\":\"Username-Password-Authentication\",\"session_user\":\"5b13cdc121652a131b057eb4\"}"
},
"qs": {},
"connection": null,
"error": {
"message": "Unexpected token { in JSON at position 19",
"oauthError": "access_denied",
"type": "oauth-authorization"
}
},
"hostname": "XXXX.eu.auth0.com",
"user_id": "auth0|5ae834e79208b8058a4a201d",
"user_name": "XXXXX#gmail.com",
"log_id": "90020180603111515478182853610644826347557693433397116978"
}
This is the code I use for the authentication:
import decode from 'jwt-decode'
import auth0 from 'auth0-js'
import Router from 'vue-router'
const ID_TOKEN_KEY = 'id_token'
const ACCESS_TOKEN_KEY = 'access_token'
const CLIENT_ID = process.env.VUE_APP_AUTH0_CLIENT_ID
const CLIENT_DOMAIN = process.env.VUE_APP_AUTH0_CLIENT_DOMAIN
const SCOPE = 'openid profile email groups permissions roles'
const AUDIENCE = process.env.VUE_APP_AUTH0_AUDIENCE
const auth = new auth0.WebAuth({
clientID: CLIENT_ID,
domain: CLIENT_DOMAIN
})
export function login () {
auth.authorize({
responseType: 'token id_token',
redirectUri: process.env.VUE_APP_AUTH0_REDIRECT,
audience: AUDIENCE,
scope: SCOPE
})
}
export function getProfile () {
const accessToken = localStorage.getItem('access_token')
if (!accessToken) {
console.log('Access token must exist to fetch profile')
}
if (accessToken) {
return new Promise((resolve, reject) => {
auth.client.userInfo(accessToken, function (err, profileData) {
if (err) {
if (err.stack) {
console.log(err.stack)
} else {
console.log(err)
}
}
if (!profileData) {
console.log('Logging out because cannot get profile data!')
logout()
reject(Error('Cannot get profile data'))
return false
}
if (profileData && !profileData.email_verified) {
alert('Je hebt een e-mail grekegen om je e-mailadres te valideren. Zodra je e-mail is gevalideerd kan je opnieuw inloggen.')
logout()
reject(Error('Email not verified'))
} else if (profileData['https://iris.501st.nl/app_metadata'].authorization.groups.length === 0) {
alert('Je account moet nog worden goedgekeurd door de GWM voordat je toegang krijgt tot IRIS. Neem contact op met de GWM.')
logout()
reject(Error('No groups configured'))
} else if (!profileData['https://iris.501st.nl/user_metadata'].costumes) {
alert('Je hebt nog geen kostuums aan je account gekoppeld, vraag de GWM om deze voor je in te regelen.')
logout()
reject(Error('No costumes configured'))
} else if (profileData) {
resolve(profileData)
} else {
console.log('Logging out because cannot get profile data!')
logout()
reject(Error('Cannot get profile data'))
}
})
})
}
}
const router = new Router({
mode: 'history'
})
export function logout () {
clearIdToken()
clearAccessToken()
router.go('/')
}
export function requireAuth (to, from, next) {
if (!isLoggedIn()) {
next({
path: '/',
query: { redirect: to.fullPath }
})
} else {
next()
}
}
export function getIdToken () {
return localStorage.getItem(ID_TOKEN_KEY)
}
export function getAccessToken () {
return localStorage.getItem(ACCESS_TOKEN_KEY)
}
function clearIdToken () {
localStorage.removeItem(ID_TOKEN_KEY)
}
function clearAccessToken () {
localStorage.removeItem(ACCESS_TOKEN_KEY)
}
// Helper function that will allow us to extract the access_token and id_token
function getParameterByName (name) {
let match = RegExp('[#&]' + name + '=([^&]*)').exec(window.location.hash)
return match && decodeURIComponent(match[1].replace(/\+/g, ' '))
}
// Get and store access_token in local storage
export function setAccessToken () {
let accessToken = getParameterByName('access_token')
if (accessToken) {
localStorage.setItem(ACCESS_TOKEN_KEY, accessToken)
}
}
// Get and store id_token in local storage
export function setIdToken () {
let idToken = getParameterByName('id_token')
if (idToken) {
localStorage.setItem(ID_TOKEN_KEY, idToken)
}
}
export function isLoggedIn () {
const idToken = getIdToken()
return !!idToken && !isTokenExpired(idToken)
}
function getTokenExpirationDate (encodedToken) {
const token = decode(encodedToken)
if (!token.exp) { return null }
const date = new Date(0)
date.setUTCSeconds(token.exp)
return date
}
function isTokenExpired (token) {
const expirationDate = getTokenExpirationDate(token)
return expirationDate < new Date()
}