Use custom translations (i18n)

Ory Elements supports internationalization (i18n) to help you create applications that can be used by users from different locales. This guide will show you how to use custom translations in your Ory Elements components.

Ory Element uses the react-intl library to handle translations. You can provide your own translations for the Ory Elements components by wrapping your application in the IntlProvider component from react-intl and passing your translations as messages.

Using Custom Translations

To use custom translations in your Ory Elements components, you need to follow these steps:

1. Install the react-intl library if you haven't already:

   npm install react-intl

2. Create a translations file (e.g., translations.ts) that contains your translations for different locales. Here is an example:

   translations.ts

   export const messages: Record<string> = {
     en: {
       "login.title": "Login",
       // other messages...
     },
     de: {
       "login.title": "Anmeldung",
     },
   }

   note

   The keys in the messages object should match the keys used in the Ory Elements components. You can find the full original files in the GitHub repository of Ory Elements.

3. Wrap your application in the IntlProvider component and pass your translations as messages. Here is an example of how to do this in a Next.js application:

   Next.js App Router

   layout.tsx

   import { PropsWithChildren } from "react"
   import { IntlProvider } from "react-intl"
   import { messages } from "./translations"
   
   export default function Layout({ children }: PropsWithChildren) {
     return (
       <IntlProvider locale="en" messages={messages.en}>
         {children}
       </IntlProvider>
     )
   }

   Next.js Pages Router

   app.tsx

   import type { NextPage } from "next"
   import { IntlProvider } from "react-intl"
   import { messages } from "./translations"
   
   export default function MyApp({ Component, ...props }: { Component: NextPage }) {
     return (
       <IntlProvider locale="en" messages={messages.en}>
         <Component {...props} />
       </IntlProvider>
     )
   }