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.