pbechliv•8mo ago

Updating Organization Logo / Icon through the API

Is it currently possible to update the logo and the icon of an organization through the API? I couldn't find it in the documentation and it would be crucial for our work flow. The problem is that currently our customers have the ability to set their logos through our platform and we would need to propagate the change to Zitadel for the login page branding to be correct.

15 Replies

fabienne•8mo ago

It is possible, the API is just really badly documented, sorry for that.

fabienne•8mo ago

https://zitadel.com/docs/apis/assets

ZITADEL Docs

AssetsService

pbechlivOP•8mo ago

Thanks for the answer! I am trying to figure the usage of these endpoints. I didn't find them as methods in the @zitadel/node client My assumptions are to 1. Use REST with multipart/form-data 2. Use the org/policy/label/logo UploadOrgLabelPolicyLogo endpoint 3. Append the logo as Blob in the "file" key in the form-data Apparently I am doing something wrong as I get a 404s Should grpc be used instead? Any help would be appreciated! 🙂 Here is a sample code of how I call the endpoint

async function uploadLogo(logoBuffer: Buffer, orgId: string): Promise<void> {
  const formData = new FormData();
  const blob = new Blob([logoBuffer], { type: 'image/png' });
  formData.append('file', blob, 'logo.png');

  const response = await fetch(`${ZITADEL_API_URL}/org/policy/label/logo`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${ZITADEL_API_KEY}`,
      'x-zitadel-orgid': orgId,
    },
    body: formData,
  });
}

async function uploadLogo(logoBuffer: Buffer, orgId: string): Promise<void> {
  const formData = new FormData();
  const blob = new Blob([logoBuffer], { type: 'image/png' });
  formData.append('file', blob, 'logo.png');

  const response = await fetch(`${ZITADEL_API_URL}/org/policy/label/logo`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${ZITADEL_API_KEY}`,
      'x-zitadel-orgid': orgId,
    },
    body: formData,
  });
}

fabienne•8mo ago

This API is REST only I think what is important, if you do this on an organization, the organization need to have a custom label policy before adding the logo. As the assets are part of that setting. if you have only used the default settings, create a label policy for that org first Its a POST request to this endpoint: assets/v1/org/policy/label/logo As a hint, you can test thought the management console from Zitadel, to see which requests are performed

pbechlivOP•8mo ago

Indeed the 2 issues were 1. Not prepended assets/v1 in the url 2. Not creating a policy beforehand Now I got it working, thank you very much for the support!

fabienne•8mo ago

Sure, and sorry for the badly documented API. We are currently looking into how to improve our API docs in general

Gigi the Giraffe (Zitadel)•8mo ago

🎉 Looks like you just helped out another community member! Thanks for being so helpful <@928181835404554270>! You're now one step closer to leveling up—keep up the amazing peer support! 🚀

spicypixel•2mo ago

Is this API getting the "v2" treatment? how does it stand in the face of externalising the login form (either as its own container or embedded in react apps?) Wondering if logo branding has a long term plan or if we're better off planning for a world where we have to store this in our database/object store instead.

Rajat•2mo ago

hey @spicypixel Good point. I saw the branding API but it just lets you set a logo URL, not upload the file itself. So you'd still have to host the image yourself. this is our roadmap https://zitadel.com/docs/product/roadmap if you have any suggestions on how this could be achieved, feel free to open a issue with a use case the engineering team will check it out 🙂 oops, the branding breadcrumb is broken, here you can navigate back to Branding https://zitadel.com/docs/apis/resources/mgmt/management-service-get-label-policy

spicypixel•2mo ago

Yeah I’m not even sure how to achieve what I want given what I have. I could easily host the file on a cdn so I guess setting a url would be sufficient I can’t see how to submit a url for a branding logo on that 🥲

spicypixel•2mo ago

https://zitadel.com/docs/apis/resources/mgmt/management-service-update-custom-label-policy

ZITADEL Docs

Update the preview private labeling/branding configured on the organization. The settings will trigger if the organization has been identified (organization scope, user). The preview is used to show you how it will look like, make sure to activate it as soon as you are happy with the configuration. Define what colors, fonts, and logo should be u...

Rajat•2mo ago

https://zitadel.com/docs/apis/resources/mgmt/management-service-activate-custom-label-policy

ZITADEL Docs

Activates the preview private labeling/branding configured on the organization. It will be shown to the users afterward. The settings will trigger if the organization has been identified (organization scope, user). Defines what colors, fonts, and logo should be used for the Login/Register UI, E-Mails and Console.

spicypixel•2mo ago

am I blind? object/{}

spicypixel•2mo ago

and in the add custom label policy endpoint, nothing in the request body is url flavoured

Rajat•2mo ago

hey @spicypixel apologies for the late response, I will curate few curl apis for you so that it could help you setup branding via the api

Updating Organization Logo / Icon through the API

Did you find this page helpful?