API Calls 401 'Bad Issuer' with Custom Domain Configuration and Custom Universal Login Page

Help
1

Hello Auth0 Community;

I am stumped on an issue with API calls. I was using Universal Login in a VueJS app with a Custom Universal Login screen using Lock. Now, I have switched to a Custom Domain, and while the login flow still works fine, my API calls to users now return 401.

The request I believe is Management API to the /users endpoint. The request:

https://myname.us.auth0.com/api/v2/users/auth0345111111111111111167890

The error:

{“statusCode”:401,“error”:“Unauthorized”,“message”:“Bad issuer: https://auth.myname.com/”}

My access token:

{
  "iss": "https://auth.myname.com/",
  "sub": "auth0|602ecbc32918c60069e8206f",
  "aud": [
    "https://myname.us.auth0.com/api/v2/",
    "https://myname.us.auth0.com/userinfo"
  ],
  "iat": 1628824292,
  "exp": 1628831492,
  "azp": "asfasfasfasfasfasfafsasf",
  "scope": "openid profile read:current_user update:current_user_metadata"
}

My domain is set in my vuejs app when initializing by webAuth:

let webAuth = new auth0.WebAuth({
  domain: 'auth.myname.com',  (changed to this, was myname.us.auth0.com previously)
  audience: 'https://myname.us.auth0.com/api/v2/',
.....
.....
  responseType: "token id_token",
  scope: `openid profile read:current_user read:user_idp_tokens update:current_user_metadata`
});

My thought was that I would need to try to change the token issuer in the override settings in the Custom Universal Login page, but I have not had any luck there yet. Attached is my custom universal login page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Login</title>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
        />
    </head>
    <body>
        <!--[if IE 8]>
            <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
        <![endif]-->

        <!--[if lte IE 9]>
            <script src="https://cdn.auth0.com/js/base64.js"></script>
            <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
        <![endif]-->

        <script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>
        <script>
            // Decode utf8 characters properly
            var config = JSON.parse(
                decodeURIComponent(escape(window.atob("@@config@@")))
            );
            config.extraParams = config.extraParams || {};
            var connection = config.connection;
            var prompt = config.prompt;
            var languageDictionary;
            var language;

            if (config.dict && config.dict.signin && config.dict.signin.title) {
                languageDictionary = { title: config.dict.signin.title };
            } else if (typeof config.dict === "string") {
                language = config.dict;
            }
            var loginHint = config.extraParams.login_hint;
            var colors = config.colors || {};

            // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
            var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
                auth: {
                    redirectUrl: config.callbackURL,
                    responseType:
                        (config.internalOptions || {}).response_type ||
                        (config.callbackOnLocationHash ? "token" : "code"),
                    params: config.internalOptions,
                },
                configurationBaseUrl: config.clientConfigurationBaseUrl,
                overrides: {
                    __tenant: config.auth0Tenant,
                    __token_issuer: config.authorizationServer.issuer,
                },
                assetsUrl: config.assetsUrl,
                allowedConnections: connection ? [connection] : null,
                rememberLastLogin: !prompt,
                language: language,
                languageDictionary: languageDictionary,
                theme: {
                    primaryColor: colors.primary ? colors.primary : "blue",
                },
                prefill: loginHint
                    ? { email: loginHint, username: loginHint }
                    : null,
                closable: false,
                defaultADUsernameFromEmailPrefix: false,
            });

            if (colors.page_background) {
                var css =
                    ".auth0-lock.auth0-lock .auth0-lock-overlay { background: " +
                    colors.page_background +
                    " }";
                var style = document.createElement("style");

                style.appendChild(document.createTextNode(css));

                document.body.appendChild(style);
            }

            lock.show();
        </script>
    </body>
</html>

I have tried a few different combinations of __tenant/__token_issuer in the overrides object, both manual and using the config object populated values, but have not been able to remove the error as of yet. Should the token issuer match the audience base urls that I see in my access token? Any tips on what to look for in my configuration? I did look through Custom Domain Configuration here: https://auth0.com/docs/custom-domains/configure-features-to-use-custom-domains. I am sure it is something I am doing on my part; Thank you in advance for any assistance!!

1 Like