Auth errors were not showing up as they were swallowed up by the auth interceptor.

Once caught, the device name was not being shown as it was triggering an expression changed after detection error.

bookie/src/app/auth/login/login.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -44,6 +44,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
     private router: Router,
     private toaster: ToasterService,
     private cs: CookieService,
+    private cd: ChangeDetectorRef,
   ) {
     this.hide = true;
     this.unregisteredDevice = false;
@@ -73,20 +74,19 @@ export class LoginComponent implements OnInit, AfterViewInit {
     const formModel = this.form.value;
     const username = formModel.username ?? '';
     const password = formModel.password ?? '';
-    this.auth
+    this.auth.login(username.trim(), password.trim()).subscribe({
-      .login(username.trim(), password.trim())
+      next: () => {
-      // .pipe(first())
+        this.router.navigateByUrl(this.returnUrl);
-      .subscribe({
+      },
-        next: () => {
+      error: (error) => {
-          this.router.navigateByUrl(this.returnUrl);
+        if (error.status === 401 && error.error.detail === 'Device is not registered') {
-        },
+          this.unregisteredDevice = true;
-        error: (error) => {
+          this.deviceName = this.cs.getCookie('device');
-          if (error.status === 401 && error.detail === 'Device is not registered') {
+          console.log(this.deviceName, this.unregisteredDevice);
-            this.unregisteredDevice = true;
+          this.cd.detectChanges();
-            this.deviceName = this.cs.getCookie('device');
+        }
-          }
+        this.toaster.show('Error', error.error.detail);
-          this.toaster.show('Error', error.detail);
+      },
-        },
+    });
-      });
   }
 }

bookie/src/app/core/auth.interceptor.ts

@@ -21,13 +21,13 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
         if (req.url.includes('/refresh')) {
           inject(AuthService).logout();
         }
-        return throwError(() => new Error(err));
+        return throwError(() => err);
       }
       // If error status is different than 401 we want to skip refresh token
       // So we check that and throw the error if it's the case
       if (err.status !== 401) {
         const error = err.error.message || err.error.detail || err.statusText;
-        return throwError(() => new Error(error));
+        return throwError(() => error);
       }
       // auto logout if 401 response returned from api
       inject(AuthService).logout();
@@ -47,7 +47,7 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
           inject(Router).navigate(['login']);
         }
       });
-      return throwError(() => new Error(err));
+      return throwError(() => err);
     }),
   );
 };