pass data from one boot file to another

[Nico-L]

Hello,

I have defined two boot files, one for setting vue-keycloak for auth and the other for setting Vue-apollo.

// boot/auth.js
import VueKeyCloak from '@dsb-norge/vue-keycloak-js'

export default async ({ Vue, router, store, app }) => {
  await new Promise((resolve, reject) => {
    Vue.use(VueKeyCloak, {
      logout: {
        redirectUri: process.env.BASE_URL
      },
      config: {
        realm: 'LBF',
        url: 'https://cloud.labonnefabrique.fr/auth',
        clientId: 'lbf-frontend'
      },
      init: {
        onLoad: 'check-sso',
        checkLoginIframe: false
      },
      onInitError: error => {
        console.log('erreur init :', error)
        reject('error', error)
      },
      onReady: keycloak => {
        resolve('keycloak defined')
      }
    })
  })

// guard routes definition based on authentification
  router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (router.app.$keycloak.authenticated) {
        next()
      } else {
        let redirect = process.env.BASE_URL + to.path
        router.app.$keycloak.login({ redirectUri: redirect })
      }
    } else {
      next()
    }
  })
}

I have to make sure that the keycloak is initialized before getting to apollo, hence the await of the promise. I defined the boot files in the correct order in the quasar.conf.js file.

// boot/apollo.js
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'

const HASURAURL = process.env.HASURA_URL
const HASURASECRET = process.env.HASURA_ADMIN_SECRET

export default ({ app, router, Vue }) => {
  // How to obtain vuekeycloak token ?
// router.app.$keycloak return 'TypeError: Cannot read property '$keycloak' of null'
  const httpLink = createHttpLink({
    uri: HASURAURL,
    fetch: fetch,
    headers: {
      //'x-hasura-admin-secret': HASURASECRET
      Authorization: "Bearer " + vuekeycloaktoken
    }
  })

  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
    connectToDevTools: true
  })

  let apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    errorHandler({ graphQLErrors, networkError }) {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          )
        )
      }
      if (networkError) {
        console.log(`[Network error]: ${networkError}`)
      }
    }
  })
  Vue.use(VueApollo)
  app.apolloProvider = apolloProvider
}

So I need to pass the authorization token returned by keycloak as header for apollo query and I don’t know how to do. In the auth file, the token is given by keycloak.token.

1. I’d rather not use vuex as it is a bit overkill for this single application (I am not planning to use vuex in my app)
2. In the apollo boot file I tried to get all the apollo definitions inside the export default to get access to app and router and get to router.app.$keycloak but I receive an error “TypeError: Cannot read property ‘$keycloak’ of null”, because app = null when it’s called
3. I thought that export the keycloak.token in the auth boot file would be the right way to go. But with that promise inside which the keycloak object is created I don’t know how to export a const token. An export const vuekeycloaktoken = keycloak.token returns undefined as the promise is not resolved.

Do you know how I should proceed?
Thanks

[Nico-L]

OK, using cookie ou localStorage to store authorization token is not good practice but I may use localStorage and erase the stored token once assigned to a const.

But, the await promise in the auth.js doesn’t work as auth is correctly initialized first but apollo is then treated before auth gets any retour for keycloak.

How to setup y authjs correctly to make it ‘wait’ for the keycloak server to respond before treating the apollo.js boot file? While at it, I could use some good tutorials on promises as I can’t get the grasp of it.

Thanks