Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue: account with authentication JWT #897

Closed
3 tasks done
pascalgrimaud opened this issue Mar 1, 2022 · 14 comments · Fixed by #11088 · May be fixed by #7554
Closed
3 tasks done

Vue: account with authentication JWT #897

pascalgrimaud opened this issue Mar 1, 2022 · 14 comments · Fixed by #11088 · May be fixed by #7554
Assignees
Labels
area: feature request 💡 $$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ client: vue theme: security $200 https://www.jhipster.tech/bug-bounties/

Comments

@pascalgrimaud
Copy link
Member

pascalgrimaud commented Mar 1, 2022

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
Copy link
Contributor

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

@pascalgrimaud
Copy link
Member Author

@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
Copy link
Member Author

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 pascalgrimaud added $$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ $200 https://www.jhipster.tech/bug-bounties/ labels Mar 12, 2022
@pascalgrimaud
Copy link
Member Author

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

@seraphinandrieux
Copy link
Contributor

Let's doing that :)

@seraphinandrieux
Copy link
Contributor

@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
Copy link
Member Author

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
Copy link
Contributor

@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
Copy link
Member Author

@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
Copy link
Contributor

I think we have to do ticket #1018 before

@abdelfetah18
Copy link
Contributor

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

@renanfranca
Copy link
Contributor

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:
image

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

@renanfranca
Copy link
Contributor

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

@pascalgrimaud
Copy link
Member Author

@renanfranca : approved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: feature request 💡 $$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ client: vue theme: security $200 https://www.jhipster.tech/bug-bounties/
Projects
None yet
6 participants
@renanfranca @pascalgrimaud @seraphinandrieux @abdelfetah18 and others