2FA In Joomla - Clef Extension
Besides the core Joomla implementations of Two Factor Authentication - using Google Authenticator and Yubikey - there are also other implementations available using extensions. One of these is the Clef Two Factor Authentication, which allows you to log in using two factors but without even providing a token or a password. It all works via an app on your phone and ... there is already a Joomla extension available to use this authentication method for logging in to your Joomla site.
In this article, we will explain how to install and configure the Clef component in Joomla in 4 steps so you can start using it once these steps are completed. We won't get any more in detail about Clef itself and how to use it, you can go to the Clef website and learn how to use it over there in the tutorials.
(small remark: some images are quite small to load fast, click on them to get a bigger image with more details)
- Step 1 - Download and install the Clef app on your mobile device
- Step 2 - Download the Joomla Clef Extension
- Step 3 - Install the Joomla Clef Extension on your Joomla site
- Step 4 - Configure the Joomla Clef extensionStep 4 - Configure the Joomla Clef extension for front end usage
For this step, please check out the installation instructions on the Clef site. You can download the app on your smartphone (Android and iOS are supported!) and you have to register at the Clef site to be able to use the app. If you want to learn more about using Clef, please go to the site and check the tutorials.
Indeed, there is a Joomla extension available, but you can't use it from the web installer as you have to provide your mail address before you're able to download it. The extension is written by Anything Digital and the link to it can be found in the JED (Joomla Extension Directory).
To install the extension, you will have to do it using the manual installation as the web installation will not be possible because of the restrictions on downloading the component (as explained in the previous section).
Browse for the zip-file on your local computer and once it is selected, click the "Upload & Install"-button.
The component will now be installed and once the installation on your site is finished, you will get this screen
If you have followed all of our previous steps, then you already have done the app setup on your mobile device and you have created your Clef-account so you can proceed pressing the upper buttonn ("I already have the app").
After clicking that button, you will have to scan the "login token" using the app on your mobile device to add your site to your Clef sites and to be able to login using the Clef app on your mobile device. On your site you will get a kind of "dancing lines" and you have to scan that with your phone. It looks something like this, as seen on the site and as seen from your phone - the picture is not very sharp but I had to be very fast to be able to take a screenshot so I couldn't wait till everything was focused correctly.
Once this is scanned, your site is added to your Clef-sites and you will be able to enter your site using the Clef login feature - provided the login button is visible on your login screen. As soon as you have gone through the steps as described above, everything will be OK to be able to log in on the back end of your site. If you click the button "Log in with your phone" you will get the Clef login bars and you can login with your phone using the Clef application.
To be able to log in on the front end of your site, please also execute step 4 (just below).
Allright, we've come so far but now we have to make sure we also show the right buttons on our login screen on the front end too, so we have to do some more configuration especially in the modules section.
Step 4.1: just as a quick check, make sure your plugins are actived like this (this is the default setting at installation but just for the sake of verification I added this step).
Step 4.2: now you go to the modules, where you will find the Clef module but it is not activated yet.
Activate the module AND assign the module to a specific place which is shown in your website front end (default position-7 will do the trick in my case as I use the default template at Joomla installation). Furthermore, you will need to change the default setting of the Menu Assignment from "No Pages" to "On All Pages" or the setting of your choice. The button will then automagically appear in your front end like this