Catch event when checking login

Shopify Apps

Topic summary

A developer is working on customizing a Shopify customer login form and needs help modifying the default behavior.

Current Behavior:

  • Upon successful login, users are redirected to another page (standard Shopify behavior)

Desired Behavior:

  • Show a #login-successful div when login succeeds (instead of redirecting)
  • Display an alert with “login failed” message when login fails

Technical Context:

  • The form uses Shopify’s standard /account/login endpoint with POST method
  • Includes a return_to parameter currently set to redirect users
  • Form has data-login-with-shop-sign-in="true" attribute

The developer has shared their form code and is seeking guidance on how to intercept the login event to implement custom success/failure handling rather than relying on Shopify’s default page redirection. No solutions have been provided yet.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

hi guy, I have a form below that selects users to log in; Currently, when the user successfully logs in, they will move to another page, but I want when the user logs in successfully, the #ogin-successful div will appear, and if it fails, it will display arlert: login failed. Does anyone know if they can help me? Thank you!

<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" data-login-with-shop-sign-in="true" novalidate="novalidate"><input type="hidden" name="form_type" value="customer_login"><input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="form_type" value="customer_login">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="return_to" value="https://onmanedev.myshopify.com/pages/demo">  
    <div class="field">
        <input type="email" name="customer[email]" id="CustomerEmail" autocomplete="email" autocorrect="off" autocapitalize="off" placeholder="Email">
        <label for="CustomerEmail">
            Email
        </label>
    </div>
    <div class="field">
        <input type="password" value="" name="customer[password]" id="CustomerPassword" autocomplete="current-password" placeholder="Password">
        <label for="CustomerPassword">
            Password
        </label>
    </div>
    <div class="field crate-or-forgot">
        <a href="#popupRecover" id="btnRecover">  Forgot your password? </a> 
        <span>or</span>
        <a href="#popupRegister" id="btnRegister"> Create account</a>
    </div>  
    <div class="field submit-filed">
        <button> Sign in</button>
    </div>
</form> 
<div id="login-successful" class="login-successful" style="display:none;">
    <button>Sign in 1</button>
    <button>Sign in 2</button>
</div>