Angular- OIDC code flow - Is there a way to get the authCode from the redirected URL if the Redirect URL is to an external application?

Question

I am using 'angular-oauth2-oidc' library for code flow authentication using Trustbuilder idp. This is my configuration:

import { AuthConfig } from 'angular-oauth2-oidc';

export const authCodeFlowConfig: AuthConfig = {
// Url of the Identity Provider
issuer: 'trustbuilder idp url',

// URL of the SPA to redirect the user to after login
redirectUri: 'url to an external application',

// The SPA's id. The SPA is registerd with this id at the auth-server
// clientId: 'server.code',
clientId: 'client id',

// Just needed if your auth server demands a secret. In general, this
// is a sign that the auth server is not configured with SPAs in mind
// and it might not enforce further best practices vital for security
// such applications.
// dummyClientSecret: 'secret',

responseType: 'code',

// set the scope for the permissions the client should request
// The first four are defined by OIDC.
// Important: Request offline_access to get a refresh token
// The api scope is a usecase specific one
scope: 'openid profile email offline_access api',

showDebugInformation: true,
};

app component:

import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';
import { Component } from '@angular/core';

@Component({
    selector: 'flight-app',
    templateUrl: './app.component.html'
})
export class AppComponent {

    constructor(private oauthService: OAuthService) {
      this.configure();
    }

    private configure() {
      this.oauthService.configure(authConfig);
      this.oauthService.tokenValidationHandler = new JwksValidationHandler();
      this.oauthService.loadDiscoveryDocumentAndTryLogin();
    }
}

home component:

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
    templateUrl: "app/home.html"
})
export class HomeComponent {

constructor(private oauthService: OAuthService) {
}

public login() {
    this.oauthService.initLoginFlowInPopup();
}

public logoff() {
    this.oauthService.logOut();
}

public get name() {
    let claims = this.oauthService.getIdentityClaims();
    if (!claims) return null;
    return claims.given_name;
}

}

home component html:


Hallo


Hallo, {{name}}

The Problem:

The problem here is the redirect url configured in the trustbuilder server is an external app url. Unfortunately this cannot be reconfigured/changed. I am trying to get authCode using code flow and the application redirects to this external application in a new popup window, with the authCode and state as query params on successful login. Is there any way I can read this authCode from my angular app? Is there a way in which after successful login and redirection, can the app be redirected to my angular app? Unfortunately I do not have access to the external application code as well. I also cannot configure the redirection URL in the config to my angular app url because that would mean the trustbuilder server will throw an error.

What is the right approach to fix this?

Angular- OIDC code flow - Is there a way to get the authCode from the redirected URL if the Redirect URL is to an external application?

0 Answers