Quarkus Application with Form Authentication using Database

Screenshot%2Bfrom%2B2019-12-28%2B02-08-35.png

Let's create a simple Quarkus application that uses databases table for authorization and authentication. This tutorial uses MariaDB and Quarkus 1.1.0.Final.

Database configuration

Remember to NEVER store plain text in the database. Elytron has the tools to use bcrypt for password encryption as described in the Quarkus JDBC security guide.

We need to configure the database tables where the user, password and roles will be stored. Let's create the tables in the database:

* User table keeps the username and password;
* Roles is where you can find all the system roles;
* User_role is user mapping to their roles

Which translated to the following SQL:

create table user(id int primary key,
username varchar(100) unique,
password varchar(1000));
create table role(id int primary key, name varchar(100));
create table user_role(user_id int references user(id),
role_id int references role(id),
primary key (user_id, role_id));

Create a database with the tables above and it will allow us to retrieve user information from the database.

Create Quarkus application

Screenshot%2Bfrom%2B2019-12-26%2B15-04-46.png

Generating an application Go to code.quarkus.io, fill groupId, artifactId and version, then select the extension JDBC Driver - MariaDB* and Elytron Security JDBC Realm. Download the application, unzip it and import in the IDE you want. I will use VSCode with Quarkus extension and Java tooling.

* Change the JDBC driver according to the database you are using.

Application configuration

We need to configure at least 3 things:

* Datasource that connects to the database;
* Specific security JBDC configuration;
* Permissions

It translates to the following in application.properties:

### 1 - DATASOURCE CONFIGURATION ###

quarkus.datasource.url=jdbc:mysql://localhost:3306/quarkus_form_example

quarkus.datasource.driver=org.mariadb.jdbc.Driver

quarkus.datasource.username=root

### 2 - SECURITY CONFIGURATION ###

quarkus.http.auth.form.enabled=true

quarkus.security.jdbc.enabled=true

quarkus.security.jdbc.principal-query.sql=select... see below

quarkus.security.jdbc.principal-query.clear-password-mapper.enabled=true

quarkus.security.jdbc.principal-query.clear-password-mapper.password-index=1

quarkus.security.jdbc.principal-query.attribute-mappings.0.index=2

quarkus.security.jdbc.principal-query.attribute-mappings.0.to=groups

### 3 - SECURITY URIS MAPPING ###

quarkus.http.auth.permission.permit1.paths=/secured/*

quarkus.http.auth.permission.permit1.policy=authenticated

The value for property quarkus.security.jdbc.principal-query.sql is:

select u.password, r.name from user u, user_role ur,role r where u.id = ur.user_id AND r.id = ur.role_id and u.username = ? group by u.password;

In section one we configure how to connect to a database where all credentials are stored. In 2 the security specific properties for JDBC and we also make sure that it will use form authentication by telling how to retrieve the principal, password and roles from the database (notice the question mark, which is where quarkus will add the username) and finally we may map security policies to URIs. In the example above we just say that content under /secured will only be accessible by logged users. We will add more authorization in the application HTTP endpoints.

Authorization

Let's create a resource specific for manager and user and another one only for manager. In the index page some content will only show if you are logged as admin or user.

package org.fxapps;

import java.security.Principal;

import javax.annotation.security.PermitAll; import javax.annotation.security.RolesAllowed; import javax.ws.rs.GET; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.core.Context; import javax.ws.rs.core.MediaType; import javax.ws.rs.core.SecurityContext;

@Path("/sample") public class SampleResource {

final static String MANAGER_ROLE = "manager"; final static String USER_ROLE = "user";

@GET @Path("info") @PermitAll public String userInfo(@Context SecurityContext securityContext) { Principal userPrincipal = securityContext.getUserPrincipal(); if (userPrincipal != null) { return userPrincipal.getName(); } // translates to "no content" response return null;

}

@GET @PermitAll @Path("public") @Produces(MediaType.TEXT_PLAIN) public String freeForAll() { return "Everyone can access this!"; }

@GET @Path("user_managers") @Produces(MediaType.TEXT_PLAIN) @RolesAllowed({ USER_ROLE, MANAGER_ROLE }) public String contentForUsersAndManagers() { return "Only users and managers can see this!"; }

@GET @Path("managers") @Produces(MediaType.TEXT_PLAIN) @RolesAllowed({ MANAGER_ROLE }) public String contentManagers() { return "Only MANAGERS can see this!"; } }

Finally we can focus on the user interface. Let's create very simple pages to show the authorization and authentication in action.

Create pages

See the most import parts of the pages used in our application:

error.html: User is redirected to this page when login fails
login.html: The login page should send the credentials to the authentication endpoint passing the username and the password
secured/index.html: very simple page to show access to a secured static resource
index.html: This is where we show content according to the logged user which makes it a little more complex

<h2>Authentication Error! Verify your credentials and try again.</h2>

<a href="/login.html">Login Page</a>

<div class="banner lead"> FXApps: Quarkus application Form Authentication using Database </div>

<div class="container"> <div class="left-column"> <p class="lead">This application has login and authorization</p>

<h2>Public content</h2>

<div id="logged" style="display:none"> <h2>Only for logged users!</h2> <h3 style="color:orange" id="content_users"></h3> <h4 style="color:red" id="content_managers"></h4>

</div> </div> <div class="right-column"> <div class="right-section"> <h3><a id="login_link" href="login.html">Login</a> <em id="user_message"></em></h3> <p>Try to see some <a href="/secured">secured content</a></p> <p><button id="logout" style="display:none" onclick="logout()">Logout</button></p> </div> </div>

function logout() { console.log("logging out") document.cookie = LOGGED_COOKIE + '=; Max-Age=0' window.location.href = "/"; }

function loadRestrictedContent() { $.get("/sample/user_managers", data => { $("#content_users").text(data); });

$.get("/sample/managers", data => { $("#content_managers").text(data); }) } </script>

<form action="j_security_check" method="post"> <div class="container"> <label for="j_username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="j_username" required>

<label for="j_password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="j_password" required>

<button type="submit">Login</button>

</div> </form>

<h1>This is a Secured page! If you can see it you are authenticated</h1>

Notice the content_public, content_user and content_manager headers in index.html, they are filled by Javascript and for this we use JQuery, see the script tags at the end of index.html.
An interesting method is logout. What we do is simply cancel the session cookie! The other logic in script is to try to retrieve content from the server and change the DOM accordingly.

Finally we are done! Now our index page content changes according to the logged user, see the result:

The source code can be found on my github.

Database configuration

Create Quarkus application

Application configuration

Authorization

Create pages

Recommend

Add Grafana to your Spring / Quarkus application using Jelastic

Using a "new" form to modify the database

FXApps: Database Query Server using Quarkus

Implementing Authentication in an Angular Application Using Auth0

Ajax and Form Authentication

Authentication Using the Auth0 to a React Application

Building an Authentication Form using Jetpack Compose

Testing an Authentication Form with Jetpack Compose

REST Crud Application using Quarkus and Vue.js

Joyful Quarkus Application Development using Testcontainers Desktop

About Joyk