Admin page in exemple doesn't render as expected

[Pyrrha]

Hello,

Following the documentation guide, I clone this repository and add my application configuration in .env file for a poc. However, accessing /admin mark an error.

Steps to reproduce

• Deploy a local Zitadel (eg. docker-compose) on port 8080
• git clone git@github.com:zitadel/zitadel-vue.git
• Create a project then an app in Zitadel console (UserAgent/PKCE)
• Set redirect url to http://localhost:5173/auth/signinwin/zitadel, post-url to http://localhost:5173/, tick the dev mode toggle
• In project Role > Create role admin (key + display name only)
• In project Authorizations > Assign to the current user the admin role
• Update .env config file accordingly to app details (id + client id)
• yarn -> install deps
• yarn dev -> launch dev app
• Go on http://localhost:5173/ and hit login
• Once log in on /login path, check for admin role in data presented. In my case, I saw:
  • urn:zitadel:iam:org:project:306217913633734659:roles: { "admin": { "306130699507728387": "my-org.localhost" } }
  • urn:zitadel:iam:org:project:roles: { "admin": { "306130699507728387": "my-org.localhost" } }
• Change path to /admin, the error occurs: admin is not a given role for the project

Expected behaviour

Using /admin showing the message from the protected admin view: "You can see it because you have the role "admin" in your ZITADEL project."

Note

That's one of my first uses of Zitadel. In other products, like Keycloak, we can specify the claim which is rendered differently: not using urn, but for exemple a simple list of groups, space-separated. For example in this case: groups: admin.

Is it related to the choice of this client type?

[numerick]

I just ran into this issue as well. Looks like the hasRole is never executed. After trying different things with navigation guards, that causes other issues, I was finally able to make it work.

Remove import { createZITADELAuth } from "@zitadel/vue"; in the services/zitadelAuth.ts

Copy the code from the lib/src/zitadelAuth.ts and paste it after the imports in services/zitadelAuth.ts.

Delete the lib folder.

Add the dependency to the main project:

yarn add vue-oidc-client

Make sure you have the proper values in .env and that's it.