Shopify LastPass Passkey Blocked? A Simple Fix for Mac & Chrome Users
Ever been in the middle of an important task on your Shopify admin, like setting up a new payment provider or tweaking crucial account settings, only to hit a frustrating roadblock? You know, one of those moments where a security verification pops up, but then something else immediately blocks it, leaving you in digital limbo?
Well, you're not alone. Recently, a very specific and rather annoying issue popped up in the Shopify community forums, involving LastPass passkey verification getting stuck behind Shopify's own modal dialogs, particularly for those on macOS using Chrome. It's one of those niche bugs that can really throw a wrench in your day, but thanks to some clever community sleuthing, we've got a solid workaround to share.
The Head-Scratching Problem: LastPass Stuck Behind Shopify
Our friend melvin99 from the Shopify community perfectly laid out the scenario, and it's something many of you might have encountered without knowing the technical specifics. Here's the rundown:
- Environment: You're on macOS, using Google Chrome.
- Tools: You rely on the LastPass extension for managing your passkeys and passwords.
- Task: You're trying to perform an action on Shopify that requires account verification, such as adding a new payment provider, and Shopify prompts you for a passkey.
What happens next is the kicker. Shopify opens a element to handle the verification process. At the exact same time, your LastPass passkey popup appears, ready for you to approve the verification. The problem? That LastPass popup appears behind Shopify's dialog. You can see it, tantalizingly close, but you can't click on it. Why? Because Shopify's dialog is a 'modal' dialog, meaning it throws an 'inert backdrop' over everything else on the page, effectively intercepting all your clicks and pointer events. It's like trying to get to something behind a locked glass door – you can see it, but you're blocked!
Melvin99 even tried a few things: deleting the dialog via DevTools allowed clicking LastPass, but then Shopify lost the dialog it was waiting for, breaking the flow. Not ideal.
The Clever Community Workaround: Turning Modal to Modeless
The brilliance of melvin99's discovery, confirmed by another sharp mind in the discussion, Moeed, lies in understanding how these dialogs work. Shopify's dialog uses showModal(), which creates that blocking backdrop. The workaround? Convert it from a modal dialog to a modeless dialog using a quick DevTools trick. This keeps the dialog alive for Shopify but removes the annoying backdrop, freeing up your LastPass popup for interaction.
Step-by-Step Instructions to Unblock Your Passkey
Here's how you can implement this fix yourself when you encounter the issue:
- Identify the Block: Wait until you're at the point where Shopify's verification dialog is open and the LastPass passkey popup is visible but unclickable behind it.
- Open Developer Tools: In Chrome, you can typically do this by right-clicking anywhere on the page and selecting 'Inspect' (or 'Inspect Element'). Alternatively, go to your Chrome menu (three dots in the top right) > More Tools > Developer Tools.
- Navigate to the Console: Within the Developer Tools panel, click on the 'Console' tab. This is where we'll enter a small piece of JavaScript.
- Paste and Execute the Code: Copy the following three lines of code exactly as they appear and paste them into the Console. Then, press Enter.
const d = document.querySelector('dialog');
d.close();
d.show();- Complete LastPass Verification: After executing the code, you'll notice the backdrop disappear, and your LastPass passkey popup will now be clickable. Go ahead and complete your passkey verification.
- Continue Shopify Flow: Once LastPass is done, you can return to the Shopify dialog (which is still there, just modeless now) and continue with your account verification or whatever task you were performing.
- Optional: Update Passkey (melvin99's suggestion): Melvin99 also mentioned that after completing the verification, they removed the old LastPass passkey and created a new Apple/iCloud passkey. While not strictly part of the workaround for this issue, it's a good practice to review and update your security credentials periodically.
Understanding Why This Works & Reporting the Bug
Moeed's insight really clarifies why this workaround is so effective. As he noted, a modal dialog (showModal()) intentionally puts everything else behind an inert backdrop. By using d.close() and then d.show(), you're essentially telling the browser, "Hey, keep this dialog on the page, but don't make it modal anymore. Just show it normally." This removes the blocking backdrop while keeping the dialog Shopify needs alive.
This isn't just a quirky workaround; it points to a genuine interaction bug caused by how Shopify's modal and the LastPass passkey extension interact. Moeed rightly suggested that this kind of bug is best reported on community.shopify.dev, where Shopify's developer team actively engages. Getting it reported there increases the chances of it being officially looked at and potentially patched in a future update.
For store owners, every minute spent troubleshooting is a minute not spent growing your business. That's why community-driven solutions like this one are so valuable. They keep your operations running smoothly and remind us that we're all in this together. And for those just starting their journey or looking to switch to a platform that prioritizes security and merchant success, Shopify remains a top choice, constantly evolving to address these kinds of real-world challenges.
Hopefully, this detailed explanation and step-by-step guide help you navigate this particular LastPass/Shopify snag with ease. Keep an eye on the Shopify community forums; you never know what clever solutions will pop up next!