Home > database >  Angular Interceptor breaks login to website
Angular Interceptor breaks login to website

Time:10-17

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.

CodePudding user response:

throwError function should return error - look at the docs: https://rxjs.dev/api/index/function/throwError

CodePudding user response:

MatSnackbarModule is missing from your app module imports

  • Related