How to make Auth0 Lock and Cross-Origin Authentication work in a single page app e.g. React / Angular / Ember etc.

auth0-lock.md

How to make Auth0 Lock and Cross-Origin Authentication work in a single page app e.g. React / Angular / Ember etc.

3rd party cookies have been disabled in most browsers and it affects apps that use the Auth0 Lock.

Without proper configuration (which is pretty hard to find from Auth0's documentation) the app won't let users log in. This took me a hours of work to figure out how the changes should be implemented.

So what next

To fix the problem you need the following:

• a paid Auth0 plan
• a custom domain
• minor code changes

Custom domain

Configure a custom domain for your app in Auth0: Branding -> Custom Domains (yes, it is under the BRANDING link in the menu)

The domain can be e.g. login.mydomain.com. Next you need to create a CNAME record in your domain's DNS settings for the new subdomain.

Add the CNAME record and wait 10 minutes or more. It works if you do not get any e.g. Cloudflare errors. You should not see any login page when you navigate to the address.

Minor code changes

• Change your app's name in code from e.g. xxxx.eu.auth0.com to your custom domain e.g. login.mydomain.com.
• Initialize Auth0Lock with configurationBaseUrl set to https://cdn.eu.auth0.com where eu is your region.

An excerpt from Auth0 docs

The CDN URL varies by region. Use https://cdn.[us|eu|au|jp].auth0.com (us for US, eu for Europe, au for Australia, or jp for Japan).

This one is critical.

Initialisation should look something like this:

new Auth0Lock('<your client id>', 'login.mydomain.com', {
  configurationBaseUrl: "https://cdn.eu.auth0.com", // <------ THIS

  auth: {
    redirectUrl: '<your redirect url>',
    responseType: "token",
  }
});

Hope this helps.