Vue: account with authentication JWT

[pascalgrimaud]

TO-DO

• Create a sample project that adds the jwt authentication to the vue-core module and shows it working with login and logout
• add vue jwt module #11047
• Add vue-jwt and vueoauth2app at the matrix in github-actions.yml. Delete the vueapp from generate.sh. Must be done in different pull request (I can't update the matrix before merge the generate.sh with the new vuejwtapp and vueoauth2app. The reason is that there is a step which tries to generate these two new apps using the generate.sh from the main branch) -> add vuejwtapp and vueoauth2app at the matrix in github-actions.yml #11088

[seraphinandrieux]

Hi Pascal,
Is it possible to work on this feature ?

[pascalgrimaud]

@seraphinandrieux : sure, but before starting the generator part, I would suggest to tackle this ticket with a sample project, then share it here, so we can be sure it's the right way
What do you think?

[pascalgrimaud]

So the order:

• working on sample project
• push to github project
• discuss
• once we agree, then working on the generator part in JH Lite

[pascalgrimaud]

Starting with this bounty. If it's more work than expected, I'll increase it

[seraphinandrieux]

Let's doing that :)

[seraphinandrieux]

@seraphinandrieux : sure, but before starting the generator part, I would suggest to tackle this ticket with a sample project, then share it here, so we can be sure it's the right way What do you think?

agree

[pascalgrimaud]

Don't hesitate to have a look at https://github.com/jhipster/jhipster-sample-app-vuejs

There are some good code there, we can take, polish and reorganize in HexaArch, specially the auth part with token

[seraphinandrieux]

@pascalgrimaud , I'm a bit confused about the limit of this ticket :
Should I also create a login form and the resource to get JWT token ? or just the front app with form or just automatically get JWT from front before building app ?

[pascalgrimaud]

@seraphinandrieux : if the ticket is too big, it can be splitted into smaller tickets

The idea is:

• given a Vue project with Security JWT and basic auth
• when I add account with Vue
• then, I should be able to log into the application

For generating a Vue project :
init, maven, java base, spring boot, spring boot tomcat, security jwt, basic auth, frontend maven plugin, vue

Then, about the work:

• add axios (like we did in JH Lite, maybe it could be done in a first PR)
• add the logic for managing JWT token
• add the secondary for calling /api/authenticate
• add the primary, related to the login page

As I suggest, the first step would be to work on a sample. Then we could split the generator part in several PRs maybe

If it's not clear, we can discuss about it tomorrow

[seraphinandrieux]

I think we have to do ticket #1018 before

[abdelfetah18]

Is anyone working on this one ?
if not, can i work on it ?

[renanfranca]

Hello,

I successfully completed the implementation of a sample project demonstrating the use of JWT with Vue, integrating it into a new frontend module following the recently defined pattern. Here's the link to the pull request: https://github.com/renanfranca/jhlite-vue-jwt-sample-9abbb8c1-da4d-4797-87f1-f470fb283e77/pull/1/files

Below is a demo video proving the functionality of JWT authentication:

vue-jwt-demo_.mp4

Here are the changes and created files:

I am going to add the following files, along with their tests, to the vue-jwt module:

• 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/domain/Authentication.ts
• src/main/webapp/app/auth/domain/LoginCredentials.ts
• src/main/webapp/app/auth/infrastructure/secondary/JwtAuthRepository.ts
• src/main/webapp/app/auth/infrastructure/secondary/RestAuthentication.ts
• src/main/webapp/app/auth/infrastructure/secondary/RestLoginCredentials.ts
• src/main/webapp/app/main.ts (minor changes)

I am going to create a markdown file that contains example file contents for the use of the vue-jwt module, similar to what was demonstrated in the demo video.

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