Okta Angular 16 Login Integration OAuth2 authorization request FAILURE: login_required

I'm trying to integrate Okta login into my angular App, but run into this problem which the okta sign in widget is not redirecting to my home page.



I check my network but there's no error, the login is successful

I check my Okta application log and got the following error

Here is my Okta authorization server

My general settings





this is my-app-config:

export default {
oidc: {
clientId: '<correctClientId>',
issuer: 'https://trial-4406368.okta.com/oauth2/default',
redirectUri: window.location.origin + '/login/callback',
scopes: ['openid', 'profile', 'email'],
},
};


and my app.module

const oktaAuth = new OktaAuth(myAppConfig.oidc);


{ path: 'login/callback', component: OktaCallbackComponent },
{ path: 'login', component: LoginComponent },

providers: [
ProductService,
{ provide: OKTA_CONFIG, useValue: { oktaAuth } },
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptorService,
multi: true,
},
],


I'm using Okta sign in widget

constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {
this.oktaSignin = new OktaSignIn({
logo: 'assets/images/logo.png',
baseUrl: 'https://trial-4406368.okta.com',
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: any) => {
if (response.status === 'SUCCESS') {
this.oktaAuth.signInWithRedirect();
}
},
(error: any) => {
throw error;
}
);
}


I'm not sure what my mistake is, it's not a CORS problem I've added trusted origin in Okta. I've search everywhere any have not found an answer. I tried using http instead of https, still the same error. I guess the problem is that my app is not getting auth from okta. Please help, thank you in advance

Continue reading...