Tokens are not set immediately after redirect

Hello,

I am using version 3.1.4 of this library. My set-up is as follows:
after users enters his credentials on the identity server he is redirected to a protected resource.
My canActivate method looks as follows.

canActivate(): boolean {
    const validIdToken = this.oauthService.hasValidIdToken;
    const validAccessToken = this.oauthService.hasValidAccessToken();
    return (validIdToken && validAccessToken);
  }

However, at the time when canActivate() is called both tokens are not available immediately
(even though user is authenticated and they should be set).
canActivate() also returns false. I can see they eventually arrive:

this.oauthService.events.subscribe(({ type } : OAuthEvent) => {
      switch (type) {
        case 'token_received':
          const idToken = this.oauthService.getIdToken();
          const accessToken = this.oauthService.getAccessToken();
          if (accessToken && idToken) {
            console.log(accessToken);
            console.log(idToken);
          }
      }
 });

Is there some way to prevent this - ensuring that they are already set when canActivate() is called?

[meron1122]

@Razzeee In my app, on routing i use CanActivate - which secure access to component before you are not login ( You are not logged - component cannot be load, first login bro!)

My app.component.ts

export class AppComponent {

    constructor(private oauthService: OAuthService) {
        this.oauthService.configure(authConfig);
        // this.oauthService.setStorage(localStorage);
        this.oauthService.tokenValidationHandler = new JwksValidationHandler();
        this.oauthService.setupAutomaticSilentRefresh();

        this.oauthService.loadDiscoveryDocumentAndLogin();
    }

Routing:

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    },
    {
        path: '',
        canActivate: [AuthGuard], //guard secure acces
        component: FullLayoutComponent,
        data: {
            title: 'Home'
        },
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },
            {
                path: 'UsersList',
                loadChildren: './users/users-list/users-list.module#UsersListModule'
            },
            // ,
            // { path: '**', redirectTo: 'dashboard' }
        ],
    },
    // { path: '**', redirectTo: 'dashboard' },
];

And finally guard

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private oauthService: OAuthService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
        return this.oauthService
            .loadDiscoveryDocumentAndTryLogin()
            .then((res) => {
                return this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken()
            });
    }
}

[EricWafford]

you’ll need to resolve the above event that you demonstrate subscribing to within your guard because you must wait for the discovery document to load, which is async. canActivate can accept a promise return, or better yet an Observable<boolean>. One option might be to use the OAuthService.TryLogin() which returns a promise, something like:

return this.oauthService
      .tryLogin()
      .then(() => { this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken() }

*The above is pseudo-code, your implementation will most likely vary. HTH