Just closing this as the work was done as part of RHIDP-5484

I've added the fix to my existing open PR. I've some refinement to make on the proposed configuration, but will track that as part of RHIDP-5484 as the updates needed span the overall solution and not just this fix.

This fix will also be available on this PR image

Adding the fix to the existing pull request that adds support for auth providers from dynamic plugins.

A follow on thought from above, using a mix of the default provider list for statically integrated plugins and a second instance of this component for dynamic plugins which might make for a cleaner solution in terms of how the page is structured:

Then only the text strings for the provider from the dynamic plugin is needed in the configuration.

With some work the final config looks like:

      providerSettings: 
        - title: Microsoft
          description: Sign in with Entra ID
          provider: microsoft
        - title: GitHub
          description: Sign in with GitHub
          provider: github
        - title: Github Two
          description: Sign in with GitHub Org Two
          provider: github-two

I've had to add a manual check for all of the statically integrated providers. One drawback to this approach is that this needs to be maintained as a separate list addition to the auth.providers config dict. The only technical reason I pulled this into it's own setting under dynamic plugins was to provide the title/description. Now that I've gotten some of the underlying mechanics working I may revisit how this is done a bit so that perhaps the default components could still be used for the statically integrated providers and then only the custom auth provider would need to provide text strings etc.

One other thing to check is that this fix will also work for this example.

The icon for now will have to be a Star icon. At this point in the app rendering there is no app context available which means useApp cannot be accessed to get ahold of the system and extended icons. But the title and description fields can be customized. I need to settle on the apiRef field I've chosen for this. It appears that there's a convention on the string IDs used for apiRef instances that this solution uses to bind the config at runtime. Currently I require the entire string, but I could simplify this to match the provider ID which would make it easier to understand the relationship between the providerSettings and the auth.providers section. For the above screenshot the configuration is like:

      providerSettings: 
        - title: Microsoft
          description: Sign in with Entra ID
          apiRef: core.auth.microsoft
        - title: GitHub
          description: Sign in with GitHub
          apiRef: core.auth.github
        - title: Github Two
          description: Sign in with GitHub Org Two
          apiRef: core.auth.github.two

If I take the entire configuration into account I think using a simple apiRef (or maybe call it id or providerId) would be better, so for example:

auth: 
  environment: development  
  providers: 
    guest: 
      dangerouslyAllowOutsideDevelopment: true
    github: 
      development: 
        clientId: ${GITHUB_APP_CLIENT_ID}
        clientSecret: ${GITHUB_APP_CLIENT_SECRET}
    github-two: 
      development: 
        clientId: ${GITHUB_APP_TWO_CLIENT_ID}
        clientSecret: ${GITHUB_APP_TWO_CLIENT_SECRET}
    microsoft: 
      development: 
        clientId: ${AZURE_CLIENT_ID}
        clientSecret: ${AZURE_CLIENT_SECRET}
        tenantId: ${AZURE_TENANT_ID}

dynamicPlugins: 
  rootDirectory: dynamic-plugins-root
  frontend: 
    custom-authentication-provider-module: 
      apiFactories: 
        - importName: ghTwoApi
        - importName: scmAuthApi
      components: 
        - name: SignInPage
          importName: CustomSignInPage
      providerSettings: 
        - title: Microsoft
          description: Sign in with Entra ID
          apiRef: microsoft
        - title: GitHub
          description: Sign in with GitHub
          apiRef: github
        - title: Github Two
          description: Sign in with GitHub Org Two
          apiRef: github-two

It means the 2nd github auth provider would need to ensure it follows the same ID naming convention, so core.auth.github-two.

Or the more likely case that my code is wrong, turns out the provider settings component didn't like the icon component I was trying to pass. This looks promising:

One aside, none of this seems to work the same when using the frontend dev environment (using yarn workspace app start alongside the backend), the frontend dev environment doesn't seem to be able to read or see the configuration under providers.

It seems there's a slight race in some cases to watch out for. In the first iteration of implementing the above approach I've found that ProviderSettingsItem of course wants to get a handle on the target API when it renders, but unfortunately at this stage in the app frontend initialization the entire API provider factory list is not available, this appears to be a list derived from the configuration:

So currently then this approach errors out when rendering the ProviderSettingsItem for github-two because the github-two API factory cannot be found. There's a few options here, first is figuring out how to defer the rendering a bit, or alternatively taking a second look at the overall app tree to make sure API factories from dynamic plugins are being registered and carried through the app properly, either this is a race condition or evidence that a singleton in the app is perhaps not a singleton due to module federation.

In theory it would be possible to create a list of ProviderSettingsItem components on the fly but there's no good source for a title or more importantly description, so the resulting list would not look great. And it would have to be driven by the configuration and rely on the convention that's documented that all auth plugin modules have an apiRef ID that starts with core.auth which seems brittle.

Probably it would be better to have a providerSettings config, like:

dynamicPlugins: 
  frontend: 
    my-package: 
      providerSettings: 
        title: Microsoft
        description: Log in to Entra ID
        icon: star
        apiRef: microsoftAuthApiRef # or maybe this needs to be the provider ID

Which is intended to correlate to how this would be integrated statically, for example:

<UserSettingsPage
  provderSettings={
    <ProviderSettingsItem
        title="Microsoft"
        description="Log into Entra ID"
        apiRef={microsoftAuthApiRef}
        icon={Star} />
}/>