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 Preact application
npm i @ory/elements-preact --save
Ory Elements provides you with the ability to theme your
application. Wrap your components with
<ThemeProvider />
and import
style.css
from Ory Elements.
It is best to add this to your main.tsx
file since it
will be reused across your project. All source code is available
in the Ory Elements
examples/preact-spa
folder.
// Ory Elements
// optional global css reset
import "@ory/elements-preact/assets/normalize.css"
// optional fontawesome icons
import "@ory/elements-preact/assets/fa-brands.min.css"
import "@ory/elements-preact/assets/fa-solid.min.css"
import "@ory/elements-preact/assets/fontawesome.min.css"
// optional fonts
import "@ory/elements-preact/assets/inter-font.css"
import "@ory/elements-preact/assets/jetbrains-mono-font.css"
// required styles for Ory Elements
import "@ory/elements-preact/style.css"
const Main = () => {
return (
<ThemeProvider themeOverrides={customTheme}>
<Router>
<Route path="/" component={Dashboard} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Register} />
<Route path="/verification" component={Verification} />
<Route path="/recovery" component={Recovery} />
<Route path="/settings" component={Settings} />
</Router>
</ThemeProvider>
)
}
render(<Main />, document.getElementById("app") as HTMLElement)
Ory Elements supports integrating with Ory out of the box with the
<UserAuthCard/>
,
<UserSettingsCard />
and
<UserErrorCard />
.
Each flow can be mapped using these components with only a few lines of code.
Let's create a login example, create login.tsx
.
export const Login = () => {
// do sdk calls to get the flow data from Ory
return flow ? (
<UserAuthCard
flow={flow}
flowType={"login"}
additionalProps={{
forgotPasswordURL: "/recovery",
signupURL: "/signup",
}}
title={"Login"}
includeScripts={true}
onSubmit={submitFormData}
/>
) : (
<div>Loading...</div>
)
}
Generated using TypeDoc