Okta SignOut takes to callbak with token and application stops with no error

[gkumar]

Hi,

Tried to logout from my project with angular 14, but it takes me to below url:

https://domain.com.cloudfront.net/callback?code=token/callbak

Surprisingly it does not through any error. Even i try to access directly access any route, it return back to same callbak url.

Any guidance?

import:
import { OKTA_AUTH } from ‘@okta/okta-angular’;
import { OktaAuth } from ‘@okta/okta-auth-js’;

constructor:

constructor(@Inject(OKTA_AUTH) public oktaAuth: OktaAuth) { }

Signout code:

Tried 1:

async logout(){
    await this.oktaAuth.signOut({postLogoutRedirectUri: `${window.location.origin}/logout/callback`});
  }

Tried 2:

async logout(){
    await this.oktaAuth.signOut();
  }

Tried 3:

async logout(){
    await this.oktaAuth.signOut({postLogoutRedirectUri: '/logout'});
  }

But same result. Actually no component is loading, or we can say not redirecting to logout component.

Thanks
Gautam

[rvarikuti]

Hi, any update on this?
I am having same issue, application stuck at logout call back url with no error

[gkumar]

No update till date, hope developer will reply some day.

[gkumar]

alisaduncan

Need your help on this, if you can

[gkumar]

No… it is still has same issue, now login is throwing error with below url:

https://blablabla.cloudfront.net/callback?code=someRandomToken

I have registered url on okta, angular version 9 is working, but anguale version 14 is not working.

https://blablabla.cloudfront.net/callback/
https://blablabla.cloudfront.net/logged-out/

I am really worried, what should i do?

Please, anyone help me…

[alisaduncan]

Hey there @gkumar !

Hopefully, you were able to resolve this, but if not, what value do you have as the redirectUrl property in the Okta Config?

[gkumar]

It’s for:

Localhost - works at Angular V9 but fails at Angular V14
http://localhost:4200/logged-out

Dev - works at Angular V9 but fails at Angular V14
https://blablabla.cloudfront.net/logged-out/

and for login it stuck with - works at Angular V9 but fails at Angular V14
https://blablabla.cloudfront.net/callback?code=someRandomToken

Thanks and regards
Gatutam

[alisaduncan]

To double check, do you have the following config setup when providing the OKTA_CONFIG token?

const oktaAuth = new OktaAuth({
  issuer: `{yourOktaDomain}/oauth2/default`,
  clientId: `{yourClientId}`,
  redirectUri: 'http://localhost:4200/logged-out'
});

And in your Okta Admin dashboard, do you have the following:

1. The Okta application Sign-out redirect URIs has ‘http://localhost:4200/logged-out’ as a value
2. The redirect URI is added to Trusted Origins with CORS and Redirect checkboxes selected

These steps should be followed for all the different redirect urls

And, do your @okta/okta-angular or @okta/okta-auth-js versions change between Angular v9 and v14?

[gkumar]

And this logout url is listed at server.
Putting default gives security issue, which opens a path for unauthorised person to login.
So I put issuer id at the place of default.

so in config it becomes:

const oktaConfig = {
  clientId: environment.oktaClientId,
  issuer: environment.oktaIssuerURL,
  redirectUri: environment.oktaRedirectURL,
  scopes: ['openid'],
  responseType: ['code'] as OAuthResponseType | OAuthResponseType[],
  pkce: true,
  tokenManager: {
    expireEarlySeconds: 290,
    autoRenew: true
  },
  onSessionExpired: () => {
    console.log('User session expired. Redirect to login page');
    oktaAuth.tokenManager.clear();
    oktaAuth.token.getWithRedirect();
  }
};

const oktaAuth: OktaAuth = new OktaAuth(oktaConfig);

providers:

providers: [
    { provide: OKTA_CONFIG, useValue: {oktaAuth}  }
  ]

Thanks and regards
Gautam

[alisaduncan]

Thank you for that info. Are you using the same version of Okta libraries when changing Angular versions?

Let’s try a double-check. I created a branch to update the Okta Angular quickstart to v14. Can you try cloning it and updating the config with your configuration values and see if you can sign in and sign out? I just tried it locally, and I don’t see any errors. Let’s see if we can isolate the issue.

git clone --branch angular-v14 https://github.com/okta-samples/okta-angular-quickstart.git

Here’s a link to the branch on the repo

GitHub - okta-samples/okta-angular-quickstart at angular-v14

[gkumar]

Sure, will update with result Alisa.

Thanks and regards
Gautam

[gkumar]

Hi Alisa,

Status after adding our configuration.
Its working on local, as already listed at the top, but on azure-devops dev environment it is failing.

https://blablabla.cloudfront.net/callback?code=fgUMK58m5Gqf4nh-wBE1hfhfje4mnqdbNwsOAcw&state=VGtUUk3LLL6zghjghdhewhbjwuHgPZlCWfOldoblCL2r3cQc9tJjgjghddkwdw

And for local during sign out it has some cors error:

Access to fetch at ‘https://blablabla.okta.com/oauth2/jsdjdsbdjbjdbbjdksd/v1/revoke’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Any suggestion or any configuration changes.

Thanks and regards
Gautam

[alisaduncan]

Hi @gkumar ,

The local sign-out CORS error is because http://localhost:4200/logged-out hasn’t been added as a trusted origin in your Okta application. Please see this documentation.

Ok, I re-read your post, and I see I conflated your callback redirect URL and sign-out redirect URL. According to the documentation, if you use postLogoutRedirectUri property when calling signOut, the URL needs to be added to your Okta org’s configuration. If I try this property in the quickstart without adding the URL configuration, I see a 400 bad request error. What error do you see?

[gkumar]

Hi Alisa, so now finally it’s working, just after adding

 async logout(){
    await this.oktaAuth.signOut({postLogoutRedirectUri: `${window.location.origin}/logged-out/`});
  }

and for login its taking acjectly same url if slash (/) is present at last, where angular V9 was ignoring.

Thank you so much for your support Alisa.
Gautam

[alisaduncan]

Nice catch! Glad you were able to figure it out!