Allow more control over feature components when embedding them

[rishabhpoddar]

Some examples:

• We want to show a login feature component even though a session exists - for example to show the phone OTP passwordless flow in case a user wants to change their phone number whilst their are logged in.
• We want to render only the sign up form of the emailpassword login feature component on one route, and only the sign in form on another route.
• We want to prevent the reset password email sent screen from showing after the user enters their email. Instead, we want to redirect the user to another page, or show another component on the same page.

[porcellus]

We've postponed discussions of this, so I'm saving my notes here:

• "We want to show a login feature component even though a session exists" - this has been solved since then by the addition of redirectOnSessionExists prop.
  • In some cases (passwordless w/ OTP), this still requires some further customizations. By default, it'd show a success screen instructing the user to close the current tab.
• I think the best way to solve the customization of embedded components is to add optional props to the embeddable feature components
  • This enables users to use hooks and context
  • It's close to the place of use
• I think we should add a transformChildProps:
  • This makes the passwordless OTP customization a lot more straightforward
  • Solves always showing sign-in and up on separate routes
  • Helps with the reset password use case.
  • This can trigger navigation by updating the state in the component embedding our feature component
    • Maybe it should be named differently if we advise people to add side effects to it.
    • This could also be solved by adding a separate prop (useHook) that takes a hook we can call, but that might be an overkill.