I want to drop some suggestions in here about working with the frontend ory elements to customise the login flow as I think the current setup of this is very much not ideal. Firstly, Ory bills itself on a "bring your own frontend" experience. However, I think making modifications beyond basic styling is currently very difficult. As part of the design flow, Ory offers the

@ory/elements

package. It's somewhat unclear how to use this package but if you were to naively approach this, I imagine you'd do what I do and fork the react example code (I did actually start with a Docker package but this leads me down another complaint which is the sheer number of ways of approaching adding your own design with unclear guidance around this). Let's take an example component out of the example code for Ory elements, the Login button here: https://github.com/ory/elements/blob/main/examples/react-spa/src/Login.tsx Most of this component is concerned with setting up auth flows and provided to you at the bottom of the component is a somewhat opaque

UserAuthCard

component which offers some limited functionality to say inject a logo at the top of it. I don't know about others, but I haven't needed to touch the auth flows at all when integrating Ory. I can't imagine many use cases for this component where I would want to tweak how logins work. What I do want to do though is add my own branded buttons to the OIDC providers (using a Google branded button is actually a requirement if you want to add your logo to the Google OAuth screen, they will need to manually approve your code via a video)

Hi @stocky-furniture-33330 I'm the author and maintainer of Ory Elements 🙂 Thank you for your interest in Ory and your valuable feedback! I'm completely with you on providing more flexibility to the components, such as swapping out the social button with one that you have. We're actually planning on having this as customizable as possible, but we had to start somewhere and with a more opinionated approach on how the component should look like. The reason for this is because we re-use these react components in our Ory Account Experience (the UI bundled with your Ory Network project). You can find the full source code for this here https://github.com/ory/kratos-selfservice-ui-node. At the end of the day we are unfortunately a small team providing a high quality experience in each part of the product, however that takes time to implement. That said, we will be improving Ory Elements in the near future so that you can implement authentication into your application as fast as possible while keeping up with all of the security standards 🙂 As Ory Elements is open source, I encourage you to contribute by opening up issues and creating PRs https://github.com/ory/elements

I understand the pain of being a small funded startup, I'm in the same boat. I'm more than happy to contribute to the codebase as well where I can but like I mentioned earlier, I think the fundamental design of the

@ory/elements

package is incorrect and places the emphasis on editing the flows between the frontend and Kratos and not editing the design of the components themselves. I'd hazard that it's the latter that most people are going to want to change and is currently the most difficult thing to do in the current setup. It's great that you're improving the project at some point but I actually don't think you need to make that many changes to what you have to make it immediately useful. For instance, another approach could simply be to drop the Vanilla Extract library and instead simply provide a default stylesheet and sensible set of HTML + classes (using something like the https://css-tricks.com/bem-101/ approach) which would allow an easy override by providing your own stylesheet which can override the default styles. I have managed to wrangle the self service UI node into submission and get my social icons into place (by overriding the font awesome classes, see: https://www.xonboard.com.au/auth-anon/login) but I rabbit holed a lot on trying to fork ory elements and the examples before ultimately giving up. Anyway, I deeply appreciate the work on Ory and I'm more than happy to contribute either from a high level design view or with code on fixing some of these problems. If you have long term plans around the elements package, it would be great to understand where you're going with it.

Good that this topic is brought up @stocky-furniture-33330, in our use case we have a very similar issue that the styling (UI) and UX can not really be customized. Lets say I want to: 1. change colors, fonts (I guess possible via custom CSS / ThemeProvider) 2. style my input fields so they look slightly different 3. or in addition to 2.: even exchange the input fields by our own React component 4. same as 2/3 but for the buttons 5. move around the login mask 6. add images / banners / texts / links 7. add or change how error growls (boxes) work As I understood the only options right now are either forking the Repo and rebuild the

UserAuthCard

(not ideal, since you diverge from the original repo and do not get future fixes/additions etc.) or do upstream fixes (which we also would do, if that fits to Orys expectations as well, but I fear if one goes into heavy customization that can get pretty difficult pretty quickly)