Security and you

With the ever evolving complexity of the internet, you may not even realize the amount of attack surface available to a bad actor. We all know the best practices now that have been hammered into our heads: use a random password different for every website, use two-factor auth, use a password manager to encrypt your digital life, etc. Most engineers will abide by these well established rules, but how many take it a step further and apply it to the software we create? This is where 1Password 8 comes in.

Key to the kingdom

Without going too far in depth, SSH keys can be thought of the same way as your home's front door key - you use something you have to prove that access should be granted. For years this has been a standard and secure practice to access hosts over the internet by generating and storing a key on your local disk. What happens if your laptop takes a bath or you decide that shiny M1 processor is worth an upgrade, though - you now need to go through a long process of restoring your backup (you have one, right?) or creating a new key and adding it to all of your services... This is not fun.

What if I told you there is an easier way, using a tool that should already be in your back pocket?

1Password saves the day (key)

1Password has a wonderful SSH key generation functionality built into the mobile and desktop versions. Simply hit "New Item" and pick "SSH Key".

Give it a good name, hit "add private key" and click "generate". By default Ed25519 is used to generate the key but you may select RSA instead if you need that compatibility. Most servers now days should work fine with Ed25519, the most modern and fastest standard, however.

Save your new key to your private vault and you are ready to go (well, almost... stick with me). Now you will click on the row in 1Password that says "public key" and copy it to your clipboard. Go add that to GitHub now.

Ok, but how do I use it

Ok you caught me, you have a fancy new key store but no way to actually use it to SSH into your servers or to clone a repository. Worry not, 1Password thought of this and provides a SshAgent to do our bidding (err, our authenticating at least).

To enable this functionality, we need to tell 1Password that we are a developer which also enables fancy CLI options! Hit CMD + , or open the app settings in the way your OS supports and click "developer". Enable the SSH Agent and optionally biometrics if you wish. Now, we must add a snippet of code to our SSH configuration file to tell the SSH command we wish to delegate key management to 1Password. You can follow the directions and copy the snippet like in the screen below.

Once you have done this successfully, you will see a screen that looks like this telling you how awesome you are.

Note: what if I only want to use it for git and not my servers?

No worries then, I have you covered! At work, we have some complex configurations and security rules that wouldn't allow me to store my SSH key in this manor... I do, however, work on some open source software from time to time which requires that I have an SSH key to authenticate with GitHub. To accomplish this, I modified the pasted snippet from 1Password to only use the SSH agent for github connections using the git user. Run the following command (on macOS - for Linux and Windows you need to change the SSH Agent location)

echo 'Host github.com
    User git
    Hostname github.com
    IdentityAgent "~/Library/Group Containers/2BUA8C4S2C.com.1password/t/agent.sock"' >> ~/.ssh/config

And to confirm that everything is working, you can run the following command to see if 1Password prompts you for authentication and if GitHub recognizes your key!

ssh git@github.com

What about signing my code?

Luckily, GitHub now supports code signed by an SSH key! This means you can use 1Password's SSH agent functionality to sign your commits instead of relying on GPG (which has been troublesome in the past on macOS).

To configure this, make sure that you have updated to the latest version of 1Password 8 for your OS and then you should see a "configure for commit signing" pop-up at the top of your key which can auto-configure git to use 1Password for signing. You can learn more about this feature from 1Password's support site. Be sure to add your SSH key to as a "signing" type key this time (it may be the same as your auth key, but you need to add it in both auth and signing locations).

Last thing to do is to sit back and enjoy your now biometrics secured workflow

Summary

Security is important and everyone must play a part in a secure ecosystem. Humans are the weakest link in the chain and are often the target by malicious actors. By migrating to your SSH keys (the very tool used to identify yourself and provide access) to 1Password, you are insuring a smaller attack surface and saving yourself from having to type a (likely weak) password every time you need to sign a git commit or connect over SSH by using biometrics, a security-key (like a YubiKey), or your secure vault password that won't be shared on any other sites. Don't just take my word for it though, go inspect their security model yourself to decide what is right for you.

If you have questions or comments, you can reach me on Twitter!

I want my QR code and I want it now

"Once a new technology rolls over you, if you’re not part of the steamroller, you’re part of the road"

— Stewart Brand

For a recent project, I needed to show a QR code to allow a user to scan and retrieve data from another device. While there are tons of examples of how to do exactly this in Android, there are not many examples of how to do this within Jetpack Compose. As any engineer would do, I decided to write out the pros and cons of 3 approaches I had considered:

1. Using a static asset inside of my application (Easy)
2. Using an API to request a QR code image (Moderate)
3. Generate the QR code on device and draw it with (Hard)

Static Asset

Using a static asset seems like the easiest solution here and is certainly worth a mention. Why write a ton of code when you can just drop an SVG into your app's resources and display it like you would any other image? The drawbacks here are that you will be increasing your application size and preventing the flexibility of updating this code's contents on the fly.

API / Network Call

Using a network call is certainly another option here: we already have an endpoint that can generate and then return a PNG of a QR code to my specification. The upside is flexibility in changes to the design of this code and it's contents, but at the expense of needing to make a network call and for the device to be online.

Generation

This option almost scared me away as I have never worked with the Android Canvas APIs before but had heard horrors from fellow engineers about the quirks and pain of working with the Canvas. This all changes with Jetpack Compose, however! Google took the time to make improvements to these Canvas APIs - even further, anything that supports Skia could use the same code to draw with. This is a huge win for Compose Multiplatform, which allows writing the same UI code to run across multiple targets. This generation would be much more performant than a network call, keep the APK size down, and would be "future proof" if I needed to update the contents of the QR code. This is my winner.

Hand me my paintbrush

At a glance, I am going to need to do the following:

1. Create a project in Android Studio with support for Jetpack Compose
2. Create an activity to show my QR code right in the middle
3. Create a Composable function that hosts a Canvas Composable
4. Use the DrawScope to draw the QR code data onto the canvas

Drawing a QR code

As you may have noticed, step 4 is pretty vague... How does one draw a QR code? What even makes these magical bits of color work? Let's dive in so we can determine how one should be drawn.

The finders

If you don't know what the thing you are searching for looks like, how will you find it? When the computer processes the frames of data coming from your phone's camera to look for a QR code, it is looking for a distinct spacing of 3 squares. These 3 squares are known as the finder pattern. Most QR scanners also require a bit of a quiet zone around these finder patterns where there is nothing else - around 16 pixels usually works fine.

The data bits

Now that you have found what you are looking for, you can figure out what it means to you. In this case, the computer will read the data in form of columns and rows and then use an algorithm to decode the meaning of these little bits of data. This data, luckily, does not need to be perfect as a certain level of data correction is built in (and is configurable in most QR encoders).

Generation of a barcode

To generate the instructions we need to be able to draw a QR code on the canvas, we are going to need to use a library called ZXing - the tried and true java library for making barcodes of many different types. You may add it to your project by adding the following dependency.

implementation("com.google.zxing:core:3.5.0")

Now to generate a QR code in a format we can use, you need to call the ZXing Encoder with the information you wish to define the code (see QrCode.createQrCode in sample). Next we draw the finder patterns - you can see QrCode.kt and QrCodeFinderDrawing.kt for examples of how to do this; the overview is that you want to determine the position of each of these markers by using a size ratio of the generated matrix's width and height.

Finally, you will need to draw the data into the canvas. To do this, you will need to look through the ByteMatrix and check to see if a bit is enabled or disabled at that location. If it is, draw a simple rectangle on the canvas at the appropriate offset with a size matching the row and column. (see QrCodeDataDrawing.kt)

Lessons learned

This project was by no means easy, but I learned a lot along the way. Drawing may seem intimidating at first, but just remember that you are essentially telling the computer to do what you already know how to do - move a pen/painter across a canvas. If something doesn't work, break down the parts into small consumable pieces which can be easily achieved.

View My Code

You can take a look at my demo app, embedded below, and copy any code as you please! See something that could be improved upon? Feel free to submit a PR as well