I have a very simple test javascript application that connects to AUTH0, gets a JWT, then connects to a server application with the JWT. This all works fine in a pure js environment.
What I want to do now is embed this code in a Vue (v2) application. I don't want to use Auth0 to authenticate users, that will be done by the server, which already has a user database. The purpose of using Auth0 is to authenticate the client application to the back end server. This gives it access to a number of APIs that would otherwise be prevented. So, this is not using the auth0 SPA with Auth0 doing the login page.
As I say, I have this working fine in a standalone app. But when I just cut/paste that code in to the main.js file of the vue application, I get CORS error in the browser. The Auth0 code is being executed before vue starts. It call right after the imports, and vue is only started once we get the JWT.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import vuetify from './plugins/vuetify'
import VueScreen from 'vue-screen';
const axios = require('axios');
import * as credentials from '../auth_config.json'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { library } from '@fortawesome/fontawesome-svg-core'
let tokenRequest = {
"client_id": credentials.clientid,
"client_secret": credentials.secret,
"audience": credentials.audience,
"grant_type": credentials.grant_type
};
let config = {
headers: {
'content-type': 'application/json'
}
};
// ==========================================================================
console.log("Getting JWT");
axios.post(credentials.tokenurl, tokenRequest, config)
.then(function (results) {
console.log("Acquired auth0 token")
var token = results.data
console.log(token);
startVue()
})
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
// ==========================================================================
function startVue() {
Vue.use(faUserSecret)
Vue.use(VueScreen, 'semantic-ui');
Vue.use(VueScreen);
Vue.config.productionTip = false
Vue.use(library)
Vue.use(FontAwesomeIcon)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
}
The errors I get are in the browser:
Getting JWT
vue.runtime.esm.js?c320:8484 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
main.js?fbea:48 XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}onabort: ƒ handleAbort()onerror: ƒ handleError()onload: nullonloadend: ƒ onloadend()onloadstart: nullonprogress: nullonreadystatechange: nullontimeout: ƒ handleTimeout()readyState: 4response: ""responseText: ""responseType: ""responseURL: ""responseXML: nullstatus: 0statusText: ""timeout: 0upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}withCredentials: false[[Prototype]]: XMLHttpRequest
main.js?fbea:53 {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}adapter: ƒ xhrAdapter(config)data: "XXXXXX" }"headers: {Accept: 'application/json, text/plain, */*', Content-Type: 'application/json'}maxBodyLength: -1maxContentLength: -1method: "post"timeout: 0transformRequest: [ƒ]transformResponse: [ƒ]transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}url: "https://XXXXXX.auth0.com/oauth/token"validateStatus: ƒ validateStatus(status)xsrfCookieName: "XSRF-TOKEN"xsrfHeaderName: "X-XSRF-TOKEN"[[Prototype]]: Object
I had tried getting the JWT as part of the created() lifecycle point of the screen when it loads but that gave the same problem.
Despite the helpful comments from @sideshowbarker, this did indeed turn out to be a CORS issue.
The solution came from: @akber-iqbal who accurately predicted that updating the AUTH0 settings to include localhost as an allowed CORS source might work. It did.
