Authentication - feel the user experience

There are several methods for authentication : certificates, passwords, pincode, webauthn, One Time Password…

Choosing an authentication method is not a technical choice : it has hudge impacts on security but also on User eXperience.

This article shows several demos, built with Keycloak, and let you have a perception of User eXperience for each authentication method.

Context

This blog post is not about technical aspects. We will explain how to implement different authentication methods on Keycloak, right out of the box without any SPI or custom code.

For each method, we will show how to do it : registration process, authentication flow, user infos.

You can test every method (or flow) with the “login” button on each chapter.

4 different authentication methods :

  • a standard password, with a high level of security (8 characters, 1 special, 1 number, 1 uppercase at least)
  • an OTP (One Time Password) with a mobile application such as Google Authenticator
  • webauthn, a new authentication method based on public key credentials.
  • an external provider (Google for this example) with its own authentication process.

Some authentication factors are usually set as “second authentication factor”. Why ? We don’t know why webauthn is set as a second factor, it has a high security level, higher than a password.

Remember :

Authentication is the first step in access control, and there are three common factors used for authentication: something you know, something you have, and something you are

https://www.pearsonitcertification.com/articles/article.aspx?p=1718488


Registration

You can register on our Keycloak realm.

User registration is enabled, no email verification (you can use a fake email), only a unique username is needed.

Email verification is not set as a required action, webauthn and OTP configuration are required.

In Keycloak, there are 2 policies about WebAuthn : as a second factor or as passwordless. For this example, we do not use 2 different configurations. That is why “Webauthn Register Passwordless” is disabled

3 steps, with OTP and webauthn registration :

Windows Hello is not available by default on Keycloak, due to the default signature algorithm ES256 that is not supported. You need a physical key for it. We switched the signature algorithm to RS256.

We enabled all those features because we will use all of them later, that is why this registration process seems “fat” and boring.

How do you feel about this registration process ?

This is how the user looks like in Keycloak admin console :

Three credentials exist. This is important to know that a password is a kind of credential. Keycloak has a generic structure for credentials, any type of authentication factor can be stored.


Test yourself different authentication processes

First test : the “standard”, aka login with Username and Password

Security

User experience

Why not a high security ? Our password policy is not complex, some “standard” passwords could be used and found easily by brute force. But the policy is complex enough to invite users to write down their password on a paper or an excel file

Our password policy (you probably know it since you registered) is set as :

For some people, great passwords are longer than 8 characters, or must be renewed regularly… We do not add those features, a “standard” password with “standard” rules (those rules are default in Keycloak) is enough for this experience.

We have a client which overrides default authentication method by this one we created :

We removed cookie authentication, so a login form will load even if you are already logged in. This login is the most common way we see over the web : a login form with username and password. You are lucky, Keycloak allows browsers to save passwords and there is no ugly custom digit keyboard…

Configuration is :

  • client : demo-methods-auth-1
  • authentication flow overrides : Browser without OTP

Second factor : OTP

Security

User experience

Grab your phone, unlock it, find the OTP application, open it, copy the pin code… What a bad experience ! Do not forget the registration process you did previously.

You registered an authenticator for OTP. Most of the time this feature is optional, in example in a Google account. This method is similar to SMS verification, only the registration process will change.

By default on Keycloak, if a user has activated OTP the verification code is needed in the process.

Disabled Kerberos and identity provider redirector. The browser flow is only configurable, not editable.

That is the use of the condition “User Configured”, an OTP form is required. OTP is now a “second factor” for authentication. You need your password and your mobile you configured the authenticator on.

Configuration is :

  • client : demo-methods-auth-2
  • authentication flow overrides : browser (default)

A modern second factor : webauthn

Security

User experience

Confirm my identity by a pin code, a scan on a fingerprint sensor or using my face. Fast, reliable, based on my everyday authentication on my device. During the registration process, this part was not the worst at all. Why do I have to enter my password ???

The same as shown previously, now with webauthn.

Webauthn uses public key based authentication, core of the FIDO2 project. The specification says that FIDO2 (successor of FIDO U2F) can be used as a single authentication factor.

Apple announced FaceID and TouchID compatible with webauthn :

https://developer.apple.com/videos/play/wwdc2020/10670/

Windows Hello has also its own FIDO2 certification :

https://techcommunity.microsoft.com/t5/windows-it-pro-blog/windows-hello-fido2-certification-gets-you-closer-to/ba-p/534592

By the way, Android is fully supported since Android 7.0 :

https://fidoalliance.org/news-your-google-android-7-phone-is-now-a-fido2-security-key/

It means that every compatible device has native authentication method based on pincode, biometric, facial recognition. The action unlocks a private key, then used for a standard public key authentication.

Previously, you registered your public key using the Webauthn process. This key is stored in database :

In this example, webauthn is used as a second factor.

I can use both pin code or facial recognition. If the algorithm is set to ES256 (which is not supported by Windows Hello), the system ask for a USB security key :

Configuration is :

  • client : demo-methods-auth-3
  • authentication flow overrides : Browser With Password And Webauthn

Is webauthn enough ? A passwordless authentication

Security

User experience

By the way, the best experience. Why only 4 stars ? Because the process depends on your device, and adding a new device needs a new registration process to add its public key. Why do I have to enter my identifier ?

The username is needed, we can not determine if finding a username directly with its public key is a good practice. For user experience it could be a good point, in terms of security it changes nothing. A user has to feel security, maybe we will make more experiences with transparent authentication using webauthn.

Just enter your username, then your operating system will do the verification by using a native authentication method.

On Android it looks like this with many supported methods like NFC, Bluetooth or USB FIDO keys and also with native authentication method (fingerprint sensor for this phone) :

iOS also supports webauthn (only with Safari) with touch ID or Face ID :

Screenshots are made from webauthn.io website

Configuration is :

  • client : demo-methods-auth-4
  • authentication flow overrides : Browser Webauthn Only

For fun : only use OTP as authentication secret

Security

User experience

This method is a demo of what is possible to do with Keycloak. A second factor could be a unique authentication factor.

OTP is known as a “second factor authentication”. It is based on a PIN code valid only for a limited time.

https://en.wikipedia.org/wiki/One-time_password

You know it well, this is the famous “validation by SMS” you wait for 2 minutes in front of your smartphone and you try a copy/paste without any space. The SMS is sometimes not as secure as we imagine, on a lock screen you can have the entire (or a part) of the SMS.

How do you feel if we use only this verification code ? Are you more careful with your phone than your passwords ?

Configuration is :

  • client : demo-methods-auth-5
  • authentication flow overrides : Browser OTP Only

Use an external provider : Google

Security

User experience

Some people do not like “login with” experience. The magic behind the redirect and some data sharing are not well seen. Security could be compromised in some use cases with badly used trackers.

In configuration, we will use only the identity provider redirect. The default identity provider is set to “google”.

Of course, we added Google as an identity provider.

Configuration is :

  • client : demo-methods-auth-6
  • authentication flow overrides : Browser Google Only

Other methods ?

Other methods exist, some of these are implemented in Keycloak.

  • x509 certificate (implemented), highly secured but with high constraints (certificate)
  • magic link : a link is sent to your email address, this email contains a link with an action token and authenticates directly when opened
  • push notification : instead of sending a SMS with a validation code, a push notification is sent and only a click will authenticate. This method is used by Google.

You can also imagine any authentication process you want, just take care of both security and user experience.

Conclusion

Is there a relation between security and authentication ? We think yes. Many solutions exist, a password is more a constraint than a solution. Consider your users before choosing an authentication method.