Hosted UI + Registrations – Many solutions but none seem to fit. Please help me decide.

[analog-nico]

I am using Ory Network with their Account Experience / Hosted UI (not legacy, latest version). Ory is already integrated to provide login etc. I am just doing the finishing touches.

My situation:

My SaaS offers multiple products and for each of them users go through different custom registration flows. Hence the default registration flow provided by the Hosted UI does not make much sense as it is not product-specific.

Since I want to use the Hosted UI for everything else, I particularly have an issue with the “Don't have an account? Sign up” note on the login page.

The solutions I am currently contemplating:

1. Disable Registration via the selfservice UIs

   The “Don't have an account? Sign up” note disappears on the login page.

   However, this also disables registration via the /self-service/registration/browser endpoint which is currently used by the custom registration flows provided for each product. I would need rewrite these custom flows to do the registration server-side and afterwards log in the user in the browser.

   The disadvantage of registering a user server-side is that I would need to write my own abuse detection logic that otherwise is done by the /self-service/registration/browser endpoint and I am not sure how to secure this myself. After all I am using Ory to not have the security headaches myself.

2. Allow the Hosted UI registration flow and ask for product-specific information after the registration is done

   I would allow the user to do a registration via the Hosted UI and afterward ask them which product they want to sign up for and also ask for the missing information that my custom registration flows ask upfront. This is not a simple task. There is a lot that my custom sign up flows do:

   • Our products are tied to domains that the users own. So the custom flows ask for the domain name and checks if the domain is eligible to use the particular product. In some cases the user is denied to register and gets an error message that describes what to do to achieve eligibility.
   • We want to know their first name.
   • We ask them to accept the terms of service and privacy policy.
   • We ask if they want to subscribe to our marketing email list.

   This is obviously doable but it also means that every product-specific registration has to be written twice. As the custom-registration flow that is definitely more intuitive to use for the user and then again when the user goes through the Hosted UI registration flow first.

   And quite frankly, I am not sure if this is legal. I think I must store the user’s consent to the privacy policy before I transmit any data to Ory, i.e. creating an identity in Ory during the Hosted UI registration flow.

3. Replace the “Sign Up” link below the Hosted UI login form

   This is not possible at the moment but it would be great if the “Sign Up” link could like to a custom page instead of the Hosted UI registration flow. I would create a page that lists all of our products and allow the user to start the custom registration flow of their choice.

   The closest I could get to make this possible is to create an action that runs before the registration flow which returns an error message that asks users to go to the custom page by providing the link in the error message.

4. Use a custom login page instead of the one provided by the Hosted UI

   Obviously an option but I decided to use Ory to speed up my development and also have advanced features like 2FA. I fear that a custom login page will become a rabbit hole of having to implement countless scenarios and also may make mistakes that make the system less secure.

As you can see, none of the solutions seem to fit. Do you have any ideas how to solve this differently? Or do I overemphasize some of the drawbacks; particularly the abuse detection of option 1 maybe?

Thank you very much for your help!

[vinckr]

Hey @analog-nico

Did you check out Ory Elements? This is basically a UI library that we also use internally for the hosted/built-in UI. You can override the styling and I think would probably be the easiest option for you to remove the "Don't have an account? Sign up" link.
Otherwise I think option 2 is also good, afaik many users handle it like that - first create the account and then do the more "specific"- business logic related stuff. You can add terms of service and privacy policy to the UI as markdown links/checkboxes.

[analog-nico]

I really appreciate your thoughts @vinckr !

Unfortunately, I am not using React/Next.js but Vue.js/Express.js. Maybe I could start using React for just the login, registration etc. pages but that’s a bigger task.

As for option 2, the domain eligibility check is so important that creating an account first and entering and checking the domain afterwards is a really bad user experience. For that reason I have to keep the custom sign up flows that I already have and then implement the sign up for all products a second time so that a user is able to create an account via the registration flow. This is an extra maintenance burden.

This means I simply had to bite the bullet and choose option 1. I did my best to make my custom sign up flows as secure as possible since they create new Ory identities server-side now. However, I am unsure if I reached the same level of security that /self-service/registration/browser gave me when I still used it client-side.

One question that could really help me: Is there any documentation that tells me what security measures (against bulk account creation etc.) Ory Network employs in general or even for the /self-service/registration/browser endpoint specifically?

Thank you very much!