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)
