Custom domain in Angular

Get Help
,
1

I’ve just activated a custom domain for my angular 7 app.
In the documentation I gather I need to change the previous code from

   webAuth = new auth0.WebAuth({
       clientID: this._clientId,
       domain: 'auto0.tenant.url',
       responseType: 'token id_token',
       redirectUri: location.origin + '/callback',
       scope: 'openid',
   });

to

    webAuth = new auth0.WebAuth({
        clientID: this._clientId,
        domain: 'login.mydomain.com',
        responseType: 'token id_token',
        redirectUri: location.origin + '/callback',
        scope: 'openid',
        overrides: {
            __tenant: 'auto0.tenant.url',
            __token_issuer: 'login.mydomain.com'
        },
    });

When I do that I get a build error

error TS2345: Argument of type '{ clientID: string; domain: string; responseType: string; redirectUri: string; scope: string; overrides: { __tenant: string;
__token_issuer: string; }; }' is not assignable to parameter of type 'AuthOptions'.
  Object literal may only specify known properties, and 'overrides' does not exist in type 'AuthOptions'.

I installed auth0 via NPM and the version is “auth0-js”: “^9.10.0”,

Is the documentation outdated?

Please help,
nisbus

3

The overrides object is unexpected; if you’re using Auth0.js within the Angular application I don’t believe this is required. Such an object would be used in the options of Auth0.js when used within the universal login flow which is not the case.

Was there any documentation that lead you to add those options? The Angular quickstart only mentions domain option which should be the one to update to your custom domain.

4

I found this configuration and indeed it is for the universal login flow (don’t really know what the difference is for these).
I found a post on this forum stating that you needed the overrides.
When I do only use my domain I get the message from the site

You should not be hitting this endpoint. Make sure to use the code snippets shown in the tutorial or contact support@auth0.com for help

I do get the login window but it just seems to be spinning forever and not showing me the login inputs.

Is there something else I should be configuring.

My current webauth instantiation looks like this

webAuth = new auth0.WebAuth({
        clientID: this._clientId,
        domain: 'login.mydomain.com',
        responseType: 'token id_token',
        redirectUri: location.origin + '/callback',
        scope: 'openid',
        _disableDeprecationWarnings: true,
    });
5

I also noticed that it’s downloading https://cdn.auth0.com/js/lock/11.11/lock.min.js
Should it be doing that?

And the call to authorize is returning 302 not found

6

Based on the information provided you’re calling Auth0.js authorize method which will initiate an authentication through universal login. This means that the actual login page (user interface) is centralized at your Auth0 tenant domain instead of being hosted in the application itself.

The above implies that in order to use a custom domain you need to ensure that:

  • the client application that starts the authentication request does so by using your custom domain. For this it’s sufficient to update Auth0.js domain option in your client application (no overrides).
  • the hosted login page configuration at your tenant is ready to process logins through a custom domain. For this, it will depend if you have customized the hosted login page or not and if it was customized it also depends if you’re using Lock or Auth0.js to drive the authentication steps within the hosted login page.

Given you mention that it downloaded Lock, then you likely have a hosted login page (https://manage.auth0.com/#/login_page) configured to use Lock and since it gives an error, this suggests you need to update the hosted login page configuration to handle custom domains. This is where the overrides and likely other settings will be needed so check the documentation available at (Configure Features to Use Custom Domains) for how to setup Lock (within universal login) to handle custom domains.