Authorization for the nuxt frontend

I don’t actually ever get to the /token endpoint. Here is my log:

and the error:

[Interestingly, despite using the proxy, it seems that the browser is redirected directly to keycloak after attempted login (though the login page is routed through the proxy). I have no idea why that is happening, or if that’s related to the problem.]

and in the docker keycloak logs:
20:43:29,383 WARN [org.keycloak.events] (default task-4) type=LOGIN_ERROR, realmId=sirixdb, clientId=null, userId=null, ipAddress=192.168.99.1, error=invalid_code

Crazy, have a look at what the body of the response from Keycloak is for the /authenticate endpoint. However, I think we probably could add the login as in the other providers case, for instance for github. Or we’d need to copy and change the oauth2 scheme, which is pretty bad :frowning:

Or we let Vert.x do the work and Nuxt.hs just stores the token and refresh token. That seems to work at least :wink:

And currently I’m a bit disappointed in Nuxt.js and its maintainers. Too much stuff, which doesn’t work out of the box :frowning: but I’m also new to front-end dev, that’s probably why it’s even more frustrating.

I’m also relatively new, so I can understand your pain.:woozy_face:

In general the heavy use of frontend frameworks tends to require a lot of very specific knowledge, rather than first principles. In Python, I would compare it to using Django as opposed to using Flask (more or less the difference between a framework and a library).
I don’t know the Java realm, so I don’t have an example you’d be more familiar with.

Just curious, why did you decide on Nuxt, instead of, say, plain Vue?

1 Like

Hmm, in principle it was a contribution for #Hacktoberfest. However, I like the concept of server side rendering (for the initial load) and universal web apps.

Theoretically, a combination of frontend and backend can be achieved without Nuxt, Nuxt is just a framework…
Being that I don’t have much frontend expertise, I don’t want to be the one to be hasty and push the project one way or another. That said, if we still can’t get it to work, it may be better to extract as much code as possible from the project, and try building from the ground up (read: without Nuxt).

Hm, I think we can leave it as it is for now, as the Authentication works with the SirixDB HTTP-Server (Vert.x based), instead of the Node.js Server from Nuxt.js. What stressed me so far was the lack of support for the auth module… at least if it’s just a question, it completely gets ignored.

I’ve read quiet some Tweets from Evan You, that Nuxt.js is super fast and it seems the standard for universal web apps with Vue.js.

And I think if we’d really want to get the authentication work with Nuxt.js instead of an intermediate proxying SirixDB HTTP-Server we’d have to write a simple Keycloak provider (more or less copy the github.js). In https://github.com/nuxt-community/auth-module/blob/dev/lib/providers/_utils.js the magic happens, where the client_secret is sent as well against the token endpoint.

1 Like

However, where to copy the file to? :wink:

Maybe we should at first work on getting data in and out of SirixDB now as we got it working with the SirixDB HTTP-Server :slight_smile: And I guess, as Keycloak is really getting more and more popular they have to add the provider at some point.

For now universal works fine, anyway :grinning:.
I agree with starting with data transfer, considering the problems with mockjs. That said, I just solved the mock issue, go to node_modules/axios/lib/adapters/xhr line 150, and change request.upload.addEventListener('progress', config.onUploadProgress); to request.addEventListener('progress', config.onUploadProgress); and mock works!

Can you make a PR? :slight_smile:

I assume you mean for axios? I’m looking right now for issues/PRs to connect it to.

Ahh… it’s technically not a “problem”, and I can’t make a PR for it. See, the whole point of request.upload as opposed to request is that the former listens for changes in the upload process. So the fact that it is request.upload is by design. So really this would have to be approached from the mockjs side.

Since we are talking about connecting to the server… I assume you have (mock?) data to upload to the server?

I’ve added a new topic with suggestions for the very first steps, I guess :slight_smile: