turn off shopify challenge on localhost

[yangkennyk]

Problem

I'm running slate watch which opens localhost. I'm styling the error messages on the account login page by purposefully pressing submit without info which brings up the error messages. the issue now is that it shows the shopify recaptcha challenge and anything I submit won't go through when I'm on the localhost version.

so now I can't login to an account in order to style the inner account page.

Replication steps

run slate watch go to /account/login and trigger the error messages multiple times by pressing submit without inputs. which will eventually bring up the shopify recaptcha challenge. anything you pass into it will not pass the recaptcha if though its right.

More Information

Any additional information which might be helpful.

[davidacreates]

+1 ran into the same issue on a site i was designing a few weeks ago.

[ConduciveMammal]

This has been a big problem for me whilst developing a complex enquiry form page, I can't test little changes because the challenge tells me the answer was incorrect (Click the images, not sure how this can be wrong). So for each little change, I have to deploy to the Staging theme to test the form.

[Magnusvb]

+1 for this. Lucky for me that my design is not yet public, so I can preview at the myshopify url.

[dennismclaugh]

I get the same problem. If you log into the Shopify admin page too often too quickly, the recaptcha challenge appears and if you answer the challenge correctly, the login form reappears. When you enter your password again to login, the recaptcha appears again. It's quite frustrating.

[justinseibert]

I'm getting hit with this issue. I've tested the site on my actual domain and my localhost domain. I am able to pass the challenge on the actual domain, but the reCaptcha returns a shopify-challenge__error message of "Your answer wasn't correct, please try again." on localhost.

In my experience, Google's reCaptcha API requires "localhost" to be explicitly listed as a domain on the key. My guess would be that the Shopify keys are only set up for Shopify domains/IPs, which is why the development challenge fails.

[ParallelUniv3rse]

A year later +1 for this issue. Keep bumping into this week by week.

[skillmatic-co]

Bump, same issue happening to me. Is there even a way to style that page?

[ConduciveMammal]

Bump, same issue happening to me. Is there even a way to style that page?

Slate has been discontinued so there won’t be any fix from Slate’s perspective. For styling, there are accessible element classes that you can use in a standard stylesheet. You won’t be able to add/remove elements though.

[skillmatic-co]

For styling, there are accessible element classes that you can use in a standard stylesheet. You won’t be able to add/remove elements though.

@ConduciveMammal You don't happen to have the html markup for that page do you? I can't seem to get it to appear, but my client can (and they are non-technical).

[skillmatic-co]

Funny, just got it to popup. Here is the markup for anyone else curious:

<div class="shopify-challenge__container">
   <p class="shopify-challenge__message">
      To continue, let us know you&#39;re not a robot.
   </p>
   <form action="https://*******.myshopify.com/account/login" accept-charset="UTF-8" method="post">
      <input type="hidden" name="authenticity_token" value="******" />
      <script>
         //<![CDATA[
                 var onCaptchaSuccess = function() {
                   var event;
         
                   try {
                     event = new Event('captchaSuccess', {bubbles: true, cancelable: true});
                   } catch (e) {
                     event = document.createEvent('Event');
                     event.initEvent('captchaSuccess', true, true);
                   }
         
                   window.dispatchEvent(event);
                 }
         
         //]]>
      </script>
      <script>
         //<![CDATA[
                 window.addEventListener('captchaSuccess', function() {
                   var responseInput = document.querySelector('.g-recaptcha-response');
                   var submitButton = document.querySelector('.dialog-submit');
         
                   if (submitButton instanceof HTMLElement) {
                     var needResponse = (responseInput instanceof HTMLElement);
                     var responseValueMissing = !responseInput.value;
                     submitButton.disabled = (needResponse && responseValueMissing);
                   }
                 }, false);
         
         //]]>
      </script>
      <script>
         //<![CDATA[
                 var recaptchaCallback = function() {
                   grecaptcha.render('g-recaptcha', {
                     sitekey: "*****",
                     size: (window.innerWidth > 320) ? 'normal' : 'compact',
                     callback: 'onCaptchaSuccess',
                   });
                 };
         
         //]]>
      </script>
      <script src="https://www.recaptcha.net/recaptcha/api.js?onload=recaptchaCallback&amp;render=******&amp;hl=en" async="async">
         //<![CDATA[
         
         //]]>
      </script>
      <noscript>
         <div class="g-recaptcha-nojs">
            <iframe class="g-recaptcha-nojs__iframe" frameborder="0" scrolling="no" src="https://www.google.com/recaptcha/api/fallback?k=******"></iframe>
            <div class="g-recaptcha-nojs__input-wrapper"><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-nojs__input">
               </textarea>
            </div>
         </div>
      </noscript>
      <div id="g-recaptcha" class="g-recaptcha"></div>
      <input type="submit"
         value="Submit"
         class="shopify-challenge__button btn">
   </form>
</div>