Okta signout don't work in Angular Applicaiton

I am using OKTA SDK for the angular following enter link description here

this documentation. I am also using OktaCallbackComponent and OktaAuthService for authentication. I can log in successfully. after a successful login OKTA redirects me to OktaCallbackComponent where they store some keys in localstroge and finally, I get navigated to my main page.

now when I click on the logout button from the application it does not work. As I see it the page loads and immediately navigates to the callback component and again navigates to the main page. whereas I want the login page should come to the user.

this is my logout function.

  async logout(){
   this.oktaAuth.tokenManager.clear()
   await this.oktaAuth.signOut();
   this.router.navigate(['/login']);
   this.toastr.success('Logout Successfully', 'See you next time' , {timeOut: 5000});
  }

can anyone help me with what could be the issue.

  {
    path: 'main',
    component: OpDataTableComponent,
    canActivate: [ OktaAuthGuard ],
    data: {
      title: 'Main Page'
    }
  },


 {
    path: CALLBACK_PATH,
    component: OktaCallbackComponent,
    // Later: Add a component
  },

  {
    path: 'login',
    // component: LoginComponent,
    component:OktaLoginComponent,
    canActivate: [checkAfterLoginService],
    
    data: {
      title: 'Login Page'
    }
  }

CheckAfterLoginService

export class checkAfterLoginService {
  constructor(private oktaAuth: OktaAuthService,private tokenService: TokenService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    if(this.oktaAuth.isAuthenticated())
    {
      return this.router.navigateByUrl('/main');
    }else
    {
      return false;
    }
  }
}

Okta configuration.

const ISSUER = 'https://...../oauth2/default';
const HOST = window.location.host;
const REDIRECT_URI = 'https://..../callback';
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: '.....',
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s+/)
};

P.s logout URL added to the application setting is https://../login route. how can I solve the issue or what could be the issue? your help is much appreciated.

Try changing your logout() method to be as follows:

async logout(){
  await this.oktaAuth.signOut();
  this.router.navigate(['/login']);
  this.toastr.success('Logout Successfully', 'See you next time' , {timeOut: 5000});
}

You're currently clearing the tokens manually, which makes our underlying Auth JS SDK thinking you've already logged out. this.oktaAuth.signOut() should clean up the tokens for you. If you still want to clear them manually, make sure and do it after signOut().