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 · Accepted Answer · 2021-08-16 18:05:34Z

0

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)

edited Aug 16, 2021 at 18:05

answered Aug 16, 2021 at 17:57

Lizard Derad

3791 gold badge4 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2021-08-16 18:20:12Z

0

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");
  })

answered Aug 16, 2021 at 18:20

tony19

140k24 gold badges281 silver badges354 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related