How to Enable Redirect to Requested URL After Authentication in Angular with angular-oauth2-oidc?

Question

I'm currently working on an Angular Stand-Alone application where I'm using angular-oauth2-oidc for authentication. I have successfully configured authentication using the Authorization Code Flow, but I'm facing an issue with redirecting the user to the originally requested URL after authentication.

Here's a snippet of my current configuration app.config.ts:

import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { AuthConfig, OAuthService, provideOAuthClient } from 'angular-oauth2-oidc';

import { authCodeFlowConfig } from './configurations/auth.config';

import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { APP_BASE_HREF, DatePipe } from '@angular/common';

import { FastapiInterceptorService } from './services/fastapi-interceptor.service'

function initializeOAuth(oauthService: OAuthService): Promise<void> {
  return new Promise((resolve) => {
    oauthService.configure(authCodeFlowConfig);
    oauthService.setupAutomaticSilentRefresh();
    oauthService.loadDiscoveryDocumentAndLogin().then(() => {
      resolve();
    });
  });

}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient (
      withInterceptorsFromDi()
    ),
    { provide: HTTP_INTERCEPTORS, useClass: FastapiInterceptorService, multi: true},
    provideOAuthClient(),
    {
      provide: APP_INITIALIZER,
      useFactory: (oauthService: OAuthService) => {
        return () => {
          initializeOAuth(oauthService);
        }
      },
      multi: true,
      deps: [
        OAuthService
      ]
    },
    provideAnimationsAsync(),
    { provide: APP_BASE_HREF, useValue: '/matrix' }, // Add this line to provide APP_BASE_HREF
    DatePipe
  ]
};

How can I modify this configuration to ensure that the user is redirected to the originally requested URL after successful authentication? For instance, if a user attempts to access a protected route directly and is redirected to the login page, how can I ensure they are redirected back to the intended route after authentication?

Any help or guidance would be greatly appreciated. Thank you!

I tried the below configurations:

Preserve URL State When Logging in With angular-oauth2-oidc

Answer 1

I solved it

function initializeOAuth(oauthService: OAuthService, router: Router): Promise<void> {
  return new Promise((resolve) => {
    if (oauthService.hasValidAccessToken()) {
      resolve();
      return;
    }
    oauthService.configure(authCodeFlowConfig);
    oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
      const url = oauthService.state ?? '';
      if (!oauthService.hasValidAccessToken()) {
        oauthService.initImplicitFlow(router.url); 
        oauthService.setupAutomaticSilentRefresh();
      }
      else{
        router.navigateByUrl(decodeURIComponent(url));
        resolve();
      }
    });
  });
}