Overview
When logging users in from a Next JS application, a CORS error is thrown by the /authorize endpoint.
The following error can be seen in the browser console:
Access to fetch at ‘[domain/authorize]’ redirected from ‘[applicationdomain/api/auth/login]’ from origin ‘[applicationDomain]’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque resource serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
Cause
The /authorize endpoint does not accept CORS requests, this endpoint must be accessed by a redirect of the user’s browser.
Solution
This could be caused by using Link tags instead of anchor tags when directing users to log in or some other part of the implementation that causes Javascript to call /authorize instead of redirecting the user’s view. Please see Consume Authentication.
Related References
- There is some more information on CORS errors in CORS error when initiating silent auth requests.
- If silent authentication is required, see the article Sync session with Auth0 when using Next.js.
- CORS is not recommended, and the Universal Login flow should always be used where possible. Please see Cross-Origin Authentication for more details.