Staying on the same page after login oidc-client

Question

I'm working on my first ASP.NET Core web application with SPA using Angular 9. This is my first experience with Angular at all, I've been following a tutorial in Pluralsight. But I've been having difficulties with staying on the same page after login. I'm using IdentityServer4, ASP.NET Identity, and oidc-client for my Angular bit.

So, I start the application at "https://localhost:44392/". So, initially, this is fine. The problem arises when I go for instance to "https://localhost:44392/search". If I go via the navbar which has [routerLink]="['/search']" there is no problem. However, if I just write "https://localhost:44392/search" in the address bar of the browser it triggers another sign in (it doesn't ask for credentials though since my id_token is still valid usually). But after the signing it goes back to the home page (aka "https://localhost:44392/").

This behavior started only after adding the oidc-client and guardService. I tried searching online, but I think I'm missing something because I cannot make things work with the allege answers.

So here are my classes

import { Injectable } from '@angular/core';
import {UserManager, User} from 'oidc-client';
import { environment } from 'src/environments/environment';
import { ReplaySubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class OpenIdConnectService {

  private userManager: UserManager = new UserManager(environment.openIdConnectSettings);
  private currentUser: User;

  userLoaded$ = new ReplaySubject<boolean>(1);

  get userAvailable(): boolean {
    return this.currentUser != null;
  }

  get user(): User {
    return this.currentUser;
  }

  constructor() { 
    this.userManager.clearStaleState();

    this.userManager.events.addUserLoaded(user => {
      if (!environment.production) {
        console.log('User loaded: ', user);
      }
      this.currentUser = user;
      this.userLoaded$.next(true);
    });

    this.userManager.events.addUserUnloaded(() => {
      if (!environment.production) {
        console.log('User unloaded.');
      }
      this.currentUser = null;
      this.userLoaded$.next(false);
    });
  }

  triggerSignIn(url: string){ //originally without the parameter url
    this.userManager.signinRedirect().then(function () {
      if (!environment.production) {
        console.log('Redirection to signin triggered.');
      }
      data: {redirect_url: url} //I added this because I saw it in a reply in SO, but doesn't work.
    });
  }

  handleCallBack(){
    this.userManager.signinRedirectCallback().then(function (user){
      if (!environment.production) {
        console.log('Callback after signin handled.', user);
      }
    });
  }

  triggerSignOut() {
    this.userManager.signoutRedirect().then(function (resp) {
      if (!environment.production) {
        console.log('Redirection to sign out triggered.', resp);
      }
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { OpenIdConnectService } from '../shared/open-id-connect.service';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-signin-oidc',
  templateUrl: './signin-oidc.component.html',
  styleUrls: ['./signin-oidc.component.scss']
})
export class SigninOidcComponent implements OnInit {

  constructor(private openIdConnectService: OpenIdConnectService, 
    private router: Router) { }

  ngOnInit() {
    this.openIdConnectService.userLoaded$.subscribe((userLoaded) => {
      if (userLoaded) {
        this.router.navigate(['./']);
      }
      else {
        if (!environment.production) {
          console.log("An error happened: user wasn't loaded.");
        }
      }
    });

    this.openIdConnectService.handleCallBack();
  }

}

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { OpenIdConnectService } from './open-id-connect.service';

@Injectable({
  providedIn: 'root'
})
export class RequireAuthenticatedUserRouteGuardService implements CanActivate {

  constructor(private openIdConnectService: OpenIdConnectService,
    private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {//route and state were not part of the original example. I just added it in an attempt to pass is as param to triggerSignIn
    if (this.openIdConnectService.userAvailable) {
      return true;
    }
    else
    {
      //trigger signin
      this.openIdConnectService.triggerSignIn(state.url);
      return false;
    }
  }
}

app.module.ts

//Lots of other imports
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ComponentsModule } from "./components/components.module";
import { ProfileComponent } from './profile/profile.component';
import { SearchComponent } from './search/search.component';
import { MonitoringComponent } from './monitoring/monitoring.component';
import { OpenIdConnectService } from './shared/open-id-connect.service';
import { SigninOidcComponent } from './signin-oidc/signin-oidc.component';
import { RequireAuthenticatedUserRouteGuardService } from './shared/require-authenticated-user-route-guard.service';
import { AddAuthorizationHeaderInterceptor } from './shared/add-authorization-header-interceptor';

@NgModule({
  declarations: [
    //there are other components but deleted for brevity
    AppComponent,
    HomeComponent,
    ProfileComponent,
    SearchComponent,
    MonitoringComponent,
    SigninOidcComponent
  ],
  imports: [
    HttpClientModule,
    ComponentsModule,
    RouterModule.forRoot([
        { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [RequireAuthenticatedUserRouteGuardService] },
        { path: 'profile/:ytChannelId', component: ProfileComponent, canActivate: [RequireAuthenticatedUserRouteGuardService] },
        { path: 'search', component: SearchComponent, canActivate: [RequireAuthenticatedUserRouteGuardService] },
        { path: 'monitoring', component: MonitoringComponent, canActivate: [RequireAuthenticatedUserRouteGuardService] },
        { path: 'monitoring/:ytVideoId', component: MonitoringComponent, canActivate: [RequireAuthenticatedUserRouteGuardService] },
        { path: 'signin-oidc', component: SigninOidcComponent },
    ]),
//there are more things deleted for brevity
  ],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AddAuthorizationHeaderInterceptor,
      multi: true
    },
    OpenIdConnectService,
    RequireAuthenticatedUserRouteGuardService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { OpenIdConnectService } from "./open-id-connect.service";
import { Observable } from "rxjs";

@Injectable()
export class AddAuthorizationHeaderInterceptor implements HttpInterceptor {
    constructor (private openIdConnectService: OpenIdConnectService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //add the access token as bearer token
        request = request.clone(
            { setHeaders: {Authorization: this.openIdConnectService.user.token_type
                + " " + this.openIdConnectService.user.access_token}}
        );
        return next.handle(request);
    }
}

And finally my environment.ts

export const environment = {
  production: false,
  apiUrl: 'https://localhost:44392/api/v1/',
  openIdConnectSettings: {
    authority: 'https://localhost:44350/',
    client_id: 'peraClient',
    redirect_uri: 'https://localhost:44392/signin-oidc',
    scope: 'openid profile roles peraAPI',
    response_type: 'id_token token',
    post_logout_redirect_uri: 'https://localhost:44392/',
    automaticSilentRenew: true,
    silent_redirect_uri: 'https://localhost:44392/redirect-silentrenew'
  },
  pageSize: 20
};

I suspect the issue is with the guard, but I guess I just don't know enough to know better. Any insight is much appreciated.

Thanks

---

UPDATE: So, I finally discovered what it is that is causing the redirection. It is this line this.router.navigate(['./']); in the signin-oidc.component.ts, but I don't know what to put there instead to make it go to the URL that triggered the the login.

Please keep in mind that this only happens when I write a url directly in the address bar of the browser, and it doesn't happen when I use the navbar in my application. Any ideas of how to solve this? I tried writing this.router.navigate([this.location.back()]);, but this creates a loop with the signin-oidc instead of sending me to the page that triggered the login (example https://localhost:44392/search)

Answer 1

Try implementing a refresh token login to avoid redirections to the oidc, otherwise you'll need to save the page state to make the redirection after the login