CORS error with Organization subdomain placeholders

Knowledge Articles
, , ,
1

Problem statement

After a user authenticates, the application attempts to call the /oauth/token/ endpoint to complete the flow. However, this results in a CORS error (Auth0 is not setting the Access-Control-Allow-Origin header on the response) when the allowed callback URLs of the app include a placeholder on a subdomain such as:

http://{organization_name}.localhost:5173

How can this issue be resolved if it is necessary to redirect the user to an organization-specific sub-domain?

Symptoms

CORS error on the /oauth/token endpoint when the allowed callback URL includes a wildcard or placeholder.
Adding another subdomain (e.g. http://{organization_name}.test.localhost:5173) does work.

Steps to reproduce

  • Create an Organization.
  • Set allowed callback of an Application that is enabled for that Organization to include a placeholder (e.g. http://{organization_name}.localhost:3000) or wildcard (e.g. http://*.com:3000) on a subdomain.
  • Log in through a flow such as Auth Code + PKCE (SPA) and notice a CORS error upon calling the /oauth/token.

Cause

The domain http://{organization_name}.localhost:3000 will not work because Auth0 requires 3 “labels” in the hostname before a placeholder/wildcard is evaluated. This is a simple way of protecting customers from accidentally using a wildcard on the top-level domain, such as http://*.com:3000. However, the following URL http://{organization_name}.localhost.localdomain:3000 will indeed work.

Solution

A possible solution would be to include the explicit domains in the allowed callback URL section for an application.

Since the hostname requires 3 “labels”, please use http://{organization_name}.localhost.localdomain:3000 instead.