DEV Community

Cover image for How to Implement Nuxt.js/Vue.js OAuth2 Authentication With an External REST-API Server (based on Vert.x/Kotlin) and Keycloak 🐬

How to Implement Nuxt.js/Vue.js OAuth2 Authentication With an External REST-API Server (based on Vert.x/Kotlin) and Keycloak 🐬

Johannes Lichtenberger on November 17, 2019

Introduction Authentication is hard. Therefore it's best to delegate authentication to a dedicated Software. In our case, we decided to ...
Collapse
 
liyasthomas profile image
Liyas Thomas

This is great! πŸ™ Thanks for the article.

Can we have a Nuxt Vue Firebase auth tutorial πŸ™ƒ perhaps with CRUD operations on Firestore πŸ˜ŠπŸ‘‹ (if you'd seen any such tutorial, please DM/reply. It would be great πŸ™

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

Hey, sadly not and I have to say it has driven me crazy, to figure out what's going on and what exactly Nuxt.js is doing as I'm super new to the front-end stuff and never worked with Vue.js and Nuxt.js or JavaScript and TypeScript. Even CORS has driven me crazy ;) Currently I'm reading a book about TypeScript and one about D3.js, hope I'm then able to finally start some "real" work on the visualizations and with the document store itself :-)

Collapse
 
liyasthomas profile image
Liyas Thomas

Wow. Then I've to appreciate your efforts! You're doing great πŸ‘ŒπŸΎπŸ‘‹πŸ½

Thread Thread
 
johanneslichtenberger profile image
Johannes Lichtenberger

I'm really happy that I got it up and running :-)

Collapse
 
nickbolles profile image
Nick Bolles

For the typings for nuxt-auth see my stack overflow answer here for a more standard way of doing the typings
stackoverflow.com/a/59011507

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

Actually it's from your answer ;-)

Collapse
 
nickbolles profile image
Nick Bolles • Edited

But your copying and pasting the typings. From my SO answer, you can add @types/nuxtjs__auth as a npm dev dependency and then add the package name to your tsconfig -> compilerOptions.types array.

Also, the "typings" key in your package.json is for including typings in published npm packages. And ussually that's not how nuxt is used (nuxt apps just consume typings, nothing usually consumes the nuxt app itself besides the nuxt-cli, so there's no need to define typings for the nuxt app)

Thread Thread
 
johanneslichtenberger profile image
Johannes Lichtenberger

Ah, no, your answer is new, I think :-) thanks

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

BTW: If anyone figures out, how to extend the basic oauth2 Nuxt.js config, that it would also work in universal mode with Node.js (standard) and without an API-server proxy (the SirixDB HTTP-Server in this case) let me know, how to send the client_secret in the code for token exchange request. It is simply not sent usually :(

cmty.app/nuxt/auth-module/issues/c445

Collapse
 
ptrckdev profile image
Patrick Strobel

why would you put a client_secret into the users browser? ^^ You have to create a new client in keycloak with a public access type, because that's what your "secret" would be if you put it in a browser: public :D

Collapse
 
mpgalaxy profile image
mpgalaxy

Hi, thank you so much for this, it is really great! ;)
I'm developing a nuxt.js universal app which is being secured by keycloak (openidconnect) via the nuxt auth module. Everything works fine until I'm stuck behind a proxy server. The openidconnect flow (standard flow) posts server side to get the access and refresh token. This times out behind a corporate proxy. I would need to intercept the openidconnect flow to tell axios to use the company proxy just for the call to fetch the token. I already build an interceptor for axios, but I can't access the point, where the token is being fetched, the interceptor always runs after the login and token fetch process is finished (e.g. logout). I don't want global proxy configuration, because 99% of my axios calls on server side are internal, thus not needing the proxy. How can I intercept THE axios call for fetching the token and provide it with a custom axios interceptor, which inclues the proxy configuration ? ;)

Collapse
 
mkhgfdrtt profile image
JT

I have never heard of SirixDB.

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger • Edited

It's a temporal document store which never overrides data.

  • if you ever encountered human or application errors when storing data in a database it might be for you (simply revert to a known good snapshot and store a new revision with fixed data)
  • if you ever had to audit what was in the database at a specific time it might be for you (every revision is indexed, unchanged database pages are shared between revisions...)
  • if you ever had to analyse how something changed over time you can do time-travel queries. For instance selecting a price of a product (might be a JSON record value and you can simply fetch all past versions). Or you can do really sophisticated time travel queries...

Basically It's all about versioning, even the database pages are stored in fragments to write changes on a fine granular level.

The revision timestamp, the time a transaction commits is only stored once for all the changed data in a RevisionRootPage.

All records might be hashed in a merkle tree with a rolling hash function.