Okta angular sign in widget is not redirecting me

Question

I just implemented Okta angular sign-in widget but I'm facing a problem,

I have multi modules where I have a authentication modules that handles sign-in, sign-out, sign-up...

this is the route that I want to reach at the end localhost:4200/api/upload but for a small convenience to keep all main routes together on my authentication module I just added a redirection between localhost:4200/api/upload and the localhost:4200/sign-in which is {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'api/upload'}

So my sign-in page is on localhost:4200/sign-in, normally when I log-in with okta it should redirect me to localhost:4200/signed-in-redirect and this will redirect me to my desired path which is localhost:4200/api/upload, but it stick at the sign-in page it doesn't redirect this is my url after passing the sign-in http://localhost:4200/sign-in?redirectURL=%2Fapi%2Fupload%3Fcode%3DkDPYjQPbut93pUXc3BR_04w4Xf8rn3c3y2eQXGNyOSc%26state%3DqEpxhsyhv13ZqZo0YteWJkWTBdNKX29bqaYrjTZEjhZVI0rAhRDtxYh1ykOJG16o

sign-in.ts:

oktaSignin: any;

constructor(
    private oktaAuthService: OktaAuthService
) {

    this.oktaSignin = new OktaSignIn({
        baseUrl: myAppConfig.oidc.issuer.split('/oauth2')[0],
        clientId: myAppConfig.oidc.clientId,
        redirectUri: myAppConfig.oidc.redirectUri,
        authParams: {
            pkce: true,
            issuer: myAppConfig.oidc.issuer,
            scopes: myAppConfig.oidc.scopes
        }
    });

}
ngOnInit(): void {

        this.oktaSignin.remove();

        this.oktaSignin.renderEl({
                el: '#okta-sign-in-widget'
            },
            (response) => {
                if (response.status === 'SUCCESS') {
                    this.oktaAuthService.signInWithRedirect();
                }
            },
            (error) => {
                throw error;
            }
        );
}

sign-in.html:

sign-in.routing.ts:

export const authSignInRoutes: Route[] = [
    {
        path     : '',
        component: AuthSignInComponent
    },
];

appConfig.ts:

export default {
    oidc: {
        clientId: 'clienId',
        issuer: 'https://mydomain/oauth2/default',
        redirectUri: 'http://localhost:4200/signed-in-redirect',
        scopes: ['openid', 'profile', 'email']
    }
};

app.routing.ts:

export const appRoutes: Route[] = [
    {path: '', pathMatch : 'full', redirectTo: 'api/upload'},
    {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'api/upload'},

{
        path: '',
        canActivate: [NoAuthGuard],
        canActivateChild: [NoAuthGuard],
        component: LayoutComponent,
        data: {
            layout: 'empty'
        },
        children: [
            {path: 'sign-in', loadChildren: () => import('app/modules/auth/sign-in/sign-in.module').then(m => m.AuthSignInModule)},
            {path: 'signed-in-redirect', component: OktaCallbackComponent},
        ]
    },

Okta angular sign in widget is not redirecting me

0 Answers