Provide way to use client-side router for additionalProps links

[Omar A. Hachach]

Preflight checklist

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

Describe your problem

Having the additonalProps links be an <a> tag forces a full refresh each time. This is a UX problem, as we want to utilize our client-side router.

Describe your ideal solution

I imagine a way to either pass the component itself to the ThemeProvider. I.e. having the Provider accept a linkComponent:

export type ThemeProviderProps = {
  theme?: "light" | "dark"
  themeOverrides?: Partial<Theme>
  children?: React.ReactNode
  LinkComponent?: React.ElementType
}

This only has the issue of having the differing navigation libraries not having the same support certain features (children for links, having href vs to as the link prop etc.), so I am not in favor of this way. (Although, this could be omitted by defining your own component which wraps your link component)

Two more idiomatic solutions would have having either the ThemeProvider or UserAuthCard itself accept a constructor like so:

interface LinkProps {
    children: React.ReactNode
    link: string
    icon?: React.ReactNode
    props?: object
}

export type RegistrationSectionAdditionalProps = {
  loginURL?: string | (props: LinkProps) => JSX.Element
}

This way any component can be used, with a string just using a <a> tag.

The other idiomatic solution would be to accept an onClickHandler which could then use the navigation library's navigation functionality:

export type RegistrationSectionAdditionalProps = {
  loginURL?: string | (link: string) => void
}

Workarounds or alternatives

None

Version

v0.0.1-alpha.27

Additional Context

I'm available to help with this feature.