Using Google Authenticator with a web browser

I’ve been using Google Authenticator on my phone for sites that require MFA. But picking up my phone to obtain a code is fraught with potential distraction / derailment. (Kind of an event boundary / doorway effect kind of thing.) So I was stoked to figure out I can add an Authenticator extension to Chrome to retrieve tokens (authenticator.cc).

To export my accounts from the phone app, I had to go through one by one to generate QR codes, AirDrop a screen shot of the code to my laptop, and then import in the extension. A bit clunky, but I really only have to do it once...

Adding the extension

In Chrome (or apparently, also, FireFox, though the instructions will differ somewhat), use the ⋮ menu, Extensions, Visit Chrome Web Store, and search for Google Authenticator. Add the authenticator.cc extension:

Me, I like to have something I’m going to use that often, pinned to my toolbar:

Exporting accounts from the iPhone app

Open Authenticator and then use the “hamburger” menu ☰ and select →← Transfer Accounts, and finally, Export accounts:

 

Un-select all but the one account you want to export, and, well, export (this extension doesn’t seem to grok multiple exported accounts in one QR code):

AirDrop a screen shot of that code over to the computer, and then...

Adding to browser extension

Open Authenticator from the tool bar or from the extension list, and use the pencil icon to edit the tokens list:

Click + to import the token you just exported from your phone:

From the menu that pops up, select Import QR Images:

Then click Import QR Image Backup and browse to the screenshot you AirDropped:

Assuming everything went smoothly, you should get a pop-up letting you know the import was successful, and then that token will be in the list presented by the extension. Easy!