Search code examples
angularerror-handlinginterceptor

Angular Interceptor breaks login to website


I'm working on an Interceptor in an Angular project where I want this interceptor to handle all kinds of errors I receive when getting HTTP error responses. However, after I set up my code, it broke my login to the website I'm building. No error appearing in the console, the Login Window simply ignores my input and action

Here is my Interceptor handling the error:

export class CommonInterceptor implements HttpInterceptor {
  constructor(private errorSnackbarService: ErrorSnackbarService) {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      retry(1),
      catchError((error: HttpErrorResponse) => {
        const errorString =
          'An unknown error occurred. Please try again later!';
        this.errorSnackbarService.showError(errorString);
        return throwError(() => console.log(error));
      })
    );
  }
}

AppModule (providing the Interceptor)

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CommonInterceptor,
      multi: true,
    },
],

My SnackbarService (not that relevant though):

export class ErrorSnackbarService {
  constructor(private snackBar: MatSnackBar) {}

  showError(message: string): void {
    this.snackBar.open(message, 'X');
  }
}

My Login logic:

login(email: string, password: string) {
    return this.http
      .post<AuthResponseData>(
        'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=asd',
        {
          email: email,
          password: password,
          returnSecureToken: true,
        }
      )
      .pipe(
        tap((resData) => {
          this.handleAuthentication(
            resData.email,
            resData.localId,
            resData.idToken,
            resData.expiresIn
          );
        })
      );
  }

Can somebody point me to the right direction? I wish I had any error in the console or in compile but I don't.


Solution

  • MatSnackbarModule is missing from your app module imports