I need my Angular app to wait for the server to send the authentication cookie before canActivate() is called on the auth guard

Question

I have an angular app, and authentication works, but when you open a new tab, the auth guard doesn't see the auth cookie(because the cookie hasn't arrived yet) and so the guard doesn't let you into the website. So I'm just trying to make multiple tabs work for my Angular app.

So the server sends a cookie(when it serves the app, I presume), that has your authentication ticket when you open a new tab.

However, when canActivate() is hit, this cookie has not arrived yet. It seems to arrive just a fraction of a second later.

Is there functionality for this in Angular? Or something to use besides canActivate()?

My current canActivate code:

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

  // Get User cookie
  const userInfoCookieValue = this.findFirstInSource(
    document.cookie,
    'userInfo'
  );

  if (userInfoCookieValue) {
    return true;
  }

  return false;
}

findFirstInSource(source: string, searchTarget: string): string {
  const pattern = '(?:(?:^|.*;\\...'; //cutoff regex for comment
  const expression = new RegExp(pattern);

  return source.replace(expression, '$1');
}

This always returns false, when opening a new tab and going to the website