Failing to attach event to login fallback error

Help
1

Hi everyone,

I am trying to call an event after user has tried to log in with wrong credentials and the fallback error pops up. Tried using the solutions provided in this article:

And more specifically:

new Auth0Lock('client ID', 'domain', {
  hooks: {
    loggingIn: function (context, cb) {
      console.log('Hello from the login hook!');
      cb();
    },
    signingUp: function (context, cb) {
      console.log('Hello from the sign-up hook!');
      cb();
    }
  }

Unfortunately, nothing works. Could you please provide some clarity as? Basically, what I am trying to achieve is that when the error for wrong credentials pops up, I want to execute a function to attach google analytics.

Here is the whole code snipper:

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 || {};
        languageDictionary = {
            error: {
                signUp: {
                 	'lock.fallback': `<p>
                                We have encountered an error registering your account. Here are a few possibilities:
                                <ol>
                                    <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet? <a href="https://cleanchoiceenergy.com">Check availability</a>.</li>
                                    <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li>
                                    <li>If you think this is an error, contact customer care at 1-800-240-2241.</li>
                                </ol>
                            </p>`
                },
              	login: {
                  'lock.fallback': `
									<p>
										There was a problem on login. Possible reasons:
										<ol>
											<li>Incorrect email/password.</li>
											<li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li>
										</ol>
      						</p>`,
                }
            },
          	blankPasswordErrorHint: 'Password can’t be blank',
            //blankErrorHint: 'This field cannot be blank',
            //invalidErrorHint: 'Invalid email address',
            invalidPasswordErrorHint: 'Password is invalid',
            invalidEmailErrorHint: 'Email is invalid',
          	emailInputPlaceholder: 'Email',
          	passwordInputPlaceholder: 'Password',
            signUpSubmitLabel: 'Create account',
            loginLabel: 'Log in',
            loginSubmitLabel: 'Log in',
          	signUpLabel: 'Create account',
          	signUpTerms: 'Signup terms.',
          	forgotPasswordInstructions : "We’ll send you an email with a link to reset your password",
            passwordStrength: {
                containsAtLeast: 'Passwords must contain %s of the %s character types:',
                identicalChars: 'No more than 2 identical characters in a row (e.g., "%s" not allowed)',
                nonEmpty: 'Non-empty password required',
                numbers: 'Numbers: 0-9',
                lengthAtLeast: 'At least %s characters in length',
                lowerCase: 'Lowercase letters: a-z',
                shouldContain: 'Should contain:',
                specialCharacters: 'Symbols: e.g. !@#$%^&*)',
                upperCase: 'Uppercase letters: A-Z'
            },
        };

        // 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: {
                logo: 'https://cleanchoiceenergy.com/images/cce-logo-stacked.svg',
                primaryColor: colors.primary ? colors.primary : 'green',
            },
            prefill: loginHint ? { email: loginHint, username: loginHint } : null,
            closable: false,
            defaultADUsernameFromEmailPrefix: false,
            initialScreen: config.extraParams.mode,
            loginAfterSignUp: true,
            hooks: {
               loggingIn: function (context, cb) {
                   console.log('Hello from the login hook!');
               },
           signingUp: function (context, cb) {
                console.log('Hello from the sign-up hook!');
           }
        }
        });

        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);
        }
3

Hi @MinchoMilev,

There are a few things going on here.

First, the hooks in the code snippet you posted don’t have callbacks. The login/signup should remain blocked until a callback is executed. This is stated here.

It will also be helpful to understand how those hooks work. They aren’t going to run after an error is returned. From the doc:

Name Description
loggingIn Called when the user presses the login button; after validating the login form, but before calling the login endpoint
signingUp Called when the user presses the button on the sign-up page; after validating the signup form, but before calling the sign up endpoint

Second, it looks like you are passing HTML to the languageDictionary. I don’t think that will work. IIRC that will be sanitized as a string and will output in plain text.

Is that working for you?

Unfortunately, I can’t think of a way to execute the goal you stated.

4

Hello @dan.woda ,

Thank you for the prompt response! I read the documentation about the login hook and realized it runs before calling the login endpoint. So, there is nothing I could do about my enquiry.

Regarding passing the HTML to the languageDictionary, I confirm it does work as supposed to and it is not sanitized as a string.

1 Like