DEV Community

OAuth2 auth with Nuxt.js/Vue.js (frontend), Vert.x (backend for BL) and Keycloak (auth server) 👩‍💻👨‍💻

Johannes Lichtenberger on October 23, 2019

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

Read full post

Johannes Lichtenberger • Oct 23 '19

I've managed to use the Nuxt.js axios module now. I got rid of the internal server error. However, axiom for instance doesn't seem to use the baseURL specified.

M#3 • Oct 24 '19

I am not a vue expert and I have started to use vue very recently (switched from ng 1). But I also gone through the same type of issues and most of the time I had no clue over certain errors.

Did you update the base url inside the nuxt.config.js?

  axios: {
    baseURL: 'http://example.test'
  },

** Changes to nuxt.config.js wont be detected until you restart the prcoess.

P.S.
I would highly recommend the dotenv module for easier env level configurations
github.com/nuxt-community/dotenv-m...

Johannes Lichtenberger • Oct 24 '19

Okay, Update: I had to add the browserBaseURL:

browserBaseURL: '127.0.0.1:9443'

However, the strange thing is

this.$axios
  .$get("/user/authorize", {})
  .then((res: any) => {
    console.log(res);
  });

This somehow produces an OPTIONS HTTP-request instead of a GET HTTP-request.

Johannes Lichtenberger • Oct 24 '19

It seems the whole axios module configuration isn't recognized:

  axios: {
    baseURL: 'https://127.0.0.1:9443',
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxyHeaders: true,
    proxy: true
  }

And request is sent to localhost:3005 instead with headers:

Accept  
application/json, text/plain, */*
Accept-Encoding 
gzip, deflate
Accept-Language 
en-US,en;q=0.5
Connection  
keep-alive
Cookie  
co_SId=76771689452D3D85F5940E3…local; auth.redirect=%2Fquery
DNT 
1
Host    
localhost:3005
Referer 
http://localhost:3005/login
User-Agent  
Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/69.0

Code is simply:

import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Login extends Vue {
  private login(): void {
    console.log("bla")
    this.$axios
      .$get("/user/authorize", {})
      .then((res: any) => {
        console.log(res);
      });
  }
}

Johannes Lichtenberger • Oct 24 '19

Yes: github.com/sirixdb/sirix-web-front...

Yeah, I'm trying to learn Nuxt.js, Vue.js, TypeScript and D3.js, but I'm eager to learn :-)

M#3 • Oct 24 '19

Mhh.. couldn't find anything odd (but I am not familiar with TypeScript (ES only)

Here is my working setup (minimal code)
gist.github.com/zspine/efa32262b12...

Johannes Lichtenberger • Oct 24 '19

Oh wow, can you make a PR maybe? :-)

I think Vert.x also has to send an HTTP-Header for CORS, to allow any origin: Access-Control-Allow-Origin: *

And the error is different with Chrome (I've used Firefox until now):
GET 127.0.0.1:9443/user/authorize net::ERR_CERT_AUTHORITY_INVALID

because of a self-signed certificate :(

However, so with your code it's already working!? 👍 That would be beyond awesome :)

M#3 • Oct 24 '19

I wish I can be more helpful but unfortunately busy with a deadline. :( That was just a copy paste from my current project and it uses server side httponly cookie based authentication.

I think your custom axios plugin doing the right thing with "new https.Agent" configuration. You can apply the same thing to nuxt axios module.

Johannes Lichtenberger • Oct 24 '19

aww, thanks for the hints :)

Johannes Lichtenberger • Oct 27 '19

Hmm, does someone, know why the host could not be resolved when the Vert.x server redirects to Keycloak?

keycloak:8080/auth/realms/sirixdb/...

At least in the docker network it is for instance reachable by the server service (Vert.x based HTTP-Server), but not from the "frontend backend server", that is Node.js.

My docker-compose file:

version: '3'
services:
  waitforkeycloak:
    image: dadarek/wait-for-dependencies
    depends_on:
      - keycloak
    command: keycloak:8080
  keycloak:
    image: jboss/keycloak
    ports:
      - 8080:8080
    environment:
      - KEYCLOAK_USER=admin
      - KEYCLOAK_PASSWORD=admin
      - KEYCLOAK_LOGLEVEL=DEBUG
      - KEYCLOAK_IMPORT=/opt/keycloak/realm-export.json
    restart: always
    volumes:
      - ./sirix/bundles/sirix-rest-api/src/test/resources/realm-export.json:/opt/keycloak/realm-export.json
    command:
      - "-b 0.0.0.0"
      - "-bmanagement 0.0.0.0"
  server:
    build: ./sirix
    image: sirixdb/sirix
    ports:
      - "9443:9443"
    restart: always
    volumes:
      - /opt/sirix
      - ./sirix/bundles/sirix-rest-api/src/main/resources/cert.pem:/opt/sirix/sirix-data/cert.pem
      - ./sirix/bundles/sirix-rest-api/src/main/resources/key.pem:/opt/sirix/sirix-data/key.pem
      - ./sirix/bundles/sirix-rest-api/src/main/resources/sirix-conf.json:/opt/sirix/sirix-conf.json
    depends_on:
      - keycloak
  frontend:
    build: ./sirix-web-frontend
    image: sirixdb/sirix-web-frontend
    ports:
      - "3005:3005"
    restart: always
    volumes:
      - /usr/src/nuxt-app
    depends_on:
      - server
      - keycloak

Johannes Lichtenberger • Oct 27 '19

I've added a section in the README how to set things up with docker-compose...