Vuex-OIDC on the dev server-CodePudding

On my app I have installed Vuex-oidc package to implement the authentication using the endpoints that I have got from the backend, and everything is working well on my machine, but I got the request to modify the oidc settings because right now the auth is working only from locale, and is not working from the development server, so I was requested to move these settings from my config/oidc.js file to the Nuxt "runtime".

Here is my config/oidc.js file:

export const oidcSettings = {
  authority: 'https://***/***.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_***_SIGNUPORSIGNIN',
  clientId: '************',
  token_endpoint: 'https://***/***.onmicrosoft.com/oauth2/v2.0/token?p=B2C_***_SIGNUPORSIGNIN',
  redirectUri: 'http://localhost:3000/oidc-test/oidc-callback',
  responseType: 'id_token ',
  scope: 'https://***.onmicrosoft.com/***/Read openid'
}

Then I have this oidc.js file in the store which is using my oidcSettings:

import { vuexOidcCreateStoreModule } from 'vuex-oidc'
import { oidcSettings } from '~/config/oidc'

const storeModule = vuexOidcCreateStoreModule(
  oidcSettings,
  {
    namespaced: true,
    dispatchEventsOnWindow: true,
    publicRoutePaths: ['/', 'oidc-callback-error']
  },
  // Optional OIDC event listeners
  {
    userLoaded: user => console.log('OIDC user is loaded:', user),
    userUnloaded: () => console.log('OIDC user is unloaded'),
    accessTokenExpiring: () => console.log('Access token will expire'),
    accessTokenExpired: () => console.log('Access token did expire'),
    silentRenewError: () => console.log('OIDC user is unloaded'),
    userSignedOut: () => console.log('OIDC user is signed out')
  }
)

export const state = () => (storeModule.state)

export const getters = storeModule.getters

export const actions = storeModule.actions

export const mutations = storeModule.mutations

I am not sure what I am supposed to use or to do for accomplish the request, I was thinking to introduce a .env and retrieve oidcSetting from ther. Can it be a good idea?

I can also see that Nuxt has his own runtimes which can be declared in nuxt.config.js, such as "publigRuntimeConfig: {}" and "privateRuntimeConfig: {}", but I cannot find much on it, just the basic way to use them, but I am no sure which of my settings should be private and which should be public, and also I am not sure how to call them in my store/oidc.js file.

Some suggestion?

CodePudding user response：

Do you have these settings

  export const oidcSettings = {
  authority: 'https://your_oidc_authority',
  clientId: 'your_client_id',
  redirectUri: 'http://localhost:1337/oidc-callback',
  responseType: 'id_token token',
  scope: 'openid profile'
}

I can only suggest to visit https://github.com/perarnborg/vuex-oidc/wiki

CodePudding user response：

I am not sure this is the best practice to get the result I want, but it works:

What I have done is to use an .env file and hold all the informations there:

AUTHORITY = https://***/***.onmicrosoft.com/v2.0/.well-known/...
CLIENT_ID = ************
TOKEN_ENDPOINT = https://***/***.onmicrosoft.com/oauth2/v2.0/token?...
REDIRECT_URI = http://localhost:3000/oidc-test/oidc-callback
RESPONSE_TYPE = id_token
SCOPE = https://***.onmicrosoft.com/***/Read openid

Then in my nuxt.config.js I have added require('dotenv').config() in the very top of the file (@nuxtjs/dotenv and dotenv packages must be installed and @nuxtjs/dotenv has to be declared in the modules and in the buildModules in your nuxt.config.js)

Now you can delete the config/oidc.js file and you can edit the store/oidc.js: Instead of having:

import { oidcSettings } from '~/config/oidc'

You can write:

const oidcSettings = {
  authority: process.env.AUTHORITY,
  clientId: process.env.CLIENT_ID,
  token_endpoint: process.env.TOKEN_ENDPOINT,
  redirectUri: process.env.REDIRECT_URI,
  responseType: process.env.RESPONSE_TYPE,
  scope: process.env.SCOPE
}