Shopify Account Verification Stuck? How to Fix LastPass Passkey Issues on Mac & Chrome
Hey everyone! As someone who spends a lot of time helping store owners navigate the ins and outs of Shopify, I often come across those little head-scratching moments that pop up during daily operations. Sometimes, it's a complex integration, other times it's a seemingly simple step that just won't cooperate. And you know what? That's exactly why our community forums are such a goldmine!
Recently, a really interesting thread caught my eye, highlighting a specific hiccup some of you might be facing when trying to verify your Shopify account, especially if you're using LastPass for passkey management on a Mac with Chrome. It's one of those "you don't know it's a problem until it IS a problem" situations, and a fellow store owner, melvin99, shared a brilliant workaround that I just had to break down for you.
The Annoying Block: LastPass Passkey vs. Shopify's Modal Dialog
Let's set the scene. You're in your Shopify admin, maybe trying to add a new payment provider or adjust some critical account settings. Shopify, being the security-conscious platform it is, asks you to verify your account with a passkey. You're on your macOS machine, using Chrome, and LastPass is your go-to for passkeys.
Here's where the snag appears: Shopify opens a element on your screen, asking for verification. Perfectly normal, right? But simultaneously, your LastPass passkey popup appears... and it's stuck behind Shopify's dialog! You can see it, taunting you, but you can't click on it. It's like trying to grab something through a pane of glass – frustrating, to say the least.
Why Does This Happen? A Quick Peek Behind the Curtain
As Moeed, another sharp community member, pointed out in the thread, the issue lies in how Shopify's dialog is implemented. When Shopify uses a "modal dialog" (often invoked with showModal()), it essentially puts everything else on the page behind an "inert backdrop." Think of it as a temporary, invisible wall that prevents you from interacting with anything outside that specific dialog box. The LastPass popup is technically "outside" that dialog's active area, so even though it's visible, it simply can't receive your clicks or input.
Melvin99 brilliantly diagnosed this, realizing that if you remove the dialog entirely using browser DevTools, you can click LastPass, but then Shopify loses the context it needs to continue the verification flow. So, simply deleting it wasn't the answer.
The Clever Workaround: Converting to a Modeless Dialog
This is where melvin99's genius comes in. Instead of deleting the Shopify dialog, the trick is to convert it from a modal dialog to a modeless dialog. What does that mean? It means you remove that "inert backdrop" that's blocking your clicks, while still keeping the Shopify dialog alive and waiting for you to complete its steps.
Here's how you can do it, step-by-step, using your browser's Developer Tools (DevTools):
- Trigger the Problem: First, get to the point in your Shopify admin where the verification dialog appears and the LastPass passkey popup is blocked.
- Open DevTools: On Chrome (macOS), you can open DevTools by right-clicking anywhere on the page and selecting "Inspect", or by pressing
Cmd + Option + I. This will open a panel, usually on the side or bottom of your browser window. - Navigate to the Console: In the DevTools panel, click on the "Console" tab. This is where you'll enter the commands.
- Find the Dialog: In the Console, type the following line and press Enter:
const d = document.querySelector('dialog');What this does: This command finds the currently active HTML
element on the page and stores it in a temporary variable namedd. - Close the Modal Aspect: Next, type this command and press Enter:
d.close();What this does: This command closes the dialog in its modal state. Crucially, it removes that blocking backdrop that was preventing your clicks.
- Re-open as Modeless: Finally, type this command and press Enter:
d.show();What this does: This command re-opens the dialog, but this time, it opens it as a "modeless" dialog. This means it's still there, Shopify is still waiting for it, but the blocking backdrop is gone, allowing you to interact with other elements on the page – specifically, your LastPass passkey popup!
- Complete LastPass Verification: Now, you should be able to click on the LastPass passkey popup and complete your verification process.
- Continue Shopify Flow: Once LastPass is done, you can return to the Shopify dialog (which is still visible) and continue with your account verification flow as normal.
Pretty slick, right? It's a quick, temporary fix that gets you past a frustrating roadblock without disrupting your workflow too much.
Beyond the Immediate Fix: Passkey Management and Reporting the Bug
Melvin99 also mentioned that after getting past this, they went on to remove the old LastPass passkey and created a new Apple/iCloud passkey instead. While this workaround solves the immediate issue, it also highlights that sometimes, switching passkey providers might offer a smoother experience in the long run, especially if you're deeply integrated into the Apple ecosystem.
And on that note, Moeed's advice is spot on: this interaction is definitely a bug worth reporting. If you encounter this, or any other technical glitch that seems like an interaction bug between Shopify's core functionality and an extension, consider heading over to community.shopify.dev. That's where Shopify's development team is most likely to engage and look into these kinds of issues, potentially leading to a permanent fix for everyone.
It's these kinds of collaborative insights from our community that make navigating the Shopify world so much easier. Keep sharing your discoveries and helping each other out – it truly makes a difference for all of us building and growing our businesses!