Send verification code via e-mail after keycloak login

Is it possible to add verification code using e-mail or SMS in order to add additional security layer?

In my case I want to use Keycloak 21 with React login page. After user enters his username and password he should be prompted also to enter secret code delivered by e-mail.

I tried this:

1. Create Realm: admin_console_realm

2. Add client: admin_console

3. Create user: test

With Postman I tried to create a request(like a React SPA app) to generate token:

POST: http://123.123.123.123:8080/realms/admin_console_realm/protocol/openid-connect/token?client_id=admin_console_client&grant_type=password

I get response:

{
    "access_token": "eyJhb....X8N8ulVbQ",
    "expires_in": 300,
    "refresh_expires_in": 1800,
    "refresh_token": "eyJhbGc....Q",
    "token_type": "Bearer",
    "not-before-policy": 0,
    "session_state": "5595860d-35d8-4fe1-9f6f-147c38255172",
    "scope": "email profile"
}

What should be the proper way to send a username and password and then to use confirmation code (OTP code) received by e-mail for Keycloak 21?

In the admin console after selecting the realm for which you want to enable this under Realm Settings -> Login - you have an option to make the user verify their email after initial login. If you check this users will be required to verify their email to proceed with authentication.

Make sure to configure the SMTP settings as part of the Email tab in the same Realm Settings view in order for the flow to work as expected.

Yes, it's possible to add an additional security layer with Keycloak, sending a verification code via email (or SMS), which can be done using an OTP (One Time Password) policy.

Here are the general steps you would need to take:

1. Implement a Keycloak SPI (Service Provider Interface): To customize
   Keycloak to send the OTP via email/SMS, you need to create a custom
   SPI. Keycloak SPIs allow you to provide custom implementations for
   certain aspects of Keycloak.
2. Register Your Custom SPI: Once your custom SPI is implemented,
   you'll need to register it. You can do this in the standalone.xml,
   standalone-ha.xml, or domain.xml file, depending on your mode of
   operation.
3. Enable and Configure the OTP Policy: In the Keycloak Admin Console,
   navigate to the Realm settings, then go to the Authentication tab.
   You should be able to configure an OTP policy for your realm.

Unfortunately, Keycloak doesn't provide the email/SMS functionality out of the box, and you'll need to develop that part yourself (or use an existing service/library to do that).

A couple of notes:

• For sending emails, you can use Java Mail API or any other email
  sending service/library. For sending SMS, you'll need to use a
  service like Twilio or Nexmo.

• The OTP should be a short, randomly generated number or alphanumeric
  string that is sent to the user and also stored in the user's session
  or some temporary location (that you clean up afterwards), so that
  when the user enters the OTP, you can validate it.

For the React part, after the user enters their username and password, you would redirect them to a new page (or show a modal/dialog) to enter the OTP. The OTP would then be sent to the Keycloak server for validation, and if valid, the user would be successfully authenticated.

First, create a Maven project with the following structure:

src
 └ main
     └ java
         └ com
             └ mycompany
                 └ keycloak
                     └ MyCustomProvider.java
                     └ MyCustomProviderFactory.java
pom.xml

Here is what your MyCustomProvider.java might look like:

    package com.example.keycloak;
    
    import org.keycloak.provider.Provider;
    
    public class MyCustomProvider implements Provider {
        @Override
        public void close() {
            // Your cleanup code here
        }
    
        public void sendOTP(String email, String otp) {
            // Your email sending code here
        }
    }

And here is MyCustomProviderFactory.java:

    package com.mycompany.keycloak;
    
    import org.keycloak.Config;
    import org.keycloak.models.KeycloakSession;
    import org.keycloak.models.KeycloakSessionFactory;
    import org.keycloak.provider.ProviderConfigProperty;
    import org.keycloak.provider.ProviderFactory;
    
    public class MyCustomProviderFactory implements ProviderFactory<MyCustomProvider> {
        @Override
        public MyCustomProvider create(KeycloakSession session) {
            return new MyCustomProvider();
        }
    
        @Override
        public void init(Config.Scope config) {
            // Initialization code here
        }
    
        @Override
        public void postInit(KeycloakSessionFactory factory) {
            // Post-initialization code here
        }
    
        @Override
        public void close() {
            // Cleanup code here
        }
    
        @Override
        public String getId() {
            return "myCustomProvider";
        }
    }

In the pom.xml file, make sure to include Keycloak dependencies:

    <dependencies>
        <dependency>
            <groupId>org.keycloak</groupId>
            <artifactId>keycloak-core</artifactId>
            <version>${keycloak.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.keycloak</groupId>
            <artifactId>keycloak-server-spi</artifactId>
            <version>${keycloak.version}</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

Once you have implemented your custom provider and factory, you need to register it with Keycloak. You do this by adding a keycloak-server.json file in your META-INF directory:

    {
        "providers": [
            "classpath:${project.build.finalName}.jar"
        ],
        "spi": {
            "myCustomSpi": {
                "provider": "myCustomProvider",
                "enabled": true
            }
        }
    }

Remember to replace "myCustomSpi" and "myCustomProvider" with the SPI and provider IDs that you're using.

Finally, to register your SPI with Keycloak, you add it to the standalone.xml, standalone-ha.xml, or domain.xml file:

    <spi name="myCustomSpi">
        <provider name="myCustomProvider" enabled="true">
            <properties>
                <!-- Add any properties your SPI needs here -->
            </properties>
        </provider>
    </spi>

This is just a very basic example. In your actual implementation, you will need to implement the code to send the OTP via email or SMS, handle sessions, validate OTPs, etc. Also, note that Keycloak SPIs can be quite complex, depending on what you want to do. I recommend reading the Keycloak documentation on SPIs