Merge pull request #42 from zazuko/auth-flow

fix and issue when the auth was invalid but a password was set

Author: BenjaminHofstetter

projects/blueprint/src/app/core/service/auth/auth.service.ts

@@ -6,33 +6,39 @@ const localStorageAuthKey = 'com.zazuko.blueprint.bp-auth';
   providedIn: 'root',
 })
 export class AuthService {
-  private credentials: Credentials | null = null;
+  #credentials: Credentials | null = null;
 
   constructor() {
-    const credentials = this.readSessionStorage();
+    // this will only happen when the user is reloading the page
+    const credentials = this.#readSessionStorage();
     if (credentials !== null) {
-      this.credentials = credentials;
+      this.#credentials = credentials;
     }
   }
 
   public isAuthenticated(): boolean {
-    return this.credentials !== null;
+    return this.#credentials !== null;
   }
 
   public getCredentials(): Credentials | null {
-    return this.credentials;
+    return this.#credentials;
   }
 
   public updateCredentials(credentials: Credentials | null) {
-    this.credentials = credentials;
+    this.#credentials = credentials;
     if (credentials === null) {
-      this.removeSessionStorage();
+      this.#removeSessionStorage();
     } else {
-      this.writeSessionStorage();
+      this.#writeSessionStorage();
     }
   }
 
-  private readSessionStorage(): Credentials | null {
+  public clear() {
+    this.#credentials = null;
+    this.#removeSessionStorage();
+  }
+
+  #readSessionStorage(): Credentials | null {
     const sessionStorageData = sessionStorage.getItem(localStorageAuthKey);
     if (sessionStorageData === null) {
       return null;
@@ -51,23 +57,17 @@ export class AuthService {
     };
   }
 
-  private writeSessionStorage() {
-    if (this.credentials === null) {
-      this.readSessionStorage();
+  #writeSessionStorage() {
+    if (this.#credentials === null) {
+      this.#readSessionStorage();
     }
     sessionStorage.setItem(localStorageAuthKey, JSON.stringify({
-      username: this.credentials.username,
-      password: this.credentials.password
+      username: this.#credentials.username,
+      password: this.#credentials.password
     }));
   }
 
-
-
-  public signOut() {
-    this.readSessionStorage();
-  }
-
-  private removeSessionStorage() {
+  #removeSessionStorage() {
     sessionStorage.removeItem(localStorageAuthKey);
   }
 }

projects/blueprint/src/app/login/login.component.ts

@@ -6,37 +6,33 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
 
-
 import { AuthService } from '@blueprint/service/auth/auth.service';
 import { SparqlService } from '@blueprint/service/sparql/sparql.service';
 
-import { LogoComponent } from "../core/layout/logo/logo.component";
 import { BrandLogoComponent } from "../core/layout/brand-logo/brand-logo.component";
 import { MessageChannelService } from '../core/service/message-channel/message-channel.service';
 
-
 @Component({
   standalone: true,
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
   imports: [
-    ReactiveFormsModule,
-    LogoComponent,
+    ReactiveFormsModule, //
     InputTextModule,
     ButtonModule,
     BrandLogoComponent
   ]
 })
 export class LoginComponent implements OnInit {
-  private readonly destroyRef = inject(DestroyRef);
+  readonly #destroyRef = inject(DestroyRef);
 
-  private readonly router = inject(Router);
-  private readonly route = inject(ActivatedRoute);
+  readonly #router = inject(Router);
+  readonly #route = inject(ActivatedRoute);
 
-  private readonly messageChannel = inject(MessageChannelService);
+  readonly #messageChannel = inject(MessageChannelService);
 
-  private readonly authService = inject(AuthService);
-  private readonly sparqlService = inject(SparqlService);
+  readonly #authService = inject(AuthService);
+  readonly #sparqlService = inject(SparqlService);
 
   loginForm = new FormGroup({
     username: new FormControl<string>('', [Validators.required]),
@@ -47,33 +43,37 @@ export class LoginComponent implements OnInit {
   returnUrl = '';
 
   ngOnInit(): void {
-    if (this.authService.isAuthenticated()) {
-      this.router.navigate(['search']);
+    if (this.#authService.isAuthenticated()) {
+      this.#router.navigate(['search']);
       return;
     }
-    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
-    this.loginForm.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.errorMessage = '');
+    this.returnUrl = this.#route.snapshot.queryParams['returnUrl'] || '/';
+
+    this.loginForm.valueChanges.pipe(
+      takeUntilDestroyed(this.#destroyRef)
+    ).subscribe(() => this.errorMessage = '');
   }
 
   onSubmit(): void {
     const credentials = {
       username: this.loginForm.controls.username.value ?? '',
       password: this.loginForm.controls.password.value ?? ''
     };
-    this.authService.updateCredentials(credentials);
+    this.#authService.updateCredentials(credentials);
 
-    this.sparqlService
+    this.#sparqlService
       .select('SELECT * WHERE { ?s ?p ?o . } LIMIT 1')
       .subscribe({
         next: () => {
-          this.messageChannel.debug('Login successful');
-          this.router.navigateByUrl(this.returnUrl);
+          this.#messageChannel.debug('Login successful');
+          this.#router.navigateByUrl(this.returnUrl);
         },
         error: () => {
           this.errorMessage = 'Wrong username or password';
-          this.messageChannel.debug('Wrong username or password');
+          this.#authService.clear();
+          this.#messageChannel.debug('Wrong username or password');
         },
-        complete: () => this.messageChannel.debug('Login Test SPARQL Query completed')
+        complete: () => this.#messageChannel.debug('Login Test SPARQL Query completed')
 
       }
       );