Internal Error when adding SAML V2.0

[Arrong18]

Hello,

I seem to be getting an error when using SAML V2.0 with your theme applied, my best guess is that it doesn't have the icon it needs to render.

[padey]

@Arrong18 - were you able to solve the problem? We have the same problem with activated Identity Providers (SAML & OIDC).

[Arrong18]

@padey - I did fix this in the end. The problem is that only certain providers have been added. If you go to social.ftl, which can be found here theme/keywind/login/components/socials.ftl, and add in the providers you would like with something like the below code it should work. If you have any issues with this please let me know and I would be happy to help when available.

If you are adding an image to this don't forget you will also need to add some CSS to format it correctly.

`<#macro <PROVIDER NAME. eg saml>>

Code for Icon here.

#macro>`

if you are doing this with docker/ docker-compose remember the rebuild and hard refresh the browser.

Happy coding, Arron

[lukin]

@Arrong18 @padey Hey 👋

Thank you for letting me know. I reopen the issue until icons for all identity providers are added. Also, I'll describe in the README how to add a custom identity provider icon.

[padey]

Great, thank you guys! I'll dive into the code a bit tonight, my frontend developer days were long ago.... :D

Edit: Just to be clear, the socials.ftl filters on provider type, correct? So saml & oidc in my case. @Arrong18

So it should look like this: <#macro oidc> ... </#macro>

Which would actually be really cool to be able to filter on the identity provider alias. For example, you could address different Azure AD tennats for applications and separate them visually.

Thought would then be like this: <#macro azure-ad-tennant1> ... </#macro>

<#macro azure-ad-tennant2> ... </#macro>

Edit 2: Since the provider.ftl imports socials.ftl - and in the provider.ftl the provider alias serves as data provider, is my second idea already implemented? @lukin

    data-provider="${provider.alias}"

[padey]

Hey @Arrong18 @lukin

It is now running like a charm - I have found my error. There is no minus allowed in the provider alias name (in the attributes on KeyCloak). When I removed the IDP with a minus in the alias, my code works. :-)

Next step for me: understand svg path and add beautiful logos. :D

[Arrong18]

Hey @padey ,

Apologies, I just looked at my original comment and the code didn't go through correctly. I'm glad you got it sorted. I started by not adding a logo and instead used the name with the above code you have shown ${provider.alias}. I'm sure you could do a filter in relation to the realm name so it's dynamic. Unfortunately I didn't use this in the end and I just needed to add saml however I'm sure with some time you can figure it all out.

it might be better to use png images rather then creating the logo yourself with svg. Not worth making the image yourself when you can just download it

[lukin]

@padey Hey 👋

This should be fixed with 79b24d2.

New path to identity provider icons. theme/keywind/login/components/icon/provider.ftl

[padey]

I'll test it in development in the next few days. Thank you!