https://www.ory.sh/ logo
Join Slack
Powered by
<@U04UQ68083H> How can i extend `@ory/elements-rea...
# ory-copilot
h
@chilly-king-10285 How can i extend 
@ory/elements-react
especially 
Settings
flow with custom fields / data i have in my own backend, accessable from nextjs state management.
b
A message from kapa.ai
To extend the Ory Elements 
Settings
flow with custom fields or data from your own backend (accessible via Next.js state management), you should leverage the composability of the Ory Elements React components. The 
Settings
component allows you to pass custom children, which will be rendered instead of the default Ory settings card. This means you can combine Ory’s flow with your own React components, including those that use your app’s state management or fetch data from your backend. ### How to Extend the Settings Flow 1. Fetch the Ory Settings Flow Use the 
getSettingsFlow
function (for Next.js App Router) to fetch the Ory settings flow on the server side and pass it as a prop to your page component.
Copy code
js    import { getSettingsFlow } from "@ory/nextjs/app"    import config from "@/ory.config"     export default async function SettingsPage(props) {      const flow = await getSettingsFlow(config, props.searchParams)      // ... render your component    }
[getSettingsFlow reference](https://www.ory.sh/docs/elements/reference/@ory/nextjs/app/functions/getSettingsFlow) 2. Render the Settings Component with Custom Children The 
<Settings />
component accepts a 
children
prop. If you provide children, the default Ory settings card will not be rendered. Instead, you can render your own form, combining Ory’s flow data and your custom fields:
Copy code
jsx    import { Settings } from "@ory/elements-react/theme"     function MyCustomSettingsForm({ flow, myCustomData }) {      return (        <form>          {/* Render Ory settings fields using flow data */}          {/* ... */}          {/* Render your custom fields */}          <input name="customField" value={myCustomData} />          {/* ... */}        </form>      )    }     export default function SettingsPage({ flow, myCustomData }) {      return (        <Settings config={config} flow={flow}>          <MyCustomSettingsForm flow={flow} myCustomData={myCustomData} />        </Settings>      )    }
[Settings component reference](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme/functions/Settings) 3. Integrate with Next.js State Management Since you control the children, you can use any state management solution (React context, Redux, Zustand, etc.) to fetch and manage your custom data. Fetch your backend data in a parent component or via hooks, and pass it down to your custom form. 4. Handle Submission You’ll need to handle form submission yourself, combining updates to Ory (using the Ory API for settings) and your backend as needed. ### Summary - Use the 
children
prop of 
<Settings />
to render your own form. - Combine Ory’s flow data with your custom fields and state. - Use your preferred state management to access and update custom backend data. - Handle submission logic for both Ory and your backend. This approach gives you full flexibility to extend the Ory settings flow with any custom logic or fields you require, while still leveraging Ory’s secure authentication and settings management. > The knowledge sources do not provide a full code example for this exact use case, but the composability and override pattern described above is supported and documented in the Ory Elements reference for the 
Settings
component and its 
children
prop [Settings component reference](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme/functions/Settings).
h
@chilly-king-10285 great thanks, can you please give me an example on how to handle the submission? Should be done on the server side in nextjs
b
A message from kapa.ai
I'm sorry, but the knowledge sources do not provide a complete, explicit example of handling a combined Ory Settings flow and custom backend submission on the server side in Next.js. However, I can summarize the relevant approach based on the documented patterns: - For Ory flows, the recommended way is to submit the form data to the Ory API endpoint specified in the 
flow.ui.action
property, using the method in 
flow.ui.method
. This is typically done client-side, but you can proxy the request through your Next.js API routes if you want to handle it server-side. - For your custom backend fields, you would handle them as you normally would in your Next.js API routes. A typical pattern would be: 1. On form submission, send the Ory-related data to the Ory endpoint (as per 
flow.ui.action
). 2. Separately, send your custom data to your own backend API route. If you want to handle both in a single server-side endpoint, you would: - Create a Next.js API route that receives the form data. - In that route, forward the Ory-related data to the Ory API endpoint. - Process your custom data as needed. - Return a combined response to the client. Note: The Ory documentation shows that the form should be submitted to the Ory endpoint as specified in the flow, and does not provide a server-side Next.js example for handling both Ory and custom backend data in a single submission. You can see the Ory submission pattern here:
Copy code
js <form action="{flow.ui.action}" method="{flow.ui.method}">...</form>
or, for SPAs, by sending a POST request to the Ory project URL with the flow ID and form data as JSON [Submit flows](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#submit-flows). If you need to combine both, you will need to implement the logic in your API route, but the exact implementation is not covered in the knowledge sources. If you need a reference for how to submit the Ory flow from the client, see the [custom UI integration example](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#submit-login-flow). In summary: - Submit Ory data to the Ory endpoint as per the flow. - Submit your custom data to your backend. - Combining both in a single server-side handler is possible, but not explicitly documented in the sources. If you need more details or a code example, please refer to the official Ory documentation or the linked reference implementations, as the knowledge sources do not provide a full server-side Next.js example for this scenario.
h
@chilly-king-10285 so i have tried do a simple thing as you showed.
Copy code
import { Settings } from '@ory/elements-react/theme'
import { getSettingsFlow, OryPageParams } from '@ory/nextjs/app'
//import '@ory/elements-react/theme/styles.css'

import config from '@/ory.config'
import { fetchProfile } from '@/app/actions'
import { getServerSession } from '@/client/session'
import { ProfileData } from '@/type'

function MyCustomSettings({ profile }: { profile: ProfileData | null }) {
    return (
        <form>
            <input
                type="text"
                name="country"
                value={profile?.country}
                defaultValue={profile?.country}
            />
        </form>
    )
}

export default async function SettingsPage(props: OryPageParams) {
    const flow = await getSettingsFlow(config, props.searchParams)
    const session = await getServerSession()
    const profile = session ? await fetchProfile(session.session) : null

    if (!flow) {
        return null
    }

    return (
        <div className="mb-8 flex flex-col items-center gap-8">
            <Settings
                flow={flow}
                config={config}
                components={{
                    Card: {}
                }}
            >
                <MyCustomSettings profile={profile} />
            </Settings>
        </div>
    )
}
But this just give me 
SE
because thats my data in 
profile
how can i also make it render the Ory settings?
b
A message from kapa.ai
To render both your custom profile data (like 
country
) and the Ory settings form, you need to include the Ory settings UI nodes in your custom form. When you provide children to the 
<Settings />
component, you are fully responsible for rendering the Ory flow UI—Ory Elements will not render the default settings card for you in this case. How to render the Ory settings fields: 1. Use the Ory flow's 
ui.nodes
: The Ory settings flow contains a 
ui.nodes
array, which describes all the fields (inputs, buttons, etc.) that should be rendered for the settings flow. You need to map over these nodes and render them as form elements. 2. Combine with your custom fields: Render your custom fields (like 
country
) alongside the mapped Ory nodes. Here’s a simplified example of how you might do this:
Copy code
jsx import { Settings } from '@ory/elements-react/theme' import { getSettingsFlow, OryPageParams } from '@ory/nextjs/app' import config from '@/ory.config' import { fetchProfile } from '@/app/actions' import { getServerSession } from '@/client/session' import { ProfileData } from '@/type'  function renderOryNodes(nodes) {   return nodes.map((node, idx) => {     if (node.type === "input" && node.attributes) {       return (         <input           key={idx}           name={node.attributes.name}           type={node.attributes.type}           value={node.attributes.value}           defaultValue={node.attributes.value}           required={node.attributes.required}           disabled={node.attributes.disabled}         />       )     }     // Handle other node types as needed (e.g., buttons, messages)     return null   }) }  function MyCustomSettings({ profile, flow }) {   return (     <form action={flow.ui.action} method={flow.ui.method}>       {/* Render Ory settings fields */}       {renderOryNodes(flow.ui.nodes)}       {/* Render your custom field */}       <input         type="text"         name="country"         value={profile?.country}         defaultValue={profile?.country}       />       {/* Add a submit button if not present in Ory nodes */}       <button type="submit">Save</button>     </form>   ) }  export default async function SettingsPage(props: OryPageParams) {   const flow = await getSettingsFlow(config, props.searchParams)   const session = await getServerSession()   const profile = session ? await fetchProfile(session.session) : null    if (!flow) {     return null   }    return (     <div className="mb-8 flex flex-col items-center gap-8">       <Settings flow={flow} config={config}>         <MyCustomSettings profile={profile} flow={flow} />       </Settings>     </div>   ) }
Key points: - You must render the Ory settings fields yourself if you provide children to 
<Settings />
. - Use the 
flow.ui.nodes
array to render the Ory fields, as shown above. - Combine your custom fields with the Ory fields in the same form. This approach is in line with how Ory expects you to build custom UIs for self-service flows, as described in the documentation: > "Ory Elements is a component library that allows you to build custom user interfaces for Ory self-service flows... You can use Ory Elements to build a custom UI that fits your application's design and user experience, while still leveraging Ory's powerful authentication and identity management capabilities." [Ory Elements Introduction](https://www.ory.sh/docs/elements) If you want to use Ory's default settings card and just add extra fields, you would need to override specific components or extend the default card, but the knowledge sources do not provide a direct example for that. The approach above gives you full control over the rendered form fields, as required when using the 
children
prop with `<Settings />`[Settings component reference](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme/functions/Settings).
2 Views
Open in Slack
PreviousNext
Powered by