TOTP Screenshot feature

There are multiple APIs to capture the screen on Windows, like the Destkop Duplication API or the Screen Capture API.
All major browsers also implement Web Screen Capture API.
These platforms also have native as well as open source QR code scanner APIs.

The desktop app, web vault and web extension can certainly scan a QR code from a website and add it to a login, instead of having to use my phone for sites that don’t provide a backup code.

1 Like

It has been 1 year, I’d really like this to be implemented now more than ever. Thanks.

I know this feature from 1Password desktop app. It is very helpful when activating 2FA for a website to be able to use Bitwarden desktop app to detect the QR-code right from the screen. Actually you have to use the Bitwarden mobile app to take a picture of the QR-code and put it in the entry.

So +1 from me! :slight_smile:

I have almost never needed to do this, because usually there is a text key provided with the QR code when you setup TOTP. Since you are on a computer with a mouse anyways, why not just copy and paste that in to BW?

I can see this being handy for the occasion when a text key is not provided with the QR code, but I think this makes this request pretty low priority. But I get where you are coming from.

As you mentioned, some sites still don’t provide a text key (for whatever reason) and even then, the text (Base32) based secret is fundamentally different from QR code (which is based on a URI).
When you use a Base32 secret instead of a URI, your supporting account information (such as Account Provider and Account Name, for example Google/[email protected]) are not stored. The Base32 secret also does not allow for custom parameters (such as the length of the OTP, algorithm used, etc.) so it is not a strict replacement.

With a TOTP URI, Bitwarden retains this information and I can paste the stored URI into any authenticator app I want without having to manually enter any details.

1 Like

A feature like this would be very useful and would improve Bitwarden’s ease of use. I think a button like the one in the screenshot below would be enough for the browser extension.

2 Likes

I see a number of comments asking why the QR code when the code is usually available; there are a few reasons.

  1. Anything which simplifies the process of enabling 2FA for people who are not technically savvy is a big win for security. For someone who is non-technically savvy, finding the code and figuring out what to do with it may be confusing.
  2. The text code does not have all of the information as the TOTP code. If someone is using Bitwarden for 2FA in some places and Authy or Duo in others, they will want the QR code as it provides information about the provider and account name.
  3. Security best practice is to use 2FA from a dedicated source rather than your password vault. However, someone currently using Bitwarden for 2fa will find migrating difficult. If Bitwarden captures the QR code, it becomes far easier to create a migration workflow if someone wishes to improve their security in the future.

I know the bitwarden team likes user stories, so here are a few.

Bill has heard about 2Factor authentication, but in the past when he has tried to enable it for his bank account he has run into dead ends. He starts the process, but then is shown a strange blocky picture and told to “enter it into his authenticator”. He doesn’t know what that is, he hasn’t had an RSA token since retiring, so maybe he can’t do it any more. But it’s a new year and Bitwarden’s security checkup has notified Bill that he can enable 2factor on MySecureBank. When he clicks for more information, Bitwarden shows how to click the Bitwarden icon, then his bank login, then the “2FA” icon. He follows the instructions on MySecureBank’s account page, and as soon as he clicks the 2FA icon in Bitwarden he sees a new “2-factor Code” under his bank account. Surprised at how easy it was, Bill goes on to enable 2-factor on his Etsy and Instagram accounts.


Greg has implemented Bitwarden enterprise for his SOC, and has been pleased with it so far. They have also begun enabling 2-factor authentication across all of their vendor accounts. Recent red teams have reported a substantial increase in security due in large part to these two measures. However, one vendor in particular only generates a single 2-factor seed per organization, which has created headaches. Whenever one of Greg’s analysts gets a new phone, they lose the seed, and generating a new one invalidates everyone else’s 2-factor codes. At the moment, their solution is to simply generate the new QR code and sync everyone’s authenticator at their weekly standup, but this runs into issues when people are out of office. Greg has considered storing the QR code on his home folder, but loathes the security ramifications.

Greg has heard that Bitwarden now can capture the QR codes, and sees a solution. He can store this (and other problematic QR codes) under a separate account within the organization which only he has access to. Whenever someone gets a new phone, he can log into that privileged account and display the QR code, allowing them to continue using the vendor. It maintains security, because multiple factors are necessary to access the QR code, none of the seed data is stored insecurely, and everyone can use 2factor.


Tom is a lawyer, and knows enough about computer security to know that it’s a problem. He has been following all of the latest advice about complex passwords, vaults, and 2-factor authentication. But he has been reading about concerns of storing 2-factor codes in the vault, and this makes sense; if someone breaks into his vault, shouldn’t the 2-factor accounts still remain safe?

He’s decided to move his 2-factor authentication to a separate app; he has heard that Google Authenticator is good, so he has installed it and opened it on his phone. He has also opened up his bitwarden web vault and pulled up his most important account account. He sees a QR icon next to his 2-factor code, so he clicks it, and Bitwarden informs him that he is about to display the secret 2factor key for this account and to ensure he is in a private location. He clicks OK, and scans the QR code in Google Authenticator, where a new entry appears with the correct icon, account name, and website name. He goes through all of his 2-factor accounts, scanning the QR codes, printing them off (to go in his physical safe), and removing the seed from each one. While Tom still does not sleep well at night-- kept up by visions of North Korean agents sneaking in, cracking his safe, and stealing his Steam 2-factor secret-- he sleeps at least a little easier.

i highly second this feature request.
I currently use GitHub - Authenticator-Extension/Authenticator: Authenticator generates 2-Step Verification codes in your browser. in my Firefox and besides being a bit old-fashioned on in the looks department it does an excellent job with almost everything you’d ever need.
As it’s license is MIT, you might even be able to adapt some of its code.

I’m also waiting for being able to scan the QR Code from the web browser (or the native app). It’s a bit painful to have to have the phone aside to set up an account… :slight_smile:

I use 1pass at work and this is a great feature that I really miss from Bitwarden. In addition, there are sites which do not give you a plain text code only the QR image and that’s it (Coinbase for one).

My workaround is to save the image and decode with zbarimg locally to extract the code that I save into Bitwarden, I really don’t like this flow, but on some sites, I don’t have another option with Bitwarden (unless using the mobile client to capture from my monitor).

Feature name

“Scan TOTP QR codes from Browser extension or Desktop client”

Feature function

  • Currently, to add a TOTP secret, the user has to enter it manually or scan the QR code with the mobile app¹.
  • The majority of websites I know do not show the TOTP secret when enrolling, only the QR code.
  • When on desktop, I want to be able to add a TOTP entry directly from a QR code, without knowing the secret or using the mobile app.
  • This could be done by scanning the web page like Keepass does it².

Related topics + references

¹ Bitwarden Authenticator (TOTP) | Bitwarden Help & Support
² I don’t remember if this was from a plugin or not, but it worked just like this.

Agreed, this would be a great feature to have.

I currently use Keeper, which has supported this for some time now; the web vault doesn’t scan web pages, but it does let you upload images for MFA. So I can take a screenshot of the QR code, upload this and the TOTP details are instantly added and generating codes straight away.

The desktop client supports this too, but also has the ability to scan your screen for QR codes and import it automatically.

As someone who moved from 1Pass, this is the feature I miss the most.

More “user friendly” than 1Password is the scanner in the Authenticator Chrome extension.
You select “Scan QR” and then you can drag a flexible scanning zone over the QR code.

1 Like

I use 1pass at work and this is a great feature that I really miss from Bitwarden. In addition, there are sites which do not give you a plain text code only the QR image and that’s it (Coinbase for one).

My workaround is to save the image and decode with zbarimg locally to extract the code that I save into Bitwarden, I really don’t like this flow, but on some sites, I don’t have another option with Bitwarden (unless using the mobile client to capture from my monitor).

By the way, is this a duplicate of this much older request for TOTP screenshots? TOTP Screenshot feature

I have merged the two threads and the votes. Thanks for letting us know.

For what its worth: I have just encountered a QR code that has no text-based TOTP key, in an environment where I have access to bitwarden but not my phone.

It’s disheartening to see this feature not being implemented. The people who will benefit from this feature are the paying and loyal bw customers. It would really be appreciative of them to implement something like this.

For anyone interested, I wrote a quick utility to address this for myself. This relies on the ZXing JS library and the unpkg CDN to print out the TOTP URI to the DevTools console. Make sure you understand the risks involved.

Some knowledge of JavaScript and browser DevTools is necessary.

Usage:

  1. Install the browser userscript manager of your choice (e.g., Tampermonkey or Greasemonkey).
  2. Add the below script to a new userscript for all sites.
  3. Select a QR code img element in the browser DevTools (e.g., with Ctrl+Shift+C in Chrome: Open Chrome DevTools - Chrome Developers).
  4. Run qrTools.decodeQrCode() in the DevTools console.
window.qrTools = class QrTools {
        loadedScripts = [];

        async decodeQrCode(element = $0) {
            if (!(element instanceof HTMLElement)) {
                throw new Error('The given element is not a recognized HTML element.');
            }

            // Work around ZXing bug: Image is handled as a video unless videoWidth === 0
            if (element instanceof HTMLImageElement) {
                element.videoWidth = 0;
            }

            await this.loadScript('https://unpkg.com/@zxing/[email protected]0.19.1');
            const codeReader = new ZXing.BrowserQRCodeReader()
            const decodeResult = await codeReader.decodeFromImage(element);
            console.log('Decode result:', decodeResult.text, decodeResult);
        }

        async loadScript(src) {
            if (this.loadedScripts.includes(src)) {
                return;
            }
            const scriptEl = document.createElement('script');
            scriptEl.type = 'text/javascript';
            scriptEl.src = src;
            document.head.append(scriptEl);
            await new Promise((resolve, reject) => scriptEl.addEventListener('load', () => resolve()));
            this.loadedScripts.push(src);
        }
}