User always being redirected to Home page instead of requested page

Question

In my Angular project, users are being authenticated through OIDC provider using the library angular-auth-oidc-client. So, when user is not authenticated or session expired and requests a page like https://localhost:4202/account, user is being redirected to OIDC login page and after successful login, user is always being redirected to home page instead of requested page

To Reproduce:

Steps to reproduce the behavior:

1. Replace Auth configuration with your own config
2. Run the project with

npm run start

3. Go to https://localhost:4202/account. It will redirect to OIDC login page then after successful login it redirects user to https://localhost:4202 instead of https://localhost:4202/account

Answer 1

The issue was not storing redirectedUrl in storage and retrieve it back after successful navigation. The library already has AutoLoginPartialRoutesGuard which can be used in custom guards. See the source code in Github and sample admin guard that extends AutoLoginPartialRoutesGuard below. This will make sure user redirects back to original URL

Admin Auth Guard:

@Injectable({
    providedIn: 'root',
})
export class AdminUserAuthGuard implements CanActivate {
    constructor(
        private router: Router,
        private autoLoginPartialRoutesGuard: AutoLoginPartialRoutesGuard
    ) {}


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if (this.autoLoginPartialRoutesGuard.canActivate(route, state) && this.currentUserState.hasSysAdminRole) {
            return true;
        }
        if (this.autoLoginPartialRoutesGuard.canActivate(route, state) && !this.currentUserState.hasSysAdminRole) {
            this.router.navigate(['/unauthorized']);
        }
        return false;
    }
}

Answer 2

in auth service:

this.oauthService.loadDiscoveryDocumentAndLogin().then(
        (isLoggedIn) => {

          if (isLoggedIn) {
            this.oauthService.setupAutomaticSilentRefresh();
            resolveFn();
          } else {
            this.oauthService.initImplicitFlow(window.location.pathname);
            rejectFn();
          }
        })

init code:

initLogin() {
   this.oauthService.events
    .pipe(
      filter((e: any) => e.type === 'token_received'))
    .subscribe(({ type }) => {
      this.router.navigateByUrl(decodeURIComponent(this.oauthService.state));
    });
 }