Role-based access

[rmeissn]

I'm not really an oidc pro, so this might be a simple to answer question.

I got a frontend application and only users associated with a specific role - role-a - shall be allowed to login. Some users got the role, others don't.

My current implementation:

mainOidc.events.addUserLoaded(() => {
  if (mainOidc.userProfile.roles === undefined || !mainOidc.userProfile.roles.includes('rola-a')) {
    window.alert('Not Allowed')
    mainOidc.signOut()
    return
  }
  // successfull login path ...
})

Problem with this approach: I can leave the current browser tab in a pending state and open another one with a protected route - I'm displayed as successfully logged in and got access. I guess the issue comes from a user entry in the userStore.

How can I prevent someone without a specific role to being added to the useStore or logged in at all?