Quarkus Application with Form Authentication using Database

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

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!";
	}
	}

view raw SampleResource.java hosted with ❤ by GitHub

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>

view raw error.html hosted with ❤ by GitHub

	<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>
	<h4 id="content_public" style="color: blue">
	</h4>
	<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>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script lang="js">
	const LOGGED_COOKIE = "quarkus-credential";
	$(() => {
	$.get("/sample/public", data => {
	console.log(data);
	$("#content_public").text(data);
	});
	$.get("/sample/info", data => {
	if (data) {
	console.log(data)
	$("#login_link").hide();
	$("#user_message").text("Hello, " + data);
	$("#logout").show();
	$("#logged").show();
	loadRestrictedContent();
	} else {
	$("#login_link").show()
	}
	});
	});
	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>

view raw index.html hosted with ❤ by GitHub

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

view raw login.html hosted with ❤ by GitHub

	<h1>This is a Secured page! If you can see it you are authenticated</h1>
	<a href="/">Go back to home page</a>

view raw secured_index.html hosted with ❤ by GitHub

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.