Add a way to reorder Social login & Password login

[thongxuan]

Preflight checklist

• [x] I could not find a solution in the existing issues, docs, nor discussions.
• [x] I agree to follow this project's Code of Conduct.
• [x] I have read and am following this repository's Contribution Guidelines.
• [x] I have joined the Ory Community Slack.
• [x] I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Currently packages/elements-react/src/components/card/two-step/state-provide-identifier.tsx is implement like this

<OryCard>
      <OryCardHeader />
      <OryCardContent>
        <OryCardValidationMessages />
        <OryFormSocialButtonsForm />
        <OryForm
          data-testid={`ory/form/methods/local`}
          onAfterSubmit={handleAfterFormSubmit(dispatchFormState)}
        >
          <Form.Group>
            {showSsoDivider && <Card.Divider />}
            {nonSsoNodes.map((node, k) => (
              <Node node={node} key={k} />
            ))}
          </Form.Group>
        </OryForm>
      </OryCardContent>
      <OryCardFooter />
    </OryCard>

which cause OryFormSocialButtonsForm to show on top of OryForm (non-SSO)

In my custom UI I would like to show social login below, and this could not be achieve.

Ideally I would restyle the <OryCardContent> to display: flex; flex-direction: column-reverse, but there is also OryCardValidationMessages there and this would cause it to also move to the bottom, which is not desired.

Describe your ideal solution

I think we could wrap the <OryFormSocialButtonsForm />, OryForm(and any other possible groups) in one moredivor something, so it would be separated from theOryCardValidationMessages`, then it's up to consumer to style the form as they want.

Workarounds or alternatives

no workaround

Version

@ory/elements-react: ^1.0.0-rc.5

Additional Context

No response

[jonas-jonas]

Thanks for the report. At the moment, the SSO buttons being in their own form is a bit of technical limitation, that we'd like to rework at some point. Wrapping the elements in more divs might also be problematic, because we then have to provide another overridable component, as well.

Looking at the code, I think we need to make it easier to implement the components yourself, reusing the built-in components. That would allow you to define your own order.

[aeneasr]

I think the UI respects the order in the OIDC/SAML config array, not sure if this works with this version of Ory Elements but it would probably be an easy fix for you if it respects the order in the API (which it should, I think)