<@U04UQ68083H> Is there anything special I need to...
# ory-copilot
b
@chilly-king-10285 Is there anything special I need to do in order to make a custom UI work with an Ory Network oauth app? I hosted https://github.com/ory/kratos-nextjs-react-example on a public endpoint and I set these URLs in Branding > UI URLs. When I trigger an OAuth authorization code flow from my app, the custom UI is shown but I get this message: "403 Forbidden. The anti-CSRF cookie was found but the CSRF token was not included in the HTTP request body (csrf_token) nor in the HTTP Header (X-CSRF-Token)."
b
A message from kapa.ai
Based on the information provided in the knowledge sources, it appears that you're encountering a CSRF (Cross-Site Request Forgery) protection issue when using a custom UI with an Ory Network OAuth app. Here's what you need to do to resolve this issue: 1. Ensure proper CSRF token handling: When submitting forms or making requests from your custom UI, you need to include the CSRF token. The CSRF token is typically provided as a hidden input field named
csrf_token
in the UI nodes returned by Ory. You must include this token in your request body when submitting forms. [Ory Docs: Understanding UI nodes and error messages](https://www.ory.sh/docs/kratos/concepts/ui-user-interface#hidden-input-node) shows an example of how the CSRF token is provided in the UI nodes:
Copy code
json    {      "type": "input",      "group": "default",      "attributes": {        "name": "csrf_token",        "type": "hidden",        "value": "By8X7TPnn/NMtXeDpK6sbshISK3t1WnezAtlMnFA6ZPsxxNmRsG8ks7WpsHMQtTLbxtqKJOiu4aArJok6/GOSw==",        "required": true,        "disabled": false,        "node_type": "input",      },      "messages": [],      "meta": {},    }
2. Include cookies in requests: Make sure that your custom UI is forwarding cookies received from Ory when making requests. This is crucial for maintaining the session and CSRF protection. 3. Use the correct domain: Ensure that your custom UI and the Ory Network are on the same top-level domain. As mentioned in the [Ory Docs: Login flow](https://www.ory.sh/docs/kratos/self-service/flows/user-login), Ory and your UI must be hosted on the same top-level domain. 4. Configure CORS properly: If you're encountering CORS issues, you may need to add your domain to the Ory Project. The [Ory Docs: Integration basics](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#debug) suggest adding your domain to the Ory Project so that all requests from your frontend can be made to Ory under the same domain. 5. Use HTTPS: Ensure that you're using HTTPS for your custom UI, as Ory's cookies have the
Secure
flag enabled by default. If you've implemented these steps and are still encountering issues, you may need to debug further by inspecting the network requests and cookies using browser developer tools. Pay special attention to the
Cookie
and
Set-Cookie
headers, as well as the CSRF token in the request body. For more detailed troubleshooting steps specific to CSRF issues, you can refer to the [Ory Docs: CSRF troubleshooting](https://www.ory.sh/docs/troubleshooting/csrf).