OIDC - UNavigationMenu. Show/Hide based on Roles - Race Condition
typescriptnuxt4🧰modules🔓auth🖼️uiHi,
I am currently using Nuxt v4 and OIDC client to successfully authenticate and login and have roles come through too. Great!
However, I have a navigation menu using Nuxt UI (UNavigationMenu) and i want to show/hide sections based on these permissions.
I currently have my menu data in a composable that returns a ref(variable) in which i put straight into the Nuxt UI component called UNavigationMenu.
This too also works, I then added in the UserManager etc to get the roles for the user logged in but there seems to be a race condition and the menu items are not correct after i log in.
If i then refesh the page using F5 then the menu displays correctly based on the Roles.
I can see an event that fires once the user is loaded via the OIDC client which will contain the user roles etc however i am not sure how to trigger my menu to be updated and re-run the code I have.
How would/do other people do this?
My modules are version are listed below just in case.
"@types/leaflet": "^1.9.20",
"@iconify-json/mdi": "^1.2.3",
"@internationalized/date": "^3.10.0",
"@nuxt/eslint": "1.10.0",
"@nuxt/types": "^2.18.1",
"@nuxt/ui": "4.2.1",
"@nuxtjs/i18n": "^10.2.1",
"@pinia/nuxt": "^0.11.3",
"@tailwindcss/vite": "^4.1.17",
"eslint": "^9.39.1",
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"nuxt": "^4.2.1",
"oidc-client-ts": "^3.4.1",
"pinia": "^3.0.4",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3",
"valibot": "^1.2.0",
"vue": "^3.5.25",
"vue-router": "^4.6.3"
I am currently using Nuxt v4 and OIDC client to successfully authenticate and login and have roles come through too. Great!
However, I have a navigation menu using Nuxt UI (UNavigationMenu) and i want to show/hide sections based on these permissions.
I currently have my menu data in a composable that returns a ref(variable) in which i put straight into the Nuxt UI component called UNavigationMenu.
This too also works, I then added in the UserManager etc to get the roles for the user logged in but there seems to be a race condition and the menu items are not correct after i log in.
If i then refesh the page using F5 then the menu displays correctly based on the Roles.
I can see an event that fires once the user is loaded via the OIDC client which will contain the user roles etc however i am not sure how to trigger my menu to be updated and re-run the code I have.
How would/do other people do this?
My modules are version are listed below just in case.
"@types/leaflet": "^1.9.20",
"@iconify-json/mdi": "^1.2.3",
"@internationalized/date": "^3.10.0",
"@nuxt/eslint": "1.10.0",
"@nuxt/types": "^2.18.1",
"@nuxt/ui": "4.2.1",
"@nuxtjs/i18n": "^10.2.1",
"@pinia/nuxt": "^0.11.3",
"@tailwindcss/vite": "^4.1.17",
"eslint": "^9.39.1",
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"nuxt": "^4.2.1",
"oidc-client-ts": "^3.4.1",
"pinia": "^3.0.4",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3",
"valibot": "^1.2.0",
"vue": "^3.5.25",
"vue-router": "^4.6.3"
