Here's some code from a VueJS app where I think we do what you are trying to do. In the code below, we use our registered app id to get the user to log in but then also load, using PortalItem, the registered app using it's item ID. On the ArcGIS Enterprise side, the registered app is shared with a group the user is a member of so the user should only be able to load the app if they are a member of that group. I suppose the registered app could be replaced with any item shared with the appropriate group the user needs to be a member of but this approach seems to keep it nice and tidy and self-contained.
Hope this helps!
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import IdentityManager from '@arcgis/core/identity/IdentityManager'
import OAuthInfo from '@arcgis/core/identity/OAuthInfo'
import Portal from '@arcgis/core/portal/Portal'
import PortalItem from '@arcgis/core/portal/PortalItem'
import '@arcgis/core/assets/esri/themes/light/main.css'
Vue.config.productionTip = false
const registerdAppId = '123456789'
const portalUrl = 'https://my.arcgisenterprise/portal'
const registeredAppItemId = '987654321'
const highlightText = function (words, query) {
if (!words) return ''
return words.replace(new RegExp(query, 'gi'), match => {
return '<span class=\'highlight\'>' + match + '</span>'
})
}
const info = new OAuthInfo({
appId: registerdAppId,
portalUrl: portalUrl,
popup: false
})
const esriId = IdentityManager
esriId.registerOAuthInfos([info])
const portal = new Portal({
url: portalUrl,
authMode: 'immediate'
})
portal
.load()
.then(function (results) {
const appItem = new PortalItem({
id: registeredAppItemId,
portal: portal
})
appItem
.load()
.then(function (results) {
Vue.filter('highlight', highlightText)
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
}, function () {
alert('You are not authorized for this application')
})
})
window.addEventListener('beforeunload', (event) => {
esriId.destroyCredentials()
})