Customising the returned UI nodes

[Rodeoclash]

I'm not quite if I'm expressing this problem quite correctly in Ory terminology, so excuse any mistakes.

I have a custom OIDC provider configured (Xero) which is working great. However, I want to customise the login / registration UIs to only show Xero when logging in as an employer and other social sign ins (i.e. Google / Apple etc) and the id password flow for employees. These are both public roles in my system, displaying the appropriate login / registrations options per user like this is a convenience for them.

I'm also starting to switch my UI over to use Ory Elements which is also working correctly but I'm not sure where I should perform the UI customisation mentioned above. Can I configure Kratos to support different flow options should I look at introspecting the returned flows UI nodes and modifying them on the fly to configure the Elements output (or should I just abandon elements altogether and roll my own UI code).

I can't be 100% sure, but it seems that ory/kratos#765 plans to encapsulate this logic correct?

[aeneasr]

Hi @Rodeoclash ! So to understand your use case a bit better: You want to show different sign in options depending on e.g. query parameter? One option you could do is to use Ory Elements and filter out those options you do not want to show the user. In pseudo-code

const { data: login } = await ory.createBrowserLoginFlow()

// Let's say you decide which options to show based on a URL query parameter
let filter
if (router.query('show') === 'employee') {
  filter = (node) => // ...
} else {
  filter = (node) => // ...
}

const nodesToRender = login.ui.nodes.filter(filter)

// And then pass that to Ory Elements

Hope this helps!

[Rodeoclash]

Yes, nailed it!

should I look at introspecting the returned flows UI nodes and modifying them on the fly to configure the Elements output

I wanted to make sure that before I started messing around with login.ui.nodes that I wasn't missing a more official way of modifying the UI elements.

Perfect, thanks so much for the prompt answer, we'll be looking at using Ory Cloud when we launch (and I like the avatar btw, was a big fan of Mr Robot 😆 )