Validating access_token failed - Okta integration #5598 | Support

Mohammed.sheik created one year ago

ABP Framework version: v5.2.2
UI Type: Angular
Database System: EF Core
Tiered (for MVC) or Auth Server Separated (for Angular): yes

Hi There,

I hope you are well.

We are integrating Okta as an external login provider for our application. We have added the following configuration to the ConfigureExternalProviders function in the AuthServerModule:

.AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, "Okta",
            options =>
            {
                options.Authority = "https://xxxxxx.okta.com/oauth2/default";

                options.ClientId = "my client Id";
                options.ClientSecret = "my client secret";

                options.ResponseType = OpenIdConnectResponseType.Code;

                options.Scope.Clear();
                options.Scope.Add("offline_access");
                options.Scope.Add("openid");
                options.Scope.Add("profile");
                options.Scope.Add("email");

                options.SaveTokens = true;
                options.ResponseMode = OpenIdConnectResponseMode.Query;

                options.Events = new OpenIdConnectEvents
                {
                    OnRedirectToIdentityProvider = context =>
                    {
                        // Perform any custom logic before redirecting to Okta
                        context.ProtocolMessage.RedirectUri = "http://localhost:4200";
                        return Task.CompletedTask;
                    },
                };

            });

My login page now has the option to login with Okta:

This is the settings that I have in my Okta Application settings:

As you can see I have configured the redirect URL on both sides to be http:localhost:4200 which is my Angular frontend. When I login to my application using the Okta option, I see the authentication happening correctly on the Okta side and after the authentication I am redirected to http:localhost:4200. The problem is that I don't get logged into my application because I get the error 'Validating access_token failed'. I do notice that the nounce, access_token, refresh_token etc are missing from the local storage for http://localhost:4200

Please advice on what I am missing and how I can resolve this issue. Your assistance is greatly appreciated.

Anjali_Musmade created one year ago

Support Team Member

HI,

I was able to login with default documentation provided by OKTA Can you please try this?

https://developer.okta.com/docs/guides/sign-into-web-app-redirect/asp-net-core-3/main/

Mohammed.sheik created one year ago

HI,

I was able to login with default documentation provided by OKTA Can you please try this?

https://developer.okta.com/docs/guides/sign-into-web-app-redirect/asp-net-core-3/main/

Hi There,

Are you able to share your solution?

Anjali_Musmade created one year ago

Support Team Member

Hi,

We have followed following steps:

create a app on okta (https://developer.okta.com/docs/guides/sign-into-web-app-redirect/asp-net-core-3/main/)
please add redirect url on okta of authserver (i see that you have added for angular this need to be authserver url)
and then install <PackageReference Include="Okta.AspNetCore" Version="4.5.0" /> package
add the below code in AUTH server domain module like this
add following config in appsetting.json
"Okta": { "OktaDomain": "https://dev-xxxxxxxx.okta.com", "ClientId": "0oaaxxxxxxxxxx", "ClientSecret": "VZlZPpOexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "AuthorizationServerId": "default" }

let us know your email and we will share your this solution if possible.

Thanks, Anjali

Mohammed.sheik created one year ago

Hi Anjali,

I hope you are well.

Thank you so much for the detailed steps above, it is greatly appreciated. I have followed the steps above however I am running into the issue below:

Anjali_Musmade created one year ago

Support Team Member

Hi,

i guess you have some misconfiguration on okta side. also please check app setting.

If possible please share you solution on support@abp.io with the ticket id so we can check on our side as we are not able to reproduce this issue

Anjali_Musmade created one year ago

Support Team Member

Hello Mohammed.sheik,

Please do let us know if this solution has worked for you?

If you are still facing the issue, please do share your solution on support@abp.io so that we can help you better.

Awaiting for your response.

Thank You, Anjali

Mohammed.sheik created one year ago

Hello Mohammed.sheik,

Please do let us know if this solution has worked for you?

If you are still facing the issue, please do share your solution on support@abp.io so that we can help you better.

Awaiting for your response.

Thank You, Anjali

Hi Anjali,

I hope you are doing well. I am still experiencing the above exceptions and unfortunately due to company policy I cannot share the solution. Can we please arrange for a call where I could take you through all my configurations?

Thank you for the great support!

Best Regards, Mohammed

maliming created one year ago

Support Team Fullstack Developer

hi Mohammed

context.ProtocolMessage.RedirectUri = "http://localhost:4200";

You should not redirect to angular. It should be redirected to authserver, and then authserver will be redirected to angular.

Or can you explain why you did this?

Mohammed.sheik created one year ago

Hi Maliming,

Angular app directs login to auth server using below url. The redirect_url parameter is set to http://localhost:4200 and that is why I have been trying to redirect to the Angular frontend from Okta.

https://localhost:44322/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3DTokenGen_Angular%26state%3DbFJidFZFX3h6TjUyUGl4el82djhoN3NBfk41ZndyUVNPYXZSRXpmWTdCeGtu%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A4200%26scope%3Doffline_access%2520openid%2520profile%2520email%2520phone%2520AccountService%2520IdentityService%2520AdministrationService%2520SaasService%2520ProductService%2520StsApiService%26code_challenge%3DhmA56R3M3SyXUVBVM4z9-ktJLeCD9vuZtD1WnB6Ck04%26code_challenge_method%3DS256%26nonce%3DbFJidFZFX3h6TjUyUGl4el82djhoN3NBfk41ZndyUVNPYXZSRXpmWTdCeGtu%26culture%3Den%26ui-culture%3Den

I changed my Okta app settings to use the auth server url (https://localhost:44322/Account/Login)

and my AuthServerModule looks like this:

.AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, "Okta", options => { options.Authority = "https://xxxxxx.okta.com/oauth2/default";

            options.ClientId = "my client Id";
            options.ClientSecret = "my client secret";

            options.ResponseType = OpenIdConnectResponseType.Code;

            options.Scope.Clear();
            options.Scope.Add("offline_access");
            options.Scope.Add("openid");
            options.Scope.Add("profile");
            options.Scope.Add("email");

            options.SaveTokens = true;
            options.ResponseMode = OpenIdConnectResponseMode.Query;

            options.Events = new OpenIdConnectEvents
            {
                OnRedirectToIdentityProvider = context =>
                {
                    // Perform any custom logic before redirecting to Okta
                    context.ProtocolMessage.RedirectUri = "https://localhost:44322/Account/Login";
                    return Task.CompletedTask;
                },
            };

        });

The redirect from Okta to my auth server works and the URL params (Code and State) are being set however it does not log me into the application and does not redirect me to Angular frontend.

https://localhost:44322/Account/Login?code=qAv8NcAN5d_rPsx4t7fNceKBlZkp7AkIDl8R-Yu9so8&state=CfDJ8IjnUYbWPldIgDZTpwcFU0gB4Q0ybYB_1VYnSA6GN_EiRo3j98Wp8ImUrMv0kZXlBK7l2gl3a5K9LJFp5tZR8RoSFd7yuT7DP030wHSXTuGip2NBrWeWd9HaOddMm2n7wXpda91YF6qZR8H_AAOWsBXl38Sz1OGQGyANT2pxF_PJMSmR6IzK-96Fa3CdEBkscctikeFjPsnGLEoNxLOkO3JDsJDy3tryVJAvPc8VI9eouKIBDWVO4pmFw1f08O2d9B9M7O2DW4CJr9uebHQ5csfJ5Nc9VgDJAzRmLfHBV6iQrPXLS9OUmsqSavxAVOF8g3qezLdjTp4gedHYfJCPKOm9rfA7rXTIB1_JUSyn0ZOYakV8O3t1kb_CLUIZxAKRA5DIBqA-suxHlhkTk12HqaK8YRixXRR4A2esOA1mb8trOUfSdxYVpGowC6WL4e2fd77zg-jO3Ih3REnG8ifP1TKV16EcK0OVPb76mDYYx0gOEL2dUlTpppcnrmLyaQhCVg

Any thoughts or advice on this?

maliming created one year ago

Support Team Fullstack Developer

The flow should be like:

angular request oauth2 login
You will be redirected to authserver login page.
Click the Okta external login icon in authserver login page.
You will be redirected to the Okta login page and complete the authentication.
You will be redirected authserver website and you already have the login state.
authserver will generate the code and redirect to angular.
angular get the code and use it the access_token from authserver

Please don't change any code on OnRedirectToIdentityProvider and don't use Okta info in the angular app. it only uses authserver info for authentication.