spicypixel•16mo ago

Interaction with the Management API from React

So to outline my problem in some bullets before going into more detail: - I'd like to have some user management functionality exposed in my React application. - I'd like to be able to list all the users in the organisation if the user is authenticated with the Org User Management Zitadel management role. - I'd like for someone with this Org User Management role be able to add new users and amend existing users in the organisation. - I'd like for people to be able to amend their own user details regardless of having this role. - I'd like to do this all client side using the authenticated session in the React application. I've read https://zitadel.com/docs/support/troubleshooting#accessing-zitadels-apis and got some information but I can't work out how to do these management calls from the client side authenticated user token. Do I need the Zitadel aud or the {projectId} aud to be able to do this? Current scope is "openid profile urn:zitadel:iam:org:project:id:zitadel:aud" It's working as expected via zitadel-go client library and the management examples - but it requires a service user as one would expect from a stand alone Go backend deployment. Where should I start for making this work client side?

1 Reply

spicypixelOP•16mo ago

Pulling a token out of the react application and using curl to play with the API I get the following:

❯ curl -L -X GET 'https://login.example.io/management/v1/users/269390122036771979' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: $TOKEN'
{"code":16,"message":"invalid auth header (AUTH-toLo1)","details":[{"@type":"type.googleapis.com/zitadel.v1.ErrorDetail","id":"AUTH-toLo1","message":"invalid auth header"}]}%

❯ curl -L -X GET 'https://login.example.io/management/v1/users/269390122036771979' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: $TOKEN'
{"code":16,"message":"invalid auth header (AUTH-toLo1)","details":[{"@type":"type.googleapis.com/zitadel.v1.ErrorDetail","id":"AUTH-toLo1","message":"invalid auth header"}]}%

Which seems to imply scope issues but I haven't a clue what to debug next to work out why. The user which the token was generated from has Org Owner and Org User Manager management roles. This token works on the https://login.example.io/auth/v1/users/me endpoint as one would expect, and it also works on list users of the org endpoint:

curl -L -X POST 'https://login.example.io/management/v1/users/_search' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H "Authorization: $TOKEN" \
--data-raw '{
  "query": {
    "offset": "0",
    "limit": 100,
    "asc": true
  },
  "queries": [
    {
      "firstNameQuery": {
        "firstName": "", "method": "TEXT_QUERY_METHOD_CONTAINS"
      }
    }
  ]
}'

curl -L -X POST 'https://login.example.io/management/v1/users/_search' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H "Authorization: $TOKEN" \
--data-raw '{
  "query": {
    "offset": "0",
    "limit": 100,
    "asc": true
  },
  "queries": [
    {
      "firstNameQuery": {
        "firstName": "", "method": "TEXT_QUERY_METHOD_CONTAINS"
      }
    }
  ]
}'

This returns the expected JSON listing all the users in the org my token was minted from. I've worked it out! Zsh wasn't expanding the $TOKEN in the single quotes, so it was an invalid header.

Interaction with the Management API from React

Did you find this page helpful?