SvelteKit FIDO U2F Login: Multifactor Authentication # SvelteKit FIDO U2F Login: Multifactor Authentication #

Browser Support #

The latest versions of both Firefox and Chrome browsers support FIDO 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 a 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.

Sample Code #

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 {#if fidoU2fSupported}
102   {#if registering}
103     <form on:submit|preventDefault={completeRegistration}>
104       <TextInputField
105         value={label}
106         required
107         placeholder={PLACEHOLDER_TEXT.fidoU2fLabel}
108         id="fido-u2f-key-label"
109         title={TITLE.fidoU2fLabel}
110         on:update={(event) => {
111           label = event.detail;
112         }}
113       />
114       <button type="submit" disabled={registerData == null && label === ''}
115         >Complete registration</button
116       >
117     </form>
118   {/if}
119   <button on:click={handleAuthenticateRegister} disabled={submitting}
120     >{registerLoginButtonText}</button
121   >
122 {:else}
123   <div>FIDO U2F is not supported on your browser</div>
124 {/if}

  

In line 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.

Component JavaScript Code #

    
1 import { isSupported, register, sign } from 'u2f-api';

  

    
26   $: fidoU2fSupported = checkFidoU2FSupport();
27 
28   async function handleAuthenticateRegister() {
29     if (fidoU2fRegistered) {
30       await handleAuthenticate();
31     } else {
32       await handleRegister();
33     }
34   }

  

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.

Registration #

Next, let’s have a look at registration:

    
66 async function completeRegistration() {
67   try {
68 
69     /* add code here to send the registration data to your server */
70 
71     if (registrationSuccessful) {
72       await goto('/dashboard');
73     }
74   } catch (error) {
75     console.error(`Error in completeRegistration: ${error}`);
76   }
77 }
78 
79 async function handleRegister() {
80   if (browser && fidoU2fSupported) {
81     try {
82       registering = true;
83 
84       /* add code here to request fidoU2fBeginRegister from your server */
85 
86       registerData = await register([fidoU2fBeginRegister]);
87 
88     } catch (error) {
89       let message;
90       if (error?.metaData?.type) {
91         message = error.metaData.type;
92       } else {
93         message = error;
94       }
95       console.error(`Error in handleRegister: ${message}`);
96     }
97   }
98 }

  

The 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.

Login #

Finally, the login code follows a similar pattern:

    
36 async function authenticate(fidoU2fSignRequest) {
37   try {
38     const signData = await sign(fidoU2fSignRequest);
39 
40     /* add code here to send the signature to your server and get a yay or nay */
41 
42     if (authorised) {
43       user.set({ ...$user, mfaAuthenticated: true });
44       await goto('/dashboard');
45     } else {
46       console.log('Access denied!');
47       await goto('/login');
48     }
49   } catch (error) {
50     console.error(`Error in authenticate function in FidoU2f: ${error}`);
51   }
52 }
53 
54 async function handleAuthenticate() {
55   try {
56 
57     /* add code here to send the registration data to your server */
58 
59     if (registrationSuccessful) {
60       await goto('/dashboard');
61     }
62   } catch (error) {
63     console.error(`Error in completeRegistration: ${error}`);
64   }
65 }

  

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 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 59).

That function calls sign (line 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 authorizes 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; and
• 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.

You can see the example code for this SvelteKit FIDO U2F login project on the Rodney Lab Git Hub repo  .

🏁 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 keylogger 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 implementing 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.

Rodney

@askRodney

🔑 I put together some details on how you can create a secure key for SSH GitHub transactions using your FIDO U2F USB key 🧵

- FIDO U2F keys offer secure second factor authentication

- the FIDO U2F key stores part of the SSH key

- you need the hardware token to push to GitHub

pic.twitter.com/zMSeqE04z5

— Rodney (@askRodney) November 24, 2021

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.