<@U04UQ68083H> how can I customize the message sho...
# ory-copilot
f
@chilly-king-10285 how can I customize the message shown to user in the UI during an email verification flow?
b
A message from kapa.ai
To customize the message shown to users in the UI during an email verification flow, you can modify the email templates used by Ory Identities. Here's how you can do it: 1. Ory Identities provides default email templates for verification flows, which you can customize to match your branding and requirements [Email verification documentation](https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation#email-templates). 2. You can replace the default templates with custom ones using either the Ory Console or the Ory CLI [Custom email templates documentation](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#using-custom-message-templates). 3. If you're using the Ory Console: - Go to Authentication → Email templates - Select the email template you want to customize - The verification templates will show versions for the method (One time code or link) you have selected in the flow configuration 4. If you're using the Ory CLI: - Get the Ory Identities config file - Encode your custom template to base64 - Add the Base64-encoded custom message templates to the config - Upload the edited config 5. The verification flow uses specific message IDs for different stages. For example: - When a verification code is sent:
Copy code
json      {        "id": 1080003,        "text": "An email containing a verification code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and make sure to use the address you registered with.",        "type": "info"      }
[Verification code sent message](https://www.ory.sh/docs/kratos/concepts/ui-user-interface#an-email-containing-a-verification-code-has-been-sent-to-the-email-address-you-provided-if-you-have-not-received-an-email-check-the-spelling-of-the-address-and-make-sure-to-use-the-address-you-registered-with-1080003) - When verification is successful:
Copy code
json      {        "id": 1080002,        "text": "You successfully verified your email address.",        "type": "success"      }
[Successful verification message](https://www.ory.sh/docs/kratos/concepts/ui-user-interface#you-successfully-verified-your-email-address-1080002) By customizing these templates and messages, you can control what is shown to users during the email verification flow in your UI.
f
@chilly-king-10285 In the ory console, I can only edit the template for the email sent to the user during the verification flow. I don't see any place to customize the message shown in the UI.
b
A message from kapa.ai
Sorry @fierce-pharmacist-13812, I seem to be having a bit of trouble. Don't worry though, I've pinged my support folks and they will try to fix me up! 🧑‍💻 Perhaps try again in 5mins?
f
@chilly-king-10285 how can I update the identity-config to customize the UI message for verification flow?
b
A message from kapa.ai
To update the identity-config and customize the UI message for the verification flow, you can follow these steps using the Ory CLI: 1. First, download the current Ory Identities configuration file:
Copy code
bash ory get identity-config --project <project-id> --workspace <workspace-id> --format yaml > identity-config.yaml
2. Open the
identity-config.yaml
file in a text editor. 3. To customize the UI messages, you need to add or modify the
messages
section under the verification flow configuration. Here's an example of how you can update the config:
Copy code
yaml selfservice:   flows:     verification:       ui:         messages:           1080003:             text: "Your custom message for when a verification code is sent"           1080002:             text: "Your custom message for successful verification"
4. After making your changes, save the file. 5. Update the Ory Identities configuration using the modified file:
Copy code
bash ory update identity-config --project <project-id> --workspace <workspace-id> --file identity-config.yaml
This approach allows you to customize the UI messages for specific message IDs in the verification flow [Titles, Labels & Validation Messages](https://www.ory.sh/docs/kratos/concepts/ui-user-interface#titles-labels--validation-messages). Remember that each message has a specific ID, and you should use the correct ID for the message you want to customize. For example,
1080003
is used for the message when a verification code is sent, and
1080002
is used for the successful verification message. Keep in mind that this method of customization affects the default messages shown in the UI. If you're using a custom UI, you'll need to implement the logic to display these custom messages in your frontend application.
f
@chilly-king-10285 how can I include the user email in the customized message?
b
A message from kapa.ai
To include the user's email in the customized message for the verification flow, you can use template variables in your custom email templates. Here's how you can do it: 1. When customizing your email templates, you can use the
{{ .To }}
variable to include the recipient's email address [Custom email templates documentation](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#using-custom-message-templates). 2. Here's an example of how you can include the email in your custom template:
Copy code
html <p>Hello,</p> <p>We've sent a verification code to your email address: {{ .To }}</p> <p>Please enter this code to verify your account.</p>
3. After creating your custom template, you need to encode it to base64. You can do this using the following command:
Copy code
bash echo "Your custom template" | base64
4. Then, update your
identity-config.yaml
file to include the base64-encoded custom template. Here's an example:
Copy code
yaml courier:   smtp:     from_name: MyProject via Ory     templates:       verification:         valid:           email:             body:               html: "<base64://ENCODED_HTML_TEMPLATE>"               plaintext: "<base64://ENCODED_PLAINTEXT_TEMPLATE>"
5. Finally, update your Ory Identities configuration using the CLI:
Copy code
bash ory update identity-config --project <project-id> --workspace <workspace-id> --file identity-config.yaml
Remember that this method customizes the email template sent to the user, not the UI message displayed in your application. If you want to include the email in the UI message, you'll need to handle this in your custom UI implementation, as the email address should be available in the verification flow data. For the UI message, you can access the email address from the verification flow data and include it in your custom message when rendering your UI. The exact implementation will depend on your frontend framework and how you're integrating with Ory Identities. [Email templates documentation](https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation#email-templates)
f
@chilly-king-10285 updating the ory identity config after adding the field "ui" to include custom messages gives an error saying "additionalProperties ui not allowed". What is the proper way to include custom messages in the config?
b
A message from kapa.ai
I apologize for the confusion in my previous answer. It appears that directly adding a
ui
field with custom messages to the identity configuration is not the correct approach. Let me provide you with the proper way to include custom messages in the Ory identity config. The error you're encountering ("additionalProperties ui not allowed") suggests that the configuration schema doesn't allow adding custom fields directly under the
verification
flow configuration. Instead, you should use the
after
hooks to customize messages. Here's the correct way to include custom messages in the config: 1. First, download your current identity configuration:
Copy code
bash ory get identity-config --project <project-id> --workspace <workspace-id> --format yaml > identity-config.yaml
2. Open the
identity-config.yaml
file in a text editor. 3. Locate the
selfservice.flows.verification
section and add or modify the
after
hooks. Here's an example of how you can update the config to include custom messages:
Copy code
yaml selfservice:   flows:     verification:       after:         default:           - hook: show_verification_ui             config:               messages:                 - text: "Your custom message for verification. Please check your email: {{.Email}}"                   type: info
4. Save the file after making your changes. 5. Update the Ory Identities configuration using the modified file:
Copy code
bash ory update identity-config --project <project-id> --workspace <workspace-id> --file identity-config.yaml
This approach uses the
show_verification_ui
hook to display custom messages in the verification flow. The
{{.Email}}
placeholder will be replaced with the user's email address when the message is displayed. It's important to note that the exact structure and available options may vary depending on your Ory Identities version. If you encounter any issues, you may need to consult the specific documentation for your version or reach out to Ory support for the most up-to-date configuration options. [Ory Network Issue: Error adding webhook in the console](https://github.com/ory/network/issues/328) shows a similar error related to additional properties not being allowed, which suggests that the configuration schema is strict about what fields are permitted. Remember to always validate your configuration changes carefully and test them in a non-production environment before applying them to your live system.
f
@chilly-king-10285 Can i update the custom message in the ory console?
b
A message from kapa.ai
Yes, you can update the custom message for the verification flow directly in the Ory Console. This is often an easier and more user-friendly approach compared to modifying the configuration file manually. Here's how you can do it: 1. Log in to the [Ory Console](https://console.ory.sh/). 2. Navigate to your project. 3. Go to "Authentication" → "Email templates" in the Ory Console. 4. Select the email template you want to customize. For the verification flow, you'll likely want to modify the "Verification" template. 5. The verification templates will show versions for the method (One time code or link) you have selected in the flow configuration. 6. You can then edit the template directly in the console interface, including customizing the messages shown to the user. This method allows you to update the email templates, which include the messages sent to users during the verification flow, without having to manually edit configuration files or use the CLI. Remember that the changes you make in the console will be reflected in the emails sent to users during the verification process. If you want to customize the messages shown in your UI, you'll need to handle that in your frontend application. [Custom email templates documentation](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#using-custom-message-templates) This approach is generally easier and less error-prone than manually editing the configuration file, especially if you're not comfortable with YAML syntax or using the CLI.
f
@chilly-king-10285 I want to customize the message sent to UI instead of the message sent to the email address.
b
A message from kapa.ai
I apologize for the confusion in my previous responses. You're right to point out that you want to customize the message sent to the UI, not the email template. Let me provide you with the correct information for customizing UI messages in the verification flow. Unfortunately, the knowledge sources provided don't contain specific information about customizing UI messages directly through the Ory Console or configuration files. The UI messages are typically handled by your custom frontend application that integrates with Ory Identities. However, I can provide you with some guidance based on the available information: 1. Ory Identities provides message IDs and default text for various stages of the verification flow [Titles, Labels & Validation Messages](https://www.ory.sh/docs/kratos/concepts/ui-user-interface#titles-labels--validation-messages). For example:
Copy code
json    {      "id": 1080003,      "text": "An email containing a verification code has been sent to the email address you provided.",      "type": "info"    }
2. These messages are returned as part of the verification flow data when you interact with Ory Identities API. 3. To customize these messages in your UI, you would need to handle them in your frontend application. Your application should: - Retrieve the flow data from Ory Identities - Extract the relevant messages - Display them in your UI, potentially replacing or modifying the default text 4. The exact implementation will depend on your frontend framework and how you've integrated Ory Identities into your application. 5. You might use the message IDs to identify specific messages and replace their content with your custom text. For example, you could create a mapping of message IDs to custom text in your application. Unfortunately, there doesn't seem to be a straightforward way to customize these UI messages directly in the Ory configuration or console. The customization needs to happen in your frontend application. If you need more specific guidance on customizing UI messages, you might want to consult the Ory documentation for your specific version, or reach out to Ory support for the most up-to-date information on UI message customization options.
f
@chilly-king-10285 how can I extract the user email to use when customizing the verification message in my frontend?
b
A message from kapa.ai
To extract the user's email for customizing the verification message in your frontend, you need to access the verification flow data returned by Ory Identities. Here's how you can do it: 1. When you initialize or get a verification flow, Ory Identities returns a JSON object containing the flow details. This object includes a
ui
section with form fields, including the email field. 2. In the verification flow data, look for the
ui.nodes
array. It contains input fields, including one for the email address. Here's an example of what it might look like:
Copy code
json {   "ui": {     "nodes": [       {         "type": "input",         "group": "code",         "attributes": {           "name": "email",           "type": "email",           "required": true,           "disabled": false,           "node_type": "input"         },         "messages": [],         "meta": {           "label": {             "id": 1070007,             "text": "Email",             "type": "info"           }         }       }     ]   } }
[Verification flow data example](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#get-verification-flow) 3. In your frontend application, you can extract the email from this data structure. Here's a pseudocode example of how you might do this:
Copy code
javascript function getEmailFromVerificationFlow(flowData) {   const emailNode = flowData.ui.nodes.find(node =>      node.attributes.name === "email" && node.attributes.type === "email"   );   return emailNode ? emailNode.attributes.value : null; }
4. Once you have extracted the email, you can use it to customize your verification message. For example:
Copy code
javascript const email = getEmailFromVerificationFlow(verificationFlowData); const customMessage = `Please check your email at ${email} for a verification code.`;
Remember that the exact structure of the flow data might vary depending on your Ory Identities version and configuration. Always check the actual data you receive and adjust your code accordingly. Also, note that in some cases, especially when initiating a new verification flow, the email field might not have a value yet. In such cases, you might need to wait for the user to input their email before you can use it in your custom message. [Submit verification flow documentation](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#submit-verification-flow)