Hi There,
I’m using Vue with the Nuxt framework and the corresponding Auth module with the Auth0 provider. I’m not using any of the auth0 JS (SPA) libraries, but if i need any to fix the issue i will happily use one. Auth0 is configured as SPA and I’m using the Universal Login on a Auth0 domain (so not a custom / my own domain). Locally, the domain I’m using is https:// localhost.
I’m trying to implement silent authentication. A GET request is made to the /auth URL:
const url = new URL(<domain>auth0.com/authorize)
url.searchParams.append('client_id', <my_client_id>)
url.searchParams.append('redirect_uri', <my_callback_uri>)
url.searchParams.append('response_type', 'token')
url.searchParams.append('prompt', 'none')
url.searchParams.append('response_mode', 'web_message')
$axios
.get(url)
.then(res => console.error('res', res))
.catch(err => console.error('err', err))
In the Auth0 log, I see a Successful silent authentication. Unfortunately, I cannot fetch the result as my browser gives me the all known CORS error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<domain>.auth0.com/authorize?client_id=<client_id>&redirect_uri=<callback_uri>&response_type=token&prompt=none&response_mode=web_message. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
In my Auth0 App settings, I’ve added https:// localhost to my Allowed Web Origins and Allowed Origins (CORS)
I’ve read the page on CORS authentication, which advises me to use the Universal Login. If I’m correct, this is not applicable if for silent authentication?
How should i tackle this? Do i need a cross origin verification page? Will that work for local domains as well? Or do I need to make use of a specific function from an Auth0 JS library to tackle this?
Regards.