Hello Shopify Community,
I’m working on integrating a “Sign In with Shop” button on the account page of my store. Ideally, after customers sign in using this button, they should be automatically redirected to their account page. However, currently, the page does not redirect upon login; instead, it displays a hover box indicating that the customer is logged in. Customers can only access their account page by either refreshing the page or clicking the login button again.
Here’s the challenge: The button is rendered by Shopify using the line {{ shop | login_button: action: 'default' }}
, and it’s placed within a #shadow-root, which makes it tricky to manipulate.
I’ve attempted to overcome this by using a MutationObserver to check if the customer has logged in through the “Sign In with Shop” button. Despite this, the solution is inconsistent—about half the time, customers are either redirected to their account page or find themselves stuck in a loop of logging in and immediately being logged out.
Here is the script I’ve developed so far. Could anyone please offer some guidance or improvements?
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
console.log("Mutation observed:", mutationsList);
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
if (mutation.removedNodes.length == 1) {
console.log("Shop login button removed, triggering reload.");
setTimeout(() => {
window.location.reload();
console.log("time out then reloaded!!!")
}, 1000);
console.log("test final here");
}
}
}
};
const observer = new MutationObserver(callback);
observer.observe(loginButton.shadowRoot, config);
Any help would be greatly appreciated to make this feature more reliable for our customers. Thank you!