Hi all,

I need help with a Nuxt.js based frontend, which should use OAuth2 authentication code flow for authorization. Basically I don't want to use a SessionHandler and a CookieHandler on the Vert.x server side to prevent having to store state on the server (for scalability reasons in the future).

1. Basically I have a button which should execute a GET request on click to https://localhost:9443/user/authenticate.
2. On the server side the route will redirect to Keycloak for a login site. Then keycloak will redirect back to a given URL.
3. The frontend will now have to extract the generated "code" from Keycloak and make another POST request to https://localhost:9443/token to get a JWT token.

Something like this:

axios.post('https://localhost:9443/token', {
  "code": this.code,
   "redirect_uri": this.redirect_uri //extra meta data needed
}).then(response => {
  var access_token = JSON.parse(response.request.response).access_token
  this.createNewResource(access_token)
})

Basically it should work like this Gist of a React component

However, I'm totally stuck as I'm super new to the frontend stuff.

It is this issue:

Vue.js Auth Component #31

JohannesLichtenberger posted on Oct 18, 2019

We need a component, which extracts the code from the redirected to URL (from the OAuth2 auth code flow) and exchange this code with a token (/token) endpoint on the SirixDB HTTP-Server. This token then needs to be sent in subsequent requests, so we can probably store it in the store!?

View on GitHub

I've tried some things in a branch, but I'm currently getting an internal server error (500) from Node.js and I have no clue why.

The Node.js server is running on port 3005 so I had all sorts of issues with CORS and a self signed certificate (for testing purposes)...

Setting up the SirixDB HTTP-Server and Keycloak should be doable via docker-compose. Have a look at the REST-API documentation.

Maybe someone has done a similar login already with Nuxt.js, would be great 💚

Update:24.10.: Added a CORS-Handler on the Vert.x server. Now I'm running into a docker problem: How do I address a host, which is not in the docker-network (the Nuxt.js application / the Node.js server running on localhost:3005):

GET http://keycloak:8080/auth/realms/sirixdb/protocol/openid-connect/auth?redirect_uri=http%3A%2F%2Fkeycloak%3A3005&response_type=code&client_id=sirix net::ERR_NAME_RESOLUTION_FAILED
commons.app.js:1001 Uncaught (in promise) Error: Network Error
    at createError (commons.app.js:1001)
    at XMLHttpRequest.handleError (commons.app.js:536)
createError @ commons.app.js:1001
handleError @ commons.app.js:536
Promise.then (async)
login @ index.js:42
click @ index.js:82
invokeWithErrorHandling @ commons.app.js:15696
invoker @ commons.app.js:16021
invokeWithErrorHandling @ commons.app.js:15696
Vue.$emit @ commons.app.js:17719
handleClick @ vendors.app.js:15399
invokeWithErrorHandling @ commons.app.js:15696
invoker @ commons.app.js:16021
original._wrapper @ commons.app.js:20744

kind regards
Johannes