I use oidc-client in basic VueJs project, IDP server informations are correctly set in SecurityServices.js, here is my oidc config:
var mgr = new Oidc.UserManager({
userStore: new Oidc.WebStorageStateStore(undefined),
authority: 'https://my.idpserver.com',
client_secret: "f6ebb8fca6624a4e71c0c3",
client_id: 'web.ui',
redirect_uri: 'https://localhost:8081/authentication/login-callback',
response_type: 'code',
scope: 'openid profile web.ui.api offline_access',
post_logout_redirect_uri: 'https://localhost:8081/authentication/logout-callback',
silent_redirect_uri: 'https://localhost:8081/authentication/logout-callback',
accessTokenExpiringNotificationTime: 10,
automaticSilentRenew: true,
filterProtocolClaims: true,
loadUserInfo: true
})
my program start and routes that has requireAuth metadata redirect to idp server after success full login get redirect to my website, here is my routes.js
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/authentication',
component: loginCallBack,
children: [
{
path: 'login-callback',
name: 'LoginCallBackRoute',
component: loginCallBack
}
]
}
]
based on sample project and document after this redirect I should have authorized user that has access token to call other APIs, but after redirect i get this error in console: UserManager.getUser: user not found in storage
here is my package.json file:
{
"name": "bookoffvue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-s
ervice serve --https --port 8081",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@splidejs/vue-splide": "^0.5.15",
"@vueup/vue-quill": "^1.0.0-beta.7",
"animate.css": "^4.1.1",
"axios": "^0.24.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"es6-promise": "^4.2.8",
"express": "^4.17.2",
"hooper": "^0.3.4",
"oidc-client": "^1.11.5",
"vue": "^2.6.14",
"vue-axios": "^3.4.0",
"vue-oidc-client": "^1.0.0-alpha.3",
"vue-persian-datetime-picker": "^2.10.1",
"vue-router": "^3.2.0",
"vue-select": "^3.16.0",
"vue-server-renderer": "^2.6.14",
"vueditor": "^0.3.1",
"vuejs-countdown": "^0.2.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "^4.5.15",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^6.0.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
this is screenshot of redirected user form IDP to my site:
