The user keeps finding themselves redirected back to the Home page rather than the page they are trying

Question

The user keeps finding themselves redirected back to the Home page rather than the page they are trying

Within my Angular application, users are authenticated through an OIDC provider using the library angular-auth-oidc-client. In the scenario where a user is not authenticated or their session has expired and they attempt to access a page such as https://localhost:4202/account, they are automatically redirected to the OIDC login page. However, upon successful login, the user is consistently redirected to the home page instead of the originally requested page.

To Reproduce:

Steps to reproduce this behavior:

Update the Auth configuration with your own settings
Launch the project by running:

npm run start

Navigate to https://localhost:4202/account. After being redirected to the OIDC login page, complete the login process successfully. The user will be redirected to https://localhost:4202 instead of the intended https://localhost:4202/account page.

angular typescript oauth-2.0 openid-connect angular-auth-oidc-client

Answer 1

Answer №1

The main issue arose from neglecting to store the redirectedUrl in storage and then retrieving it after the successful navigation process. Fortunately, the library includes a helpful feature called AutoLoginPartialRoutesGuard, which can be utilized within custom guards. For further details, refer to the source code on Github and observe the example of an admin guard that extends AutoLoginPartialRoutesGuard. This implementation ensures that the user is redirected back to their original URL.

Admin Authentication 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

The main issue arose from neglecting to store the redirectedUrl in storage and then retrieving it after the successful navigation process. Fortunately, the library includes a helpful feature called AutoLoginPartialRoutesGuard, which can be utilized within custom guards. For further details, refer to the source code on Github and observe the example of an admin guard that extends AutoLoginPartialRoutesGuard. This implementation ensures that the user is redirected back to their original URL.

Admin Authentication 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 3

Answer №2

in authentication service:

this.authenticationService.loadDiscoveryDocAndLogIn().then(
        (isLoggedIn) => {

          if (isLoggedIn) {
            this.authenticationService.setupAutoSilentRefresh();
            resolveFunction();
          } else {
            this.authenticationService.initImplicitFlow(window.location.pathname);
            rejectFunction();
          }
        })

initialization code:

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

Answer 4

in authentication service:

this.authenticationService.loadDiscoveryDocAndLogIn().then(
        (isLoggedIn) => {

          if (isLoggedIn) {
            this.authenticationService.setupAutoSilentRefresh();
            resolveFunction();
          } else {
            this.authenticationService.initImplicitFlow(window.location.pathname);
            rejectFunction();
          }
        })

initialization code:

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

The user keeps finding themselves redirected back to the Home page rather than the page they are trying

Answer №1

Answer №2

Similar questions

Having a problem with Angular 5 npm install due to a peer dependency issue

Setting the default theme in Material UI4

Enhance Angular Material Select with Tooltip on Ellipsis Directive

Found within the NgModule.imports of ViewClientModule, however, contains errors within the export class SharedModule { }

Steps to converting an enum or literal

Dealing with "Cannot find name" errors in Typescript when working with React components

Retrieve upcoming route details within canDeactivate guard in the updated Angular2 router

Reaching the maximum request threshold

Check the status when clicking on an event using Angular Material

Validation of passwords in reactive forms using Angular Material Design Lite

I am currently facing challenges retrieving data from a post request in my Angular/Typescript frontend application connected to an ASP.NET backend

What is the method for incorporating sorting into a mat-list?

Updating a null value within the database was done successfully

The Angular application has been successfully compiled, yet it is not loading in the browser. Additionally, an Uncaught ReferenceError is being thrown, stating that 'process

Error message: "Unable to emit an array with Angular

Making a quick stop in Istanbul and NYC to collect a few important files

Asynchronous and nested onSnapshot function in Firestore with await and async functionality

Craft fresh items within HTTP request mapping

Changing the ngModel value within ngFor loop

How can I clear the div styling once the onDismiss handler has been triggered