Guide: Override "" is not valid "email" messages

While Ory Identities does not return a properly translatable message for email validation errors, the message can be overridden using a custom message component.

message-content.tsx:

"use client"
import { OryMessageContentProps } from "@ory/elements-react"
import { DefaultMessage } from "@ory/elements-react/theme"

export function MessageContent({ message }: OryMessageContentProps) {
  if (message.id === 4000001 && message.text.includes('is not valid "email"')) {
    return (
      <DefaultMessage
        message={{
          ...message,
          id: 9999001, // The ID can be used to translate the message to different languages
          text: "The email address you provided is not valid",
        }}
      />
    )
  }

  return <DefaultMessage message={message} />
}

component-overrides.tsx

"use client"
import { OryFlowComponentOverrides } from "@ory/elements-react"
import { MessageContent } from "./message-content"

export const accountExperienceComponents: OryFlowComponentOverrides = {
  Message: {
    Content: MessageContent,
  },
}

To use a custom translation:

const oryProjectConfiguration = {
  project: {
    // ...
  },
  intl: {
    locale: "en",
    customTranslations: {
      en: {
        "identities.messages.9999001":
          "The email address you provided is not valid",
      },
    },
  },
}

Available since: 1.0.0-next.16