Vue: authentication JWT #1759

matthieuRioual · 2022-05-17T14:45:42Z

Add authentication progress to vue application through pinia storage.

A login page has been created as a guard route.

Once connected you can access application single page and check your identity or ever log out.

Before adding jwt to vue generated application, make sur you added pinia or it gonna throw an error.

You can test it on this branch with credentials "admin, admin"

fix Vue: account with authentication JWT #897

codecov · 2022-05-17T15:24:48Z

Codecov Report

Merging #1759 (2475994) into main (de9ba2f) will not change coverage.
The diff coverage is 100.00%.

❗ Current head 2475994 differs from pull request most recent head 9ec4442. Consider uploading reports for the commit 9ec4442 to get more accurate results

@@             Coverage Diff              @@
##                main     #1759    +/-   ##
============================================
  Coverage     100.00%   100.00%            
- Complexity      2179      2226    +47     
============================================
  Files            453       458     +5     
  Lines           7903      8067   +164     
  Branches         178       179     +1     
============================================
+ Hits            7903      8067   +164

Impacted Files	Coverage Δ
...rity/jwt/application/VueJwtApplicationService.java	`100.00% <100.00%> (ø)`
...nerator/client/vue/security/jwt/domain/VueJwt.java	`100.00% <100.00%> (ø)`
...t/vue/security/jwt/domain/VueJwtDomainService.java	`100.00% <100.00%> (ø)`
...infrastructure/config/VueJwtBeanConfiguration.java	`100.00% <100.00%> (ø)`
...wt/infrastructure/primary/rest/VueJwtResource.java	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de9ba2f...9ec4442. Read the comment docs.

pascalgrimaud · 2022-05-18T09:45:27Z

I edited your initial description to link to the original ticket

...ch/jhipster/lite/generator/client/vue/security/jwt/application/VueJwtApplicationService.java

pascalgrimaud · 2022-05-18T09:53:45Z

.../jhipster/lite/generator/client/vue/security/jwt/application/VueJwtApplicationServiceIT.java

+    assertFileExist(project, "src/main/webapp/app/common/domain/Login.ts");
+    assertFileExist(project, "src/main/webapp/app/common/primary/login/index.ts");
+    assertFileExist(project, "src/main/webapp/app/common/primary/login/Login.component.ts");
+    assertFileExist(project, "src/main/webapp/app/common/primary/login/Login.html");
+    assertFileExist(project, "src/main/webapp/app/common/primary/login/Login.vue");
+    assertFileExist(project, "src/main/webapp/app/common/secondary/LoginDTO.ts");
+    assertFileExist(project, "src/main/webapp/app/common/domain/AuthenticationService.ts");
+    assertFileExist(project, "src/main/webapp/app/common/domain/JWTStoreService.ts");
+    assertFileExist(project, "src/main/webapp/app/common/domain/Logger.ts");
+    assertFileExist(project, "src/main/webapp/app/common/domain/Message.ts");


you can define a common variable, using Constants.MAIN_WEBAPP + app/common

pascalgrimaud · 2022-05-18T09:55:24Z

.../jhipster/lite/generator/client/vue/security/jwt/application/VueJwtApplicationServiceIT.java

+
+  @Test
+  void shouldAddVueJwt() {
+    Project project = tmpProjectWithPackageJsonPinia();


do we need a package.json with pinia here, as the next service will add pinia ?

Since the main method for adding jwt checks if pinia is present int the package json, i had no choice but to add pinia in the file for testing or it would throw an exception because pinia is missing.

pascalgrimaud · 2022-05-18T09:57:35Z

src/main/java/tech/jhipster/lite/generator/client/vue/security/jwt/domain/VueJwt.java

+
+  private VueJwt() {}
+
+  public static final String PACKAGE_JSON = "package.json";


already exist in Constants, no need to redefine it here

...in/java/tech/jhipster/lite/generator/client/vue/security/jwt/domain/VueJwtDomainService.java

pascalgrimaud · 2022-05-18T10:13:06Z

.../resources/generator/client/vue/webapp/app/jwt/primary/welcome/Welcome.component.ts.mustache

+import { User } from '@/common/domain/User';
+import { Router } from 'vue-router';
+
+


prettier: should remove this line

pascalgrimaud · 2022-05-18T10:14:46Z

src/main/resources/generator/client/vue/webapp/app/jwt/primary/welcome/Welcome.html.mustache

@@ -0,0 +1,26 @@
+<div id="welcome">


same, don't understand this page, as there is already a home page, generated by vue/core

pascalgrimaud · 2022-05-18T10:15:16Z

src/main/resources/generator/client/vue/webapp/app/jwt/secondary/ConsoleLogger.ts.mustache

@@ -0,0 +1,10 @@
+import { Logger } from '@/common/domain/Logger';


maybe it should be included by default in vue/core, instead of this PR ?

pascalgrimaud · 2022-05-18T10:15:30Z

src/main/resources/generator/client/vue/webapp/app/jwt/secondary/LoginDTO.ts.mustache

@@ -0,0 +1,13 @@
+import { Login } from '@/common/domain/Login';
+
+export interface LoginDTO {


as said previously, the name is a little bit strange

pascalgrimaud · 2022-05-18T10:17:31Z

src/main/resources/generator/client/vue/webapp/app/router/router.ts.mustache

@@ -9,13 +11,50 @@ const routes = [
  {
    path: '/app',
    name: 'App',
-    component: AppVue,
+    {{#auth}}


I don't think we should do this, as the router already exist in the project, with specific routes from the user. By doing this, you'll erase all the route.

Instead, we should insert the new routes, in an existing file

pascalgrimaud · 2022-05-31T15:12:00Z

src/main/resources/generator/client/vue/test/spec/jwt/Router.spec.ts.mustache

@@ -0,0 +1,60 @@
+import { AppVue } from '@/common/primary/app';


this file should not replace the existing one

pascalgrimaud · 2022-05-31T15:12:29Z

src/main/java/tech/jhipster/lite/generator/client/vue/security/jwt/domain/VueJwt.java

+    "\t{",
+    "\tpath: '/login',",
+    "\tname: 'Login',",
+    "\tcomponent: LoginVue,",
+    "\t},",
+    "\t{",
+    "\tpath: '/',",
+    "\tname: 'Homepage',",
+    "\tcomponent: AppVue,",
+    "\t},"


don't use tab (\t), use space instead

pascalgrimaud · 2022-05-31T15:14:13Z

src/main/java/tech/jhipster/lite/generator/client/vue/security/jwt/domain/VueJwt.java

+    return List.of("AuthenticationRepository.spec.ts", "restLogin.spec.ts", "UserDTO.spec.ts");
+  }
+
+  public static Map<String, String> appComponent() {


same, don't use tab, prefer using space instead

Then, it's better to use text block

pascalgrimaud · 2022-05-31T15:14:29Z

src/main/java/tech/jhipster/lite/generator/client/vue/security/jwt/domain/VueJwt.java

+      "\t<div v-if=\"isAuthenticated\">",
+      "\t\t<p>You are connected as </p>",
+      "\t\t<div v-if=\"user.username == ''\">",
+      "\t\t\t<button id=\"identify\" @click.prevent=\"onConnect\">click to see</button>",
+      "\t\t</div>",
+      "\t\t<div v-else>",
+      "\t\t\t<p>{{user.username}}</p>",
+      "\t\t\t<button id=\"logout\" @click.prevent=\"onLogout\">click to logout</button>",
+      "\t\t</div>",
+      "\t</div>",
+      "\t<div v-else>",
+      "\t\t<p>You are not connected</p>",
+      "\t\t<router-link to=\"/login\">Login</router-link>",
+      "\t</div>",


same about \t

pascalgrimaud · 2022-05-31T15:16:52Z

src/main/resources/generator/client/vue/test/spec/jwt/primary/app/App.spec.ts.mustache

@@ -0,0 +1,90 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';


still don't understand this file, as the App.spec.ts already exists. This context should not generate a new one

pascalgrimaud · 2022-05-31T15:19:15Z

another comment: this feature is not tested in the CI, you need to update the generate.sh file

pascalgrimaud added area: feature request 💡 client: vue labels May 18, 2022

pascalgrimaud requested changes May 18, 2022

View reviewed changes

pascalgrimaud marked this pull request as draft May 18, 2022 10:18

pascalgrimaud changed the title ~~Jwt vue secondary~~ Vue: authentication JWT May 18, 2022

pascalgrimaud mentioned this pull request May 19, 2022

Vue: add login context with simple form page #1591

Closed

matthieuRioual marked this pull request as ready for review May 23, 2022 02:21

pascalgrimaud marked this pull request as draft May 31, 2022 15:11

pascalgrimaud requested changes May 31, 2022

View reviewed changes

matthieuRioual marked this pull request as ready for review June 1, 2022 19:53

matthieuRioual added 6 commits June 2, 2022 10:42

Add jwt authentication to Vue generated application

81a3db2

Remove restLogin java's files

5cec11d

Jwt authentication for vuejs application

f4733d3

Fix smell code for generated app

24949e1

Add vue cucumber tests

f2a4198

Cucumber test jwt

9ec4442

matthieuRioual closed this Jun 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue: authentication JWT #1759

Vue: authentication JWT #1759

matthieuRioual commented May 17, 2022 •

edited by pascalgrimaud

Loading

codecov bot commented May 17, 2022 •

edited

Loading

pascalgrimaud commented May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 18, 2022

matthieuRioual May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 18, 2022

pascalgrimaud May 31, 2022

pascalgrimaud May 31, 2022

pascalgrimaud May 31, 2022

pascalgrimaud May 31, 2022

pascalgrimaud May 31, 2022

pascalgrimaud commented May 31, 2022


		private VueJwt() {}

		public static final String PACKAGE_JSON = "package.json";

		import { User } from '@/common/domain/User';
		import { Router } from 'vue-router';

		@@ -0,0 +1,10 @@
		import { Logger } from '@/common/domain/Logger';

		@@ -0,0 +1,13 @@
		import { Login } from '@/common/domain/Login';

		export interface LoginDTO {

		@@ -0,0 +1,60 @@
		import { AppVue } from '@/common/primary/app';

		@@ -0,0 +1,90 @@
		import { shallowMount, VueWrapper } from '@vue/test-utils';

Vue: authentication JWT #1759

Vue: authentication JWT #1759

Conversation

matthieuRioual commented May 17, 2022 • edited by pascalgrimaud Loading

codecov bot commented May 17, 2022 • edited Loading

Codecov Report

pascalgrimaud commented May 18, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pascalgrimaud commented May 31, 2022

matthieuRioual commented May 17, 2022 •

edited by pascalgrimaud

Loading

codecov bot commented May 17, 2022 •

edited

Loading