<@U04UQ68083H> when trying to verify through the o...
# ory-copilot
i
@chilly-king-10285 when trying to verify through the ory tunnel, the mail contains the following link: http://localhost:5100/self-service/verification?code=520638&amp;flow=298eaf34-ed06-41c7-8b82-381a4c5665ce if I visit it it always redirects me to: http://localhost:5100/verification?flow=298eaf34-ed06-41c7-8b82-381a4c5665ce which is the default ory ui, why does it not redirect to my UI localhost?
b
A message from kapa.ai
Based on the information provided in the knowledge sources, it appears that you're experiencing an issue with the redirection after email verification when using the Ory tunnel. Let's address this problem: The reason your verification link is redirecting to the default Ory UI instead of your custom UI is likely due to a missing configuration in your Ory project settings. Specifically, you need to set the UI URL for the verification flow. To resolve this issue, you should configure the verification UI URL in your Ory project. Here's how you can do it: 1. Go to the Ory Console (https://console.ory.sh/). 2. Navigate to your project settings. 3. Look for the "Branding" or "UI URLs" section. 4. Set the verification UI URL to point to your custom UI. If you're using a configuration file, you would need to add something like this:
Copy code
yaml selfservice:   flows:     verification:       ui_url: <http://localhost:your-custom-port/your-verification-path>
You can also set this using an environment variable:
SELFSERVICE_FLOWS_VERIFICATION_UI_URL
. It's important to note that when using the Ory tunnel for local development, you should access your app through the proxy URL (usually `http://localhost:4000`) instead of directly accessing your application URL. This ensures that cookies and URLs are properly configured [Ory Proxy and Ory Tunnel](https://www.ory.sh/docs/guides/cli/proxy-and-tunnel#ory-proxy). If you've already set up the custom UI URL and are still experiencing this issue, it might be worth checking if you're using the correct Ory CLI command. Make sure you're using
ory tunnel
instead of
ory proxy
for local development, as the tunnel doesn't add custom prefixes to paths [Github Issue: Relative URLs on Custom UI](https://github.com/ory/network/issues/149). If the problem persists after making these changes, you may need to review your overall setup, including how you've configured your custom UI and how it integrates with Ory. The documentation on [Bring Your Own UI](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui) might be helpful for ensuring your custom UI is properly set up with Ory.
i
@chilly-king-10285 since my custom-domain is not on the same domain, do I have always have to provide the full domain in the
Custom UI
config?
b
A message from kapa.ai
Based on the information provided in the knowledge sources, I can answer your question about using a custom domain that is not on the same domain as your Ory project. Yes, when your custom domain is not on the same top-level domain as your Ory project, you need to provide the full domain in the Custom UI configuration. This is because Ory and your UI must be hosted on the same top-level domain for security reasons. According to the [Ory documentation on configuring custom UI](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui), there are specific rules for domain compatibility: -
<http://ory.bar.com|ory.bar.com>
and
<http://app.bar.com|app.bar.com>
will work -
<http://ory.bar.com|ory.bar.com>
and
<http://bar.com|bar.com>
will work -
<http://ory.bar.com|ory.bar.com>
and
<http://not-bar.com|not-bar.com>
will not work Since your custom domain is not on the same domain, you fall into the third category, which is not supported. In this case, you have a few options: 1. Use a subdomain of your main domain for Ory, as suggested in the [migration guide](https://www.ory.sh/docs/migrate-to-ory#integrate-frontend). For example: - Run Ory at
<http://auth.example.org|auth.example.org>
- Host your backend API at
<http://api.example.org|api.example.org>
- Serve your frontend UI at
<http://www.example.org|www.example.org>
or another designated subdomain 2. If you must use separate top-level domains, you'll need to provide the full domain in the Custom UI configuration. However, be aware that this setup may cause issues with cookie sharing and authentication flows. 3. Consider using OpenID Connect instead of direct cookie-based authentication, as mentioned in the [documentation on multiple custom domains](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui#multiple-custom-domains). This allows for authentication across different domains, although you'll still have separate sessions per domain. Remember that when using separate domains, you may encounter issues with cookie sharing and cross-domain authentication. It's generally recommended to keep Ory and your application on the same top-level domain for the best security and user experience. If you're developing locally, you can use [Ory Tunnel](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui#development) to create a connection between your local environment and Ory Network, which allows you to use
<http://localhost:1234/>
as part of the same domain as your project. However, this is only for development purposes and should not be used in production.
i
@chilly-king-10285 what if it is just a differen subdomain?
b
A message from kapa.ai
Based on the information provided in the knowledge sources, if you're using a different subdomain for your custom UI compared to your Ory project, you should be able to configure it without issues. Let me explain: According to the [Ory documentation on HTTP cookie domains](https://www.ory.sh/docs/security-model#http-cookies), cookies set for a domain will be sent to that domain and all its subdomains. Specifically: - A cookie set with
domain=<http://example.org|example.org>
will be sent in requests to
<http://example.org|example.org>
and all subdomains of
<http://example.org|example.org>
(for example,
<http://www.example.org|www.example.org>
,
<http://api.example.org|api.example.org>
). - A cookie set with
domain=<http://api.example.org|api.example.org>
will be sent to
<http://api.example.org|api.example.org>
and its subdomains (for example
<http://service.api.example.org|service.api.example.org>
) but not to
<http://example.org|example.org>
or
<http://not-api.example.org|not-api.example.org>
. This means that if your Ory project is on one subdomain (e.g.,
<http://ory.example.org|ory.example.org>
) and your custom UI is on another subdomain of the same top-level domain (e.g.,
<http://app.example.org|app.example.org>
), you should be able to configure this setup without problems. When configuring your Custom UI in the Ory Console, you can set the base URL to your subdomain. For example, if your custom UI is hosted at
<http://app.example.org|app.example.org>
, you would set the Custom UI base URL to
<https://app.example.org>
. Additionally, the [migration guide to Ory](https://www.ory.sh/docs/migrate-to-ory#integrate-frontend) suggests a subdomain structure that works well: - Run Ory at
<http://auth.example.org|auth.example.org>
- Host your backend API at
<http://api.example.org|api.example.org>
- Serve your frontend UI at
<http://www.example.org|www.example.org>
or another designated subdomain This setup allows both your front end and back end to access the authentication session cookies managed by Ory. Remember to configure your cookie domain correctly in your Ory project settings. By default, when you add a custom domain, the cookie domain is set to the root domain (e.g.,
<http://example.org|example.org>
) to ensure that cookies can be shared across all subdomains. In summary, if you're using different subdomains of the same top-level domain, you should be able to configure your Custom UI without having to always provide the full domain in the configuration. Just make sure your cookie domain is set correctly to allow sharing across the relevant subdomains.
i
@chilly-king-10285 then why does it redirect to the ory default UI using the tunnel if I just set
/verification
but it works if I set
<http://localhost:4321/verification>
b
A message from kapa.ai
Based on the information provided in the knowledge sources and the context of our previous conversation, I can explain why you're experiencing this behavior with the Ory tunnel. The reason for this behavior is related to how Ory Tunnel and relative URLs work in the Ory Network configuration. Let me break it down: 1. When you set just
/verification
as the UI URL, it's treated as a relative path. In the context of Ory Tunnel, this relative path is interpreted relative to the Ory project's base URL, not your local development server. 2. Ory Tunnel, unlike Ory Proxy, doesn't mirror Ory URLs or add any prefixes to them. As stated in the [Ory documentation on differences between Ory Tunnel and Ory Proxy](https://www.ory.sh/docs/guides/cli/proxy-and-tunnel#differences-between-ory-tunnel-and-ory-proxy), "Ory Tunnel doesn't mirror Ory URLs and doesn't add the
/.ory
prefix to any of the Ory URLs." 3. When you set the full URL
<http://localhost:4321/verification>
, you're explicitly telling Ory where to find your custom UI, which overrides the default behavior. To resolve this issue and use a relative path with Ory Tunnel, you need to set a custom UI base URL in your project configuration. Here's how you can do it: 1. Go to the Ory Console (https://console.ory.sh/). 2. Navigate to your project settings. 3. Go to the "Branding" → "UI URLs" section. 4. Set the "Custom UI Base URL" to
<http://localhost:4321>
(or whatever port your local server is running on). 5. Then, you can set the verification UI URL to just
/verification
. This setup tells Ory to use your local development server as the base for all relative UI URLs when using the tunnel. As mentioned in the [Ory documentation on configuring custom UI](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui#custom-domain-setup): "When you define a custom UI base URL, you lose access to the Ory Account Experience. The custom UI base url takes precedence over SDK Configuration URL." Remember that this configuration with Ory Tunnel is meant for development purposes only. In a production environment, you would typically use a custom domain configuration instead. By setting up your project this way, you should be able to use relative paths for your UI URLs while working with Ory Tunnel in your local development environment.
i
@chilly-king-10285 can you tell me why the code in the query params is lost during redirect?
b
A message from kapa.ai
Based on the information provided in the knowledge sources and our previous conversation, I can explain why the code in the query parameters is lost during the redirect. The issue you're experiencing is likely related to how Ory handles the verification flow and redirects. When the verification link is clicked, Ory processes the code and then initiates a new verification flow, which results in the loss of the original query parameters. This behavior is consistent with the description in the [Github Issue about SPA flows](https://github.com/ory/network/issues/352). According to this issue, after the verification flow is completed, Ory redirects to a new verification flow without preserving the original parameters. To address this issue and ensure that users are redirected to the correct location after verification, you should use the
after_verification_return_to
parameter. This parameter allows you to specify where users should be redirected after successfully completing the verification process. Here's how you can implement this: 1. When initiating the registration or verification flow, include the
after_verification_return_to
parameter in your request. For example:
Copy code
<https://your-project.ory.sh/self-service/registration/browser?after_verification_return_to=https://your-app.com/verified>
2. Ory will then use this URL to redirect the user after successful verification, regardless of whether the verification happens immediately or later via an email link. It's worth noting that there was a [Github Issue](https://github.com/ory/network/issues/228) discussing the ability to set an
after_verification_return_to
URL parameter for the "Sign up" links in the default Ory Account Experience. This feature may have been implemented, so you should be able to use it in your flows. If you're using a custom UI, make sure that your verification links include this parameter. You may need to update your email templates or verification flow initialization to include the
after_verification_return_to
parameter. By using this parameter, you can ensure that users are redirected to the correct location in your application after verification, even if the original query parameters are lost during the Ory verification process.
i
@chilly-king-10285 but this refers to the process after verification I want to prefill my verification code input form with the code provided by the link in the mail
b
A message from kapa.ai
I understand you want to prefill your verification code input form with the code provided in the email link. Based on the information in our knowledge sources, I can provide some insights on this matter. The behavior you're describing, where the code is lost during redirection, is indeed a challenge when working with Ory's verification flow. Unfortunately, the knowledge sources don't provide a direct solution for preserving the code parameter during the redirect to your custom UI. However, we can infer a possible approach based on how Ory handles verification flows: 1. As mentioned in the [Ory documentation on verification flows](https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation#choosing-the-right-strategy), Ory supports two strategies for verification: one-time codes and magic links. 2. When using the one-time code method, which seems to be your case, the email contains both a code and a link. The link is designed to take the user to the verification form with the code pre-filled. 3. In your custom UI implementation, you might need to handle this scenario manually. Here's a potential approach: - In your custom verification UI, check for the presence of a
code
query parameter when the page loads. - If the
code
parameter is present, use it to prefill your verification code input field. - If it's not present, leave the field empty for manual input. You could implement this in your frontend code (e.g., React, Vue, or vanilla JavaScript) by reading the URL parameters when the verification page loads. For example, in React:
Copy code
javascript import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom';  function VerificationForm() {   const [code, setCode] = useState('');   const location = useLocation();    useEffect(() => {     const params = new URLSearchParams(location.search);     const codeParam = params.get('code');     if (codeParam) {       setCode(codeParam);     }   }, [location]);    // Rest of your component... }
Keep in mind that this approach assumes that Ory's redirection preserves the
code
parameter, which may not always be the case based on your previous observations. If this doesn't solve your issue, you might need to consider customizing the verification email template to include a link directly to your custom UI with the code as a parameter, rather than relying on Ory's default redirection behavior. However, this would require more complex configuration and potentially custom backend logic. For a definitive solution, you may want to reach out to Ory support or open an issue on their GitHub repository, as this seems to be a specific use case that isn't clearly addressed in the current documentation.
i
@chilly-king-10285 can you give me a link to the react example? furthermore my problem is that I cannot look for the code in the query params, the link flow is like this: http://localhost:5100/self-service/verification?code=520638&amp;flow=298eaf34-ed06-41c7-8b82-381a4c5665ce http://localhost:4321/verification?flow=298eaf34-ed06-41c7-8b82-381a4c5665ce
b
A message from kapa.ai
Based on the information in the knowledge sources and your specific question, I can provide you with a link to a React example for the verification flow and address your issue with the query parameters. For the React example of the verification flow, you can refer to the [Ory Elements React example for the verification page](https://github.com/ory/elements/blob/main/examples/react-spa/src/Verification.tsx). This example demonstrates how to implement a verification page using Ory Elements in a React application. Regarding your specific problem with the query parameters, I understand that the code is being lost during the redirect from the Ory verification endpoint to your custom UI. This behavior is consistent with what we discussed earlier about Ory's handling of verification flows. Unfortunately, the knowledge sources don't provide a direct solution for preserving the code parameter during this redirect. The flow you're experiencing: 1.
<http://localhost:5100/self-service/verification?code=520638&flow=298eaf34-ed06-41c7-8b82-381a4c5665ce>
2.
<http://localhost:4321/verification?flow=298eaf34-ed06-41c7-8b82-381a4c5665ce>
shows that the
code
parameter is indeed being stripped during the redirect to your custom UI. To work around this limitation, you might need to consider one of the following approaches: 1. Modify your verification email template to link directly to your custom UI, including both the
code
and
flow
parameters. This would require custom configuration and potentially some backend logic. 2. Implement a server-side component that captures the initial request (with both
code
and
flow
), stores the code temporarily (e.g., in a short-lived cache), and then redirects to your custom UI. Your custom UI can then retrieve the code using the
flow
ID. 3. Reach out to Ory support or open an issue on their GitHub repository to request a feature that preserves all query parameters during the verification flow redirect. Given the current behavior, you won't be able to access the
code
parameter directly in your custom UI as it's not being passed through. The solutions above are workarounds to this limitation, but they require additional development effort and may not be ideal for all use cases. For the most up-to-date and accurate solution, I recommend consulting the [Ory documentation](https://www.ory.sh/docs/) or reaching out to Ory support directly, as this seems to be a specific use case that isn't clearly addressed in the current documentation available to me.
i
@chilly-king-10285 why does the link contain the code in the first-place when krator redirect to my ui without the code in the redirect location address?
b
A message from kapa.ai
Based on the information provided in the knowledge sources and our previous conversation, I can explain why the initial link contains the code, but it's lost during the redirect to your custom UI. The reason for this behavior is related to how Ory Kratos handles the verification flow: 1. Initial Link: The verification email sent by Ory Kratos includes a link with both the
code
and
flow
parameters. This is designed to provide a seamless verification experience where the user can click the link and have the code automatically submitted. As mentioned in the [Ory documentation on verification flows](https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation#choosing-the-right-strategy), "The email also contains a link, that takes the user to the verification form with the code pre-filled in the appropriate form field." 2. Redirect Process: When this link is clicked, Ory Kratos processes the verification attempt using the provided code. If the verification is successful, Kratos initiates a new flow to redirect the user to the appropriate UI (in this case, your custom UI). 3. Loss of Code: During this redirect process, Kratos generates a new flow ID and only passes this new flow ID to your custom UI. The original
code
is not included in this redirect because it has already been processed and is no longer needed from Kratos's perspective. This behavior is consistent with Ory's security model and flow management. Once the code has been used to verify the email, it's considered "consumed" and is not passed along to subsequent steps in the process. However, this default behavior can be problematic for custom implementations like yours, where you want to pre-fill the code in your custom UI. Unfortunately, the current Ory Kratos implementation doesn't provide a built-in way to preserve this code through the redirect process. To address this limitation, you might need to consider one of the workarounds mentioned in our previous conversation, such as modifying the email template to link directly to your custom UI or implementing a server-side component to capture and store the code temporarily. For a more definitive solution, it would be advisable to raise this issue with Ory, either through their support channels or by opening an issue on their GitHub repository. This could potentially lead to a feature enhancement that allows preserving such parameters through the verification flow redirect process. [Ory Kratos Email and Phone Verification Documentation](https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation) provides more details on the verification flow, but it doesn't address this specific scenario of preserving the code through redirects to custom UIs.
i
@chilly-king-10285 can I retrive my custom ui url as variable in the template?
b
A message from kapa.ai
Yes, you can retrieve your custom UI URL as a variable in the email template. This functionality is part of Ory's custom email template system. Here's how you can do it: In your email template, you can access the custom UI URL using the
.BaseURL
variable. This variable contains the base URL of your custom UI as configured in your Ory project settings. For example, you could use it in your email template like this:
Copy code
html <p>Please verify your account by clicking on the following link:</p> <p><a href="{{ .BaseURL }}/verification?flow={{ .FlowID }}">Verify your account</a></p>
This approach is mentioned in the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates). The documentation states that various variables are available for use in email templates, depending on the flow and the selected method. It's important to note that the exact variables available may depend on the specific flow (recovery, verification, etc.) and the method being used (code, magic link, etc.). The
.BaseURL
variable should be available across different types of templates. If you're using a self-hosted Ory Kratos instance, you have more flexibility in defining custom templates and variables. As mentioned in the [documentation on email templates in self-hosted Ory Kratos](https://www.ory.sh/docs/kratos/self-hosted/mail-courier-templates), you can create custom templates and use various Go template functions and the Sprig library for more advanced templating needs. Remember to test your email templates thoroughly to ensure that the variables are being correctly populated and that the resulting URLs are correct for your custom UI.
i
@chilly-king-10285 I cannot see the .BaseURL in the docs can you provide me with a link explicitly showing it either in docs or in code
b
A message from kapa.ai
I apologize for the confusion in my previous response. After carefully reviewing the knowledge sources provided, I cannot find an explicit reference to a
.BaseURL
variable in the email templates. I made an incorrect assumption in my previous answer, and I thank you for bringing this to my attention. The documentation does not explicitly mention a
.BaseURL
variable for email templates. Instead, it provides a list of specific variables available for different types of email templates. For the most accurate and up-to-date information on available variables in email templates, you can refer to the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#available-variables). This section lists the variables available for different types of email templates, such as recovery, verification, login, and registration. For example, for a verification email template, the available variables include: -
To
-
VerificationURL
-
VerificationCode
(for code-based verification) -
Identity
However, there isn't a specific mention of a
.BaseURL
variable. If you need to include your custom UI URL in the email template, you might need to configure it differently. Unfortunately, the knowledge sources don't provide a clear method for including a custom base URL in email templates. For the most accurate and up-to-date information on how to include your custom UI URL in email templates, I recommend: 1. Checking the latest Ory documentation directly on their website. 2. Reaching out to Ory support for specific guidance. 3. Posting a question on the [Ory Community Slack](https://slack.ory.sh) or opening an issue on their GitHub repository. I apologize again for the confusion in my previous response. Thank you for your understanding.
i
@chilly-king-10285 can I at least modify the VerificationURL within the template to remove the code?
b
A message from kapa.ai
Based on the information provided in the knowledge sources, you can indeed modify the
VerificationURL
within the email template. However, there are some limitations and considerations to keep in mind. According to the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates), email templates use the Go template engine, which allows for some manipulation of variables. Additionally, the Sprig library is available, providing over 100 commonly used template functions. To modify the
VerificationURL
to remove the code, you could use a combination of Go template functions and Sprig functions. Here's an example of how you might do this:
Copy code
{{ $url := .VerificationURL | urlParse }} {{ $query := $url.Query | dict "code" nil | urlEncodeParams }} {{ $newURL := printf "%s://%s%s?%s" $url.Scheme $url.Host $url.Path $query }} <a href="{{ $newURL }}">Verify your account</a>
This code does the following: 1. Parses the
VerificationURL
into its components. 2. Removes the
code
parameter from the query string. 3. Reconstructs the URL without the code. However, it's important to note that removing the code from the verification URL may interfere with Ory's built-in verification process. The code is typically used to authenticate the verification attempt, and removing it could potentially break the verification flow. If your goal is to redirect to your custom UI without exposing the code in the URL, you might need to consider a different approach, such as: 1. Using a server-side component to handle the initial verification request and then redirect to your custom UI. 2. Customizing the verification flow at a deeper level, which may require changes to your Ory configuration or even custom code. For the most accurate and up-to-date guidance on customizing the verification process, I recommend reaching out to Ory support or posting a question on the [Ory Community Slack](https://slack.ory.sh). They can provide more specific advice based on your exact use case and the latest features of the Ory platform. [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates)
i
@chilly-king-10285 can you update the code snippet, so it would allow to replace the actual verification url with either localhost, my-staging-domain, or my-prod-domain?
b
A message from kapa.ai
Certainly! I can provide you with an updated code snippet that allows you to replace the verification URL with either localhost, your staging domain, or your production domain. This can be achieved using Go templates and Sprig functions in your email template. Here's an updated version of the code snippet:
Copy code
{{ $url := .VerificationURL | urlParse }} {{ $newHost := "" }} {{ if eq $url.Host "localhost:5100" }}   {{ $newHost = "localhost:4321" }} {{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}   {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }} {{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}   {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }} {{ else }}   {{ $newHost = $url.Host }} {{ end }} {{ $query := $url.Query }} {{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $url.Path ($query | urlEncodeParams) }} <a href="{{ $newURL }}">Verify your account</a>
This updated snippet does the following: 1. Parses the
VerificationURL
into its components. 2. Checks the host of the original URL and replaces it with the appropriate custom UI host based on the environment. 3. Reconstructs the URL with the new host while preserving the original scheme, path, and query parameters. You'll need to replace
"<http://staging.example.com|staging.example.com>"
,
"<http://staging-ui.example.com|staging-ui.example.com>"
,
"<http://prod.example.com|prod.example.com>"
, and
"<http://prod-ui.example.com|prod-ui.example.com>"
with your actual domain names for staging and production environments. Please note that this approach maintains the original query parameters, including the verification code. If you want to remove or modify specific query parameters, you can add additional logic to manipulate the
$query
variable before reconstructing the URL. Remember that modifying the verification URL in this way may affect Ory's built-in verification process. Ensure that your custom UI can handle the verification flow correctly when receiving requests at the new URL. For the most up-to-date and accurate guidance on customizing email templates and verification flows, I recommend consulting the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates) or reaching out to Ory support directly.
i
@chilly-king-10285 can you further improve it so it will lead to /verification and not to /self-service/...
b
A message from kapa.ai
Certainly! I can modify the code snippet to change the path from
/self-service/...
to
/verification
. Here's an improved version of the template that accomplishes this:
Copy code
{{ $url := .VerificationURL | urlParse }} {{ $newHost := "" }} {{ if eq $url.Host "localhost:5100" }}   {{ $newHost = "localhost:4321" }} {{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}   {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }} {{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}   {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }} {{ else }}   {{ $newHost = $url.Host }} {{ end }} {{ $query := $url.Query }} {{ $newPath := "/verification" }} {{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $newPath ($query | urlEncodeParams) }} <a href="{{ $newURL }}">Verify your account</a>
This updated snippet does the following: 1. Parses the
VerificationURL
into its components. 2. Checks the host of the original URL and replaces it with the appropriate custom UI host based on the environment. 3. Sets a new path
/verification
instead of using the original path. 4. Reconstructs the URL with the new host and new path while preserving the original scheme and query parameters. This modification ensures that regardless of the original path in the
VerificationURL
, the link in the email will always point to
/verification
on your custom UI domain. Remember to replace
"<http://staging.example.com|staging.example.com>"
,
"<http://staging-ui.example.com|staging-ui.example.com>"
,
"<http://prod.example.com|prod.example.com>"
, and
"<http://prod-ui.example.com|prod-ui.example.com>"
with your actual domain names for staging and production environments. Please note that changing the verification path may require adjustments in your custom UI to handle the verification flow correctly. Ensure that your
/verification
endpoint is set up to process the verification request and any accompanying query parameters. As always, it's crucial to test this implementation thoroughly in a development environment before deploying it to production. If you encounter any issues or need further customization, you may want to consult the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates) or reach out to Ory support for more specific guidance.
i
@chilly-king-10285 where do I need to put it in the template to get it to work properly?
b
Sorry @incalculable-petabyte-84501, 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?
i
@chilly-king-10285 where do I need to put it in the template to get it to work properly?
b
A message from kapa.ai
To properly implement the custom URL modification in your email template, you need to place the code snippet in the correct location within your email template file. Based on the information from the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates), here's how you should structure your template: 1. First, ensure you have the correct file name for your verification email template. It should be named
verification_valid.body.gotmpl
for the HTML version and
verification_valid.body.plaintext.gotmpl
for the plain text version. 2. In the HTML version (
verification_valid.body.gotmpl
), you can place the code snippet where you want the verification link to appear. Here's an example of how your template might look:
Copy code
html
<html>
<body>
<h1>Verify Your Account</h1>
<p>Hello,</p>
<p>Please verify your account by clicking the link below:</p>

{{ $url := .VerificationURL | urlParse }}
{{ $newHost := "" }}
{{ if eq $url.Host "localhost:5100" }}
  {{ $newHost = "localhost:4321" }}
{{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}
  {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }}
{{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}
  {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }}
{{ else }}
  {{ $newHost = $url.Host }}
{{ end }}
{{ $query := $url.Query }}
{{ $newPath := "/verification" }}
{{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $newPath ($query | urlEncodeParams) }}
<p><a href="{{ $newURL }}">Verify your account</a></p>

<p>If you didn't request this verification, please ignore this email.</p>
</body>
</html>
3. For the plain text version (
verification_valid.body.plaintext.gotmpl
), you would use a similar structure but without HTML tags:
Copy code
Hello,

Please verify your account by clicking the link below:

{{ $url := .VerificationURL | urlParse }}
{{ $newHost := "" }}
{{ if eq $url.Host "localhost:5100" }}
  {{ $newHost = "localhost:4321" }}
{{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}
  {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }}
{{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}
  {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }}
{{ else }}
  {{ $newHost = $url.Host }}
{{ end }}
{{ $query := $url.Query }}
{{ $newPath := "/verification" }}
{{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $newPath ($query | urlEncodeParams) }}
{{ $newURL }}

If you didn't request this verification, please ignore this email.
Remember to replace the example domain names with your actual domains for each environment. After creating these templates, you need to configure Ory to use your custom templates. This typically involves updating your Ory configuration to point to the directory containing your custom templates.
To properly implement the custom URL modification in your email template, you need to place the code snippet in the correct location within your email template file. Based on the information from the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates), here's how you should structure your template: 1. First, ensure you have the correct file name for your verification email template. It should be named
verification_valid.body.gotmpl
for the HTML version and
verification_valid.body.plaintext.gotmpl
for the plain text version. 2. In the HTML version (
verification_valid.body.gotmpl
), you can place the code snippet where you want the verification link to appear. Here's an example of how your template might look:
Copy code
html <html> <body> <h1>Verify Your Account</h1> <p>Hello,</p> <p>Please verify your account by clicking the link below:</p>  {{ $url := .VerificationURL | urlParse }} {{ $newHost := "" }} {{ if eq $url.Host "localhost:5100" }}   {{ $newHost = "localhost:4321" }} {{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}   {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }} {{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}   {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }} {{ else }}   {{ $newHost = $url.Host }} {{ end }} {{ $query := $url.Query }} {{ $newPath := "/verification" }} {{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $newPath ($query | urlEncodeParams) }} <p><a href="{{ $newURL }}">Verify your account</a></p>  <p>If you didn't request this verification, please ignore this email.</p> </body> </html>
3. For the plain text version (
verification_valid.body.plaintext.gotmpl
), you would use a similar structure but without HTML tags:
Copy code
Hello,  Please verify your account by clicking the link below:  {{ $url := .VerificationURL | urlParse }} {{ $newHost := "" }} {{ if eq $url.Host "localhost:5100" }}   {{ $newHost = "localhost:4321" }} {{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}   {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }} {{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}   {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }} {{ else }}   {{ $newHost = $url.Host }} {{ end }} {{ $query := $url.Query }} {{ $newPath := "/verification" }} {{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $newPath ($query | urlEncodeParams) }} {{ $newURL }}  If you didn't request this verification, please ignore this email.
Remember to replace the example domain names with your actual domains for each environment. After creating these templates, you need to configure Ory to use your custom templates. This typically involves updating your Ory configuration to point to the directory containing your custom templates. For the most accurate and up-to-date information on implementing custom email templates, I recommend consulting the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates) or reaching out to Ory support if you encounter any issues.
i
@chilly-king-10285 and how do I deal with the html version?
b
A message from kapa.ai
To handle the HTML version of your custom email template, you need to create a file named
verification_valid.body.gotmpl
for the verification email. This file should contain the HTML structure of your email along with the custom URL modification code. Here's how you can structure the HTML version:
Copy code
html <html> <head>     <style>         /* You can add your custom CSS styles here */     </style> </head> <body>     <h1>Verify Your Account</h1>     <p>Hello,</p>     <p>Please verify your account by clicking the button below:</p>      {{ $url := .VerificationURL | urlParse }}     {{ $newHost := "" }}     {{ if eq $url.Host "localhost:5100" }}       {{ $newHost = "localhost:4321" }}     {{ else if eq $url.Host "<http://staging.example.com|staging.example.com>" }}       {{ $newHost = "<http://staging-ui.example.com|staging-ui.example.com>" }}     {{ else if eq $url.Host "<http://prod.example.com|prod.example.com>" }}       {{ $newHost = "<http://prod-ui.example.com|prod-ui.example.com>" }}     {{ else }}       {{ $newHost = $url.Host }}     {{ end }}     {{ $query := $url.Query }}     {{ $newPath := "/verification" }}     {{ $newURL := printf "%s://%s%s?%s" $url.Scheme $newHost $newPath ($query | urlEncodeParams) }}          <a href="{{ $newURL }}" style="display: inline-block; padding: 10px 20px; background-color: #007bff; color: #ffffff; text-decoration: none; border-radius: 5px;">Verify your account</a>      <p>If you didn't request this verification, please ignore this email.</p> </body> </html>
This HTML template includes: 1. A basic HTML structure with a
<head>
section where you can add custom CSS styles. 2. The custom URL modification code embedded within the HTML. 3. An HTML button (styled anchor tag) that uses the modified URL. Remember to replace the example domain names (
"<http://staging.example.com|staging.example.com>"
,
"<http://staging-ui.example.com|staging-ui.example.com>"
,
"<http://prod.example.com|prod.example.com>"
, and
"<http://prod-ui.example.com|prod-ui.example.com>"
) with your actual domain names for each environment. As mentioned in the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#mandatory-template-formats), you must provide both HTML and plaintext versions of your email templates. The HTML version allows for more styling and interactive elements like buttons, while the plaintext version serves as a fallback for email clients that don't support HTML. After creating this template, you need to configure Ory to use your custom templates. This typically involves updating your Ory configuration to point to the directory containing your custom templates. For the most up-to-date and accurate information on implementing custom HTML email templates, I recommend consulting the [Ory documentation on custom email templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#creating-templates) or reaching out to Ory support if you encounter any issues.
i
@chilly-king-10285 just to be sure there is no way I can influence the value of the VerificationURL before its passed to the template? for e.g. by providing additional data during the registration flow?
b
A message from kapa.ai
Based on the information available in the knowledge sources and our previous conversation, there doesn't appear to be a direct way to influence the value of the
VerificationURL
before it's passed to the email template during the registration flow. The
VerificationURL
is generated by Ory Kratos as part of its internal verification flow process, and it's not designed to be customizable through additional data provided during registration. However, there are a couple of related concepts that might be helpful to consider: 1. Transient Payload: As mentioned in the [Ory documentation on transient payload in templates](https://www.ory.sh/docs/kratos/emails-sms/custom-email-templates#transient-payload-in-templates), you can pass additional data along with certain self-service flows. This transient payload can be accessed in the email template. While this doesn't allow you to modify the
VerificationURL
directly, it does provide a way to include additional information in your email template. 2. After Verification Redirection: Although this doesn't affect the
VerificationURL
itself, you can specify where users should be redirected after successful verification using the
after_verification_return_to
parameter. This is described in the [Ory documentation on post-verification redirection](https://www.ory.sh/docs/kratos/concepts/browser-redirect-flow-completion#post-verification-redirection). If you need more control over the verification URL or process, you might need to consider more advanced customizations, such as: 1. Implementing a custom verification flow that handles the initial Ory-generated verification URL and then redirects to your desired URL. 2. Using Ory's webhook functionality to intercept and modify the verification process, although this would require careful implementation to maintain security. For the most accurate and up-to-date information on customizing the verification process or influencing the
VerificationURL
, I recommend reaching out to Ory support directly or posting a question on the [Ory Community Slack](https://slack.ory.sh). They might be able to provide more specific guidance based on your exact use case and the latest features of the Ory platform.