Trying to configure Okta from config.js in a Vue app, in typescript

Question

I'm trying to get our vue + okta app to work pulling the okta values from a congif.json in the public folder (so we can build and deploy automatically to various environments)

I'm following this pattern for the config.

Vue js with an external configuration file

Does Okta have an example of using okta with a config.json in the public folder to hold the values(in typescript by preference)?

I'm doing this, but it's not working, is

in main.ts

      const sPath = `${process.env.BASE_URL} ${"config.json"}`;
//      fetch(process.env.BASE_URL + "config.json")
      fetch(sPath)
        .then((response) => response.json())
        .then((config) =>
        {
            Vue.prototype.$config = config;
            new Vue({
                router,
                store,
                render: (h) => h(App)
            }).$mount("#app");
        })

Then in router\index.ts

const confObj = Vue.prototype.$config;// confObj is undefiend here - EWB

//Vue.use( Auth,
//    {
//        confObj,
       
//    } );
debugger;
Vue.use( Auth,
    {
        issuer: confObj.issuer,
        client_id: confObj.client_id,
        redirect_uri: confObj.redirect_uri,
        scopes: [ 'openid', 'profile', 'email' ],
        tokenManager: { storage: 'sessionStorage' },
    } );


Vue.use(VueRouter)

When I get to it , configObj is still undefined.

Lizard Derad · Answer 1 · 2021-08-16T18:05:34.370

You should use Vue.prototype.$config = require('/public/config.json') like so

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$config = require('/public/config.json')
new Vue({
    render: h => h(App),
    beforeCreate: function () {
        console.log(this.$config)
    },
}).$mount('#app')

in your example

Vue.prototype.$config = require('/public/config.json')
const confObj = Vue.prototype.$config;
Vue.use( Auth,
    {
        issuer: confObj.issuer,
        client_id: confObj.client_id,
        redirect_uri: confObj.redirect_uri,
        scopes: [ 'openid', 'profile', 'email' ],
        tokenManager: { storage: 'sessionStorage' },
    } );


Vue.use(VueRouter)

score 0 · Answer 2 · answered Aug 16 '21 at 18:20

It looks like you might be importing router/index.ts at the top of the file before the config is fetched.

You could defer that import until the fetch occurs:

// import router from './router' ❌

const sPath = `${process.env.BASE_URL} ${"config.json"}`;
fetch(sPath)
  .then((response) => response.json())
  .then((config) => {
     Vue.prototype.$config = config;

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

Trying to configure Okta from config.js in a Vue app, in typescript

2 Answers2