Skip to main content

Frontend integration and UI migration

To make authenticated API calls using Ory, start by properly configuring your domain and subdomains. By default the cookie domain is set to the root domain (e.g., example.org) when you add a custom domain. This ensures that cookies can be shared across all subdomains.

  • Example subdomain structure:
    • Run Ory at auth.example.org.
    • Host your backend API at api.example.org.
    • Serve your frontend UI at www.example.org or another designated subdomain.

This setup allows both your front end and back end to access the authentication session cookies managed by Ory.

To begin integrating Ory into your frontend, it's helpful to start with the "protect a page with login" guides that cover the basics of developing with Ory for various programming languages and frameworks, including SDK usage and essential setup steps.

Ory Network has two types of user interfaces. We recommend starting with the built-in Account Experience, which offers a standard user interface, covering all self-service flows with the option to style branding to get you up and running. If you prefer a custom user interface that matches your current design 1:1, Ory allows you to create and style a custom UI that integrates seamlessly with your existing setup. You can do this using the API directly, the SDK for your language, or - if you are working in the React ecosystem - Ory Elements. Ory Elements is a component library designed to make building login, registration, and account pages for Ory easy. It is modular and customizable, allowing you to use only the components you need while tailoring them to fit your implementation's design. The UI created with Ory Elements changes dynamically to adapt to your Ory Network configuration. More details about customizing the user interface with Ory Elements can be found here.