✨ SvelteKit FIDO U2F Two Factor Authentication (2FA)
This is post is about SvelteKit FIDO U2F Login. FIDO U2F provides a way to beef up login security using a hardware USB token owned by the user. In computing typically we authenticate ourselves (let the system know we are who we say we are) using three possible types of identifier. These are: something we know (like a password), something we have (like a 2FA code generated by an authenticator app) or something we are (like biometric data generated using facial recognition or a thumbprint). Traditionally, we relied on a password only, though requesting a second authentication type (two factor authentication or 2FA) or multifactor authentication (MFA) is now more commonplace. FIDO U2F keys fall into the second category and make login more resistant to phishing attacks than other second factor methods.
In this post we look at what FIDO is in more detail and how you might implement the front end in a Svelte app. You might add this code to a roll-your-own login solution or even add FIDO U2F support while using an authentication service which does not offer the feature. I hope you find it interesting and useful.
🔑 What is FIDO U2F
U2F is a shorthand for Universal 2nd Factor. The FIDO part comes from the FIDO Alliance which is a body for generating open security standards. FIDO U2F is an open standard and you can buy a (relatively cheap) device from a number of manufacturers. Yubico make FIDO U2F keys as well as keys with additional proprietary features enabled. You could implement login for your app for the advanced Yubico key features, though it makes sense at least to support the more widely available FIDO U2F keys. Although USB devices are most common there are also bluetooth devices suitable for use with some phones.
The latest versions of both Firefox and Chrome browsers support FIOO U2F . In the code below we look at a progressive enhancement method for adding SvelteKit FIDO U2F login.
How it Works
The login process involves the user being prompted to insert the device into their machine and tap its button. Authentication follows a challenge-response pattern. The device is treated like an human input device (such as a keyboard) by the computer and so widely supported. When plugged in, the device receives the challenge and once the user presses the button it generates and sends the response. That response allows the server to authenticate the user, using cryptography and a stored code unique to the user generated on initial registration.
FIDO U2F keys are quite secure and less susceptible to phishing attacks than using an authenticator app for example. It is not possible to clone the device and it needs to be physically with the user on log in. Now we know a little about how the devices work, let's look at a SvelteKit implementation of the front end.
🧑🏽 SvelteKit FIDO U2F Login Client Code
We look at the front end here using the
u2f-api package . Your app will also need a back end with a database to store the user key permanently and also a way of temporarily caching the challenge sent to the user.
Let's look at some code which lets the user login with or register a FIDO U2F token. This could be included on a login screen and also in the user setting part of your app. Looking at the markup first:
101 we have a check to make sure the user browser supports FIDO U2F. They might have registered already on another device which does support it so this feedback is helpful for user experience. If the user is registering we can show an input which lets them label the device. It is common to have a backup device which is stored somewhere safe and only used if the everyday device is damaged or lost. For that reason the user may have multiple keys registered. In a more fully-featured version, we could let the user select the device they want to use for the present login from a list.
Finally the button is there so the user can find the key and be ready before completing the login process. We use the same button for login and registration, just varying the text depending on the case.
The plugin lets us check for browser support. Our code uses the
isSupported function which is a named import from
u2f-api. We put the result into a reactive variable as the result might not be available when the component first mounts. This way we update the user interface once we know either way.
Following on, we check whether we are logging the user in or registering them and proceed accordingly.
Next let's take a look at registration:
handleRegister function will be called first in the registration flow. To start registration we need a challenge from the server so you would add this at the top of the function. Next we use the
u2f-api register function to prompt the user to insert their device. Note that as part of the FIDO U2F standard, the user must be on an HTTPS website. You can see how to run a secure SvelteKit dev server in a recent video.
The device generates registration data which we store in the
registerData variable. In the meantime the dialogue should have appeared with a text box letting the user enter a label for the device. When they submit the label, we trigger the
completeRegistration function. This sends the FIDO U2F key generated data to the server so it can store it. The data will be needed to generate challenges and also authenticate the user based on the response next time they log in.
Finally the login code follows a similar pattern:
With a login, the user will trigger a
handleAuthenticate call. For the first step we need to get a challenge from the server. This will be user specific so typically the server will identify the user from session data (they would have completed the first authentication step at this stage). To save an extra trip, here we assume the server responds with challenges for all of the user's registered keys and we pick the right one (with some user help) once we have them. For simplicity here, we just pass the first sign request to the
authenticate function (in line
That function calls
38) which prompts the user to insert their key and tap the button, generating a signature. Finally we send that signature to the server which either authorises the user or declines. Based on the response we can restart the authentication process or redirect the user to their personal dashboard.
🙌🏽 SvelteKit FIDO U2F Login: What we Learned
In this post we looked at:
what multifactor authentication is,
why you might choose FIDO U2F for second factor authentication 2FA,
some example code for implementing client side SvelteKit FIDO U2F login.
I do hope there is at least one thing in this article which you can use in your work or a side project. Because you can implement the backend in a number of different ways we focused on example code rather than building out a functioning app from start to finish. I'm keen to hear if you prefer the usual complete tutorial approach or some example code instead for this kind of project.
🏁 SvelteKit FIDO U2F Login: Summary
What is FIDO U2F?
- FIDO U2F is a method for multifactor authentication (MFA). As well as entering a password, the user has to present a physical USB device to login. When you secure an account with MFA, even if an attacker gets your password by shoulder surfing or putting a key logger on your computer, they cannot log in because they need the FIDO U2F device or another permitted MFA device.
Why use FIDO U2F?
- FIDO U2F is an open standard and supported by modern browsers. It can be more secure than other second factor authentication (2FA) methods as the physical device is needed to complete login. On top FIDO U2F keys are relatively cheap.
How can you implement SvelteKit FIDO U2F login?
- We look at some sample code for implement SvelteKit FIDO U2F login client using the u2f-api package. The package has a clean interface and is not difficult to use. There are two parts to adding FIDO U2F support client side: registration and login. We handle both of these using a SvelteKit component.
🙏🏽 SvelteKit FIDO U2F Login: Feedback
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.