Vue: add OAuth2 keycloak authentication

[Franceq34]

Prerequisites

• [x] https://github.com/jhipster/jhipster-lite/pull/10712
• [x] https://github.com/jhipster/jhipster-lite/issues/10876

TO-DO

• [x] Create a sample project that adds the OAuth2 Keycloak module to the Vue frontend client and shows it working with login and logout
• [x] Create the vue-oauth2-keycloak module in the JHLite project which depends on vue-core module
  • [x] Use keycloak-js dependency from COMMON package at AngularOAuth2ModulesFactory and remove it from ANGULAR package

[pascalgrimaud]

@Franceq34 : as you didn't start it yet, maybe @Bolo89 can take this ?

[pascalgrimaud]

Adding a bounty to motivate someone Did you start this one @Bolo89 ?

[Bolo89]

@pascalgrimaud the ticket is not started so someone else can take it

[pascalgrimaud]

Increasing the bounty to motivate people as it's a good feature to have

[DamnClin]

Warning : the goal is to build something modular and not doing lots of replacement to have something we can trust in time

[pascalgrimaud]

Totally agree, and maybe we should not do the same code than in generator-jhipster and produce a dedicated for jhlite

[DamnClin]

Totally. I think I have working integration but I need to think of a modular mechanism AND this is far from being my personal priority for JHLite :⁠-⁠). Cc @Gnuk

[renanfranca]

Hello,

I successfully completed the implementation of a sample project demonstrating the use of Keycloak with Vue, integrating it into a new frontend module following the recently defined pattern lead by @DamnClin . Here's the link to the pull request: https://github.com/renanfranca/jhlite-keycloak-sample-deed8534-9039-4c04-a6c6-3912e34dcc45/pull/1

Below is a demo video proving the functionality and highlighting that the Keycloak-related features have been thoroughly tested:

https://github.com/user-attachments/assets/8e5723de-d761-45e5-b497-acddc46b714e

Regarding the files from this sample that should be added to the vue-keycloak-module, in my opinion, the following should be included (without the respective test files, as it is part of the implementation details):

• src/main/webapp/app/auth/application/AuthProvider.ts
• src/main/webapp/app/auth/domain/AuthRepository.ts
• src/main/webapp/app/auth/domain/AuthenticatedUser.ts
• src/main/webapp/app/auth/infrastructure/secondary/KeycloakAuthRepository.ts
• src/main/webapp/app/auth/infrastructure/secondary/KeycloakHttp.ts
• src/main/webapp/app/main.ts (only the relevant changes)

Regarding the component (src/main/webapp/app/auth/infrastructure/primary/AuthVue.vue) that demonstrates the login functionality and the logout with Keycloak, as well as the AxiosAuthInterceptor (src/main/webapp/app/shared/http/infrastructure/secondary/AxiosAuthInterceptor.ts), I would like to create documentation and include the contents of these files (with the respective tests) in that documentation. The reason is that this was my first time working with Keycloak, and I believe it’s important to showcase the practical usage of the module.

Edit: Here is the documentation showcasing the vue authentication module usage: vue-auth-components.md

If you have anything to add or would like to share your thoughts, please let me know :)

cc: @DamnClin , @pascalgrimaud , @murdos , @qmonmert and @Gnuk

[renanfranca]

@pascalgrimaud: Bounty Claimed https://opencollective.com/generator-jhipster/expenses/221556. Thanks 😄👍

[pascalgrimaud]

@renanfranca : approved