Integrate spring-addons BFF with Nuxt 3 (Vue)

[devozs]

Hi Everyone,

Was anyone able to replace angular in the given example and integrate BFF with Vue?
I encounter UserManager of "oidc-client-ts" (pinia as store) and i wonder if it can be used together with spring-addons BFF implementation.
I`ll be glad to get any relevant reference, best practice or recommended libraries that you are using.

Thanks!

[devozs]

Another related question / issue to NUXT usage.
There is ERR_ABORTED 400 (Bad Request) when NUXT trying to access any gateway route of "_nuxt/pages".
for example: http://localhost:8080/ui/_nuxt/pages/tournament

[ch4mpy]

I encounter UserManager of "oidc-client-ts" (pinia as store) and i wonder if it can be used together with spring-addons BFF implementation.

From https://github.com/authts/oidc-client-ts

Library to provide OpenID Connect (OIDC) and OAuth2 protocol support for client-side, browser-based JavaScript client applications

The BFF pattern intends precisely not to use such libs which make the SPA a public OAuth2 client. With such libs, tokens are delivered to the application running in the browser and this application then uses this tokens to authorize direct calls to resource server.

This is unsafe and Spring Security team now recommends to use only confidential clients and the BFF pattern where requests from the SPA (your Vue app, the Angular app in the tutorial, React apps, Flutter web apps, etc) are authorized with session cookie and CSRF token, not with access tokens in Authorization header which is used only between the BFF and the resource server.

In the BFF pattern the OAuth2 client is a component running server-side, not the single page app running in the browser on the user device. In the tutorials the BFF is a spring-cloud-gateway, but if you have some server-side rendering and if the OAuth2 client library you use is able to run on the server-side part of your app (like next-auth can do in next.js apps for instance), this is BFF too: this library can use a secret (because it is not running on user device and cannot be reverse engineered there to steal the password), and so

• be a "confidential" client (authenticate its requests to the authorization server token endpoint with a password so that we are sure that tokens are delivered to a trusted client)
• store tokens only in server memory (tokens are not leaked over the internet and to the user device)

Edit

The BFF tutorial moved to Baeldung now includes a frontend written with Vue (in addition to Angular and React).

[devozs]

Thanks a lot for the detailed answer.
I might be close to make it work in some way based on your angular example.

I am pretty sure it's not the best way to implement it but I'll wrap the code and share it here so others might use it as reference for nuxt 3 usage together with pinia store.

[ch4mpy]

The BFF tutorial migrated on Baeldung now contains sample implementation for Vue (in addition to Angular and React). So I'll mark this thread as answered.