title: How do I intercept an unauthorised response with a dialog to enter a password and retry it?
body: <p>I'm building an app that has a backend with a simple authentication and a <code>GET</code> request. I want to show the user a dialog to re-enter their password when their authentication expires. When you fill in your password and click submit, I want to retry the original HTTP call and get the data within the original <code>Observable</code>. I would guess that this is possible, but I can't seem to find a way to start. </p>
  
  <p>This question is similar:
  <a href="https://stackoverflow.com/questions/38602186/">RxJS wait for second observable then retry original observable on error - TypeScript/Angular 2</a></p>
  
  <p>But I'm using <code>.pipe()</code> and <code>catchError</code> so I can subscribe to the function in my API service instead of a separate http call. I'm not sure what other information I should provide to make my question clear, but please let me know if there is anything else you need to know.</p>
  
  <p>This is my current code:</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { HttpClient, HttpHeaders } from "@angular/common/http";
  import { environment } from "../environments/environment";
  import { Observable, ObservableInput } from "rxjs/Observable";
  import { catchError, tap } from "rxjs/Operators";
  import { MatDialog } from "@angular/material/dialog";
  import { SessionExpiredComponent } from "./dialogs/session-expired/session-expired.component";
  import "rxjs/add/observable/throw";
  import { User } from "./classes/user";
  import { Test } from "./classes/test";
  
  const header = {
    withCredentials: true
  };
  
  @Injectable()
  export class ApiService {
    user: User = null || JSON.parse(localStorage.getItem("user"));
  
    constructor(private http: HttpClient, private matDialog: MatDialog) {}
  
    private errorHandler() {
      return (err: any) =&gt; {
        let dialog = this.matDialog.open(SessionExpiredComponent, {
          data: { err: err, email: this.user.email, apiService: this },
        });
        return dialog.afterClosed();
  //I want to return a retry of the original observable
      };
    }
  
    login(email: string, password: string): void {
      const formHeader = {
        headers: new HttpHeaders({
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }),
        withCredentials: true
      };
      this.http
        .post&lt;User&gt;(
          environment.backend + "auth/login",
          "email=" +
            encodeURIComponent(email) +
            "&amp;password=" +
            encodeURIComponent(password),
          formHeader
        )
        .subscribe(user =&gt; {
          this.user = user;
          localStorage.setItem("user", JSON.stringify(user));
        });
    }
  
    getTests(): Observable&lt;any&gt; {
      return this.http
        .get&lt;any&gt;(
          environment.backend +
            "tests/query?accountId=" +
            this.user.defaultAccount,
          header
        )
        .pipe(catchError(this.errorHandler()));
    }
  }
  </code></pre>
  
  <p>This code works as-is, but doesn't retry the call when I enter my password and re-authenticate.</p>