HTTP ERROR 401 Unauthorized on Jetty 9.x

Hi all

I am trying to make a request from a webapp to API service that is secure through Keycloak.

The API service has the following settings:

enter image description here

and it runs on Jetty with the following configurations:

jetty-web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE Configure PUBLIC "-//Mort Bay Consulting//DTD Configure//EN" "http://www.eclipse.org/jetty/configure_9_0.dtd">
<Configure class="org.eclipse.jetty.webapp.WebAppContext">
    <Get name="securityHandler">
        <Set name="authenticator">
            <New class="org.keycloak.adapters.jetty.KeycloakJettyAuthenticator">
                <Set name="adapterConfig">
                    <New class="org.keycloak.representations.adapters.config.AdapterConfig">
                        <Set name="realm">databaker</Set>
                        <Set name="resource">user-svc</Set>
                        <Set name="authServerUrl">http://localhost:8080/auth/</Set>
                        <Set name="sslRequired">external</Set>
                        <Set name="bearerOnly">true</Set>
                        <Set name="confidentialPort">0</Set>
                    </New>
                </Set>
            </New>
        </Set>
    </Get>
</Configure>

and the web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
    <servlet>
        <servlet-name>user-svc</servlet-name>
        <servlet-class>io.databaker.UserSvcServlet</servlet-class>
        <async-supported>true</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>user-svc</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>

    <security-constraint>
        <web-resource-collection>
            <url-pattern>/*</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>user</role-name>
        </auth-constraint>
        <user-data-constraint>
            <transport-guarantee>NONE</transport-guarantee>
        </user-data-constraint>
    </security-constraint>

    <login-config>
        <auth-method>BASIC</auth-method>
        <realm-name>databaker</realm-name>
    </login-config>

    <security-role>
        <role-name>user</role-name>
    </security-role>


</web-app>

The API service is running on http://localhost:9090. When I make a request with the web app to the API service, it shows:

enter image description here

although the Authorization: Bearer is giving:
enter image description here

Do I miss any configuration on Keycloak or what am I doing wrong?

Thanks

This is the way, how to get the client token:

const config = {
  headers: {
    'Authorization': `Bearer ${this.$kc.token}`,
    'Content-Type': 'application/json'
  }
}

this.$user_svc_url
  .get(`/`, config)
  .then(res => {
    console.log(res)
  })
  .catch(console.log)