Ory Elements is a component library that makes building login, registration and account pages for Ory a breeze.
Ory Elements supports integrating with:
Install Ory Elements into your Express.js application
npm i @ory/elements-markup --save
In Express.js we can render the component server-side and inject the rendered HTML into the page using a template rendering engine. In this case, we could use Handlebars.js.
An important feature of Ory Elements is theming, which can be done through its css variables.
In Express.js Ory Elements provides us with helper routes to expose static css files as well as a way to override those css variables to essentially theme the page.
Create a route for static files static.ts
.
export const registerStaticRoutes: RouteRegistrator = (app) => {
RegisterOryElementsExpress(app, {
...defaultLightTheme, // we can add new theming variables
})
}
Create a view template called login.hbs
which will
accept raw HTML through the card
property.
<div id="login">
{{{card}}}
</div>
Create a new login route in login.ts
which does all
the logic for the login flow.
// do sdk calls to get the flow data
// render the view template `login.hbs`
res.render("login", {
card: UserAuthCard({
title: !(flow.refresh || flow.requested_aal === "aal2")
? "Sign In"
: "Two-Factor Authentication",
...(flow.hydra_login_request && {
subtitle: `To authenticate ${
flow.hydra_login_request.client_client_name ||
flow.hydra_login_request.client_client_id
}`,
}),
flow: flow as SelfServiceFlow,
flowType: "login",
cardImage: "ory-logo.svg",
additionalProps: {
forgotPasswordURL: "recovery",
signupURL: initRegistrationUrl,
logoutURL: logoutUrl,
},
}),
})
An example implementing Ory Elements can be found at ory/kratos-selfservice-ui-node on GitHub.
Generated using TypeDoc