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

[M#3]

Hi

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.

1. 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]

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]

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]

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]

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]

aww, thanks for the hints :)

[Johannes Lichtenberger]

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]

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);
      });
  }
}