Elements

Overview

Ory Elements is a component library that simplifies the process of building login, registration, and account pages for Ory. It reduces the time required to add complex authentication flows to your customer experience, including multi-factor authentication and account recovery. Ory Elements is themeable and modular, allowing you to use only the components you need. It works seamlessly with the React ecosystem (NextJS, React SPA, Preact SPA) and the Express-based ecosystem. The library dynamically adapts the user interface to your Ory identity schema, sign-in, and flow configuration.

Features

• Simplifies the construction of login, registration, and account pages for Ory
• Reduces time required for complex authentication flows such as multi-factor authentication and account recovery
• Themeable and modular, allowing you to use only necessary components
• Works well with the React ecosystem (NextJS, React SPA, Preact SPA)
• Compatible with the Express-based ecosystem
• Dynamically adapts the user interface to your Ory identity schema, sign-in, and flow configuration
• Supports integration with React, Preact, and Express.js (experimental)

Installation

To install Ory Elements in your existing React/Preact or Express.js application, follow these steps:

1. Clone the Ory Elements repository.
2. Choose the relevant example application (React or Preact) from the “examples/” directory.
3. Set up your Ory Network (free) account.
4. Install the Ory CLI (tunnel).
5. Run the Ory CLI tunnel.
6. The tunnel will now mirror the Ory APIs under “http://localhost:4000”. Use the VITE_ORY_SDK_URL export in your React app to point to this URL.
7. Open “http://localhost:3000” in your browser to see Ory Elements in action.

Summary

Ory Elements is a powerful component library that simplifies the process of building login, registration, and account pages for Ory. It reduces development time by providing ready-to-use components for complex authentication flows such as multi-factor authentication and account recovery. The library is themeable, modular, and seamlessly integrates with the React and Express ecosystems. With Ory Elements, you have full control over your application’s data layer and application state management. The library also offers end-to-end testing capabilities using Playwright, making it easy to test your application’s login, registration, recovery, verification, and settings pages. Overall, Ory Elements is a valuable tool for enhancing the authentication experience in your web application.