Auth0 Home Blog Docs

Auth.js v9 CORS

auth0js
cors

#1

Hello,
we’re migrating from auth0 v7 to auth v9, right now we’re using auth0.Authentication to correctly log in the user and refresh token. For our users we provide custom subdomains like:
subdomain1.domain.com
subdomain2.domain.com
for each internal tenant in our system.
We’re using

    this.auth0 = new auth0.Authentication(null, {
            domain: environment.auth0domain,
            clientID: environment.auth0clientID,
            responseType: 'openid token id_token',
            scope: 'openid name email offline_access'
        });

for initialization and

          // get accessToken
           this.auth0.login({
                realm: 'Username-Password-Authentication',
                username,
                password,
            }, (err, authResult) => {
                  // ...
           });

         // refresh token
         this.auth0.oauthToken({
            grantType: 'refresh_token',
            refresh_token: this.cookiesService.get('refreshToken')

        }, (err, response) => {
           // ...
        });

for getting/refreshing token. Everything is fine until I switch off “Lagacy Lock API” in auth0 tenant settings - then we’re getting:

“Failed to load https://OUR-TENANT.auth0.com/oauth/token: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://localhost:4200’ is therefore not allowed access.”

and auth0 raises:

Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

What can we do in that situation?


#2

oauthToken shouldn’t be used from a browser. You should use webAuth.login for login and webAuth.checkSession for getting new tokens. You’re seeing the CORS errors because, once the Legacy Lock API is disabled, the oauth/token endpoint will only work for native/backend clients, where there’s no CORS issues.