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.
To fix the problem you need the following:
- a paid Auth0 plan
- a custom domain
- minor code changes
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.
- 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 tohttps://cdn.eu.auth0.com
whereeu
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.