Angular Universal - Auth Guard pending problem

I'm using popup login with Angular Material, when I added Angular Universal the auth guard is the problem. If some route is protected by auth guard the page just start pending and never finishes. Behavior without Angular Universal is when page is reloaded It just open up popup for login.

@Injectable()
export class AuthGuard implements CanActivate {
constructor(readonly auth: AuthService, public router: Router, private dialog: MatDialog, private store: Store<fromAuth.State>) {}

/** Performs the user authentication prompting the user when neeed or resolving to the current authenticated user otherwise */

public authenticate(action: loginAction = 'signIn') {
return this.store.pipe(
select(fromAuth.selectAuthState),
take(1),
switchMap(user => !user.user ? this.prompt(action) : of(user.user))
).toPromise();
}

public prompt(data: loginAction = 'signIn'): Promise<any> {

return this.dialog.open<LogInComponent, loginAction>(LogInComponent, { data }).afterClosed().toPromise();
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
// Gets the authorization mode when specified
// const mode = route.queryParamMap.get('authMode') || 'signIn';
// Prompts the user for authentication
return this.authenticate()
.then(user => !!user);
}
}



If I'm directly accessing ngrx store inside canActivate It's working but I want to work with .toPromise()

I'm using httponly cookies and on every reload Angular is sending http request to nodejs db to fetch user data. On every other route It's working as expected.

Continue reading...