CORS error while sending HEAD /oauth/v2/authorize request in a Custom Login UI

Self hosted Zitadel.
Following the guide from here: https://zitadel.com/docs/guides/integrate/login-ui

Hello! We are implementing a custom UI and meet the CORS error when using the browser to send the request:

curl --location 'http://localhost:8080/oauth/v2/authorize?response_type=code&code_challenge_method=S256&client_id=324815535030206467&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=openid%20profile%20email%20offline_access%20urn%3Azitadel%3Aiam%3Aorg%3Aprojects%3Aroles%20urn%3Azitadel%3Aiam%3Aorg%3Aid%3A324814162200887299%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3A324815150295023619%3Aaud%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3Azitadel%3Aaud&prompt=none&code_challenge=UrPOuWbiqzspYs0nqM7MiXKS9Y63XCn4-5IQNSIHMOg&state=any_state&nonce=VXFtNDZrd3d5M2JHTzZHbFF-dGxYYWNmdmEyRFBYNERjWnhfdmQ5UG1PMmc2' \
--header 'x-zitadel-login-client: 324821241380732931' \
--header 'x-zitadel-forwarded: http://localhost:3000' \
--header 'Cookie: zitadel.useragent=MTc1NTUyNDg0OXxxckVLcklpYy1kTlBVOVRpaEVnNE9lUHVMMEFHTjBFRTlWZHdjY2RpbVJrbDYzbzVOQm1rZEl0ZVRKYlRmaFRpSF9GMHVqdFM4OUJBRXFPQU5VeEhDUzlyRDJnT1FnPT18IvG5wuz-v_sJ8PP3_gqb1_1ts3v7HvknF1BJs4fPgwI='

curl --location 'http://localhost:8080/oauth/v2/authorize?response_type=code&code_challenge_method=S256&client_id=324815535030206467&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=openid%20profile%20email%20offline_access%20urn%3Azitadel%3Aiam%3Aorg%3Aprojects%3Aroles%20urn%3Azitadel%3Aiam%3Aorg%3Aid%3A324814162200887299%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3A324815150295023619%3Aaud%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3Azitadel%3Aaud&prompt=none&code_challenge=UrPOuWbiqzspYs0nqM7MiXKS9Y63XCn4-5IQNSIHMOg&state=any_state&nonce=VXFtNDZrd3d5M2JHTzZHbFF-dGxYYWNmdmEyRFBYNERjWnhfdmQ5UG1PMmc2' \
--header 'x-zitadel-login-client: 324821241380732931' \
--header 'x-zitadel-forwarded: http://localhost:3000' \
--header 'Cookie: zitadel.useragent=MTc1NTUyNDg0OXxxckVLcklpYy1kTlBVOVRpaEVnNE9lUHVMMEFHTjBFRTlWZHdjY2RpbVJrbDYzbzVOQm1rZEl0ZVRKYlRmaFRpSF9GMHVqdFM4OUJBRXFPQU5VeEhDUzlyRDJnT1FnPT18IvG5wuz-v_sJ8PP3_gqb1_1ts3v7HvknF1BJs4fPgwI='

We receive the error after sending a preflight request which doesn't return the headers in the Access-Control-Allow-Origin header.
How to set up Zitadel to solve this problem? (http://localhost:3000http://localhost:3000 is added to redirect urls of the application).

PS. I can complete full OIDC flow using Postman but browser meets the CORS error

ZITADEL Docs

In the following guides you will learn how to create your own login UI with our APIs. The different scenarios like username/password, external identity provider, etc. will be shown.

CORS error while sending HEAD /oauth/v2/authorize request in a Custom Login UI

curl --location 'http://localhost:8080/oauth/v2/authorize?response_type=code&code_challenge_method=S256&client_id=324815535030206467&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=openid%20profile%20email%20offline_access%20urn%3Azitadel%3Aiam%3Aorg%3Aprojects%3Aroles%20urn%3Azitadel%3Aiam%3Aorg%3Aid%3A324814162200887299%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3A324815150295023619%3Aaud%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3Azitadel%3Aaud&prompt=none&code_challenge=UrPOuWbiqzspYs0nqM7MiXKS9Y63XCn4-5IQNSIHMOg&state=any_state&nonce=VXFtNDZrd3d5M2JHTzZHbFF-dGxYYWNmdmEyRFBYNERjWnhfdmQ5UG1PMmc2' \
--header 'x-zitadel-login-client: 324821241380732931' \
--header 'x-zitadel-forwarded: http://localhost:3000' \
--header 'Cookie: zitadel.useragent=MTc1NTUyNDg0OXxxckVLcklpYy1kTlBVOVRpaEVnNE9lUHVMMEFHTjBFRTlWZHdjY2RpbVJrbDYzbzVOQm1rZEl0ZVRKYlRmaFRpSF9GMHVqdFM4OUJBRXFPQU5VeEhDUzlyRDJnT1FnPT18IvG5wuz-v_sJ8PP3_gqb1_1ts3v7HvknF1BJs4fPgwI='

curl --location 'http://localhost:8080/oauth/v2/authorize?response_type=code&code_challenge_method=S256&client_id=324815535030206467&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=openid%20profile%20email%20offline_access%20urn%3Azitadel%3Aiam%3Aorg%3Aprojects%3Aroles%20urn%3Azitadel%3Aiam%3Aorg%3Aid%3A324814162200887299%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3A324815150295023619%3Aaud%20urn%3Azitadel%3Aiam%3Aorg%3Aproject%3Aid%3Azitadel%3Aaud&prompt=none&code_challenge=UrPOuWbiqzspYs0nqM7MiXKS9Y63XCn4-5IQNSIHMOg&state=any_state&nonce=VXFtNDZrd3d5M2JHTzZHbFF-dGxYYWNmdmEyRFBYNERjWnhfdmQ5UG1PMmc2' \
--header 'x-zitadel-login-client: 324821241380732931' \
--header 'x-zitadel-forwarded: http://localhost:3000' \
--header 'Cookie: zitadel.useragent=MTc1NTUyNDg0OXxxckVLcklpYy1kTlBVOVRpaEVnNE9lUHVMMEFHTjBFRTlWZHdjY2RpbVJrbDYzbzVOQm1rZEl0ZVRKYlRmaFRpSF9GMHVqdFM4OUJBRXFPQU5VeEhDUzlyRDJnT1FnPT18IvG5wuz-v_sJ8PP3_gqb1_1ts3v7HvknF1BJs4fPgwI='

ZITADEL Docs

In the following guides you will learn how to create your own login UI with our APIs. The different scenarios like username/password, external identity provider, etc. will be shown.

CORS error while sending HEAD /oauth/v2/authorize request in a Custom Login UI

CORS error while sending HEAD /oauth/v2/authorize request in a Custom Login UI

Continue the conversation

ZITADEL

Continue the conversation

ZITADEL

Similar Threads