Discussion on: AWS Amplify Auth & Angular RxJS Simple State Management

[Ben]

Great post! I've implemented this for my Angular app, but I'm using a third party identity provider and the hosted UI and I'm having an issue getting the authenticated state set correctly on the first load.

The issue is with the Authenticated Code Grant. When the app loads initially, it passes the code to Amplify which then makes calls out to Cognito to obtain the tokens and user information. The time delay causes all the isLoggedIn states to be marked as false. A page refresh then shows the user as logged in correctly as the tokens are all in local storage now.

Any advice?

[Michael Gustmann]

Thanks,
it's hard to see the error without code, but I would suggest trying these steps:

• use 'tap(val => console.log(val))' statements in pipe() to see if the value actually changes
• if using onPush() components, make sure to mark for changes in subscribe callback
• try using the async pipe and get rid of the subscribe calls

it sounds to me like it might be an Angular changeDetection problem.

[Ben]

Apologies! Below is my basic AuthGuard.

export class AccessGuard implements CanActivate {

isLoggedIn = false;

constructor(private router: Router,
          private authService: AuthService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
Observable<boolean> | boolean {

  this.authService.isLoggedIn$
  .subscribe(
    isLoggedIn => (this.isLoggedIn = isLoggedIn)
  );

  if (!this.isLoggedIn) {
    return false;
  } else {
  return true;
   }
 }
}

[Michael Gustmann]

You can just do

canActivate() {
    return this.authService.isLoggedIn$;
}

Do not subscribe here! In your case it will resolve to false immediately and never actually care about the subscribe callback. Also it will create a leak, if you do not unsubscribe. When returning an Observable, Angular will do it for you!

What I actually do is talk to the Amplify Auth class directly:

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router,
    @Inject(PLATFORM_ID) private platformId
  ) {}

  canActivate() {
    if (isPlatformBrowser(this.platformId)) {
      return Auth.currentAuthenticatedUser()
        .then(_user => {
          return true;
        })
        .catch(_err => {
          this.router.navigate(['/auth']);
          return false;
        });
    } else {
      return true;
    }
  }
}

I have to check for the Browser platform, because Amplify is not SSR compatible. But this will directly look at the saved value in localStorage.

[Ben]

Thanks for the suggestions!!

I've tried both, and still get 'not authenticated' on the first load/login of the app. The only thing I've been able to get to work is adding a timeout in the auth service to give it time to populate the localstorage. Here is a related github issue: github.com/aws-amplify/amplify-js/...

When the ADFS system redirects the user to the site with a auth code (instead of token) Amplify has to make multiple calls out to Cognito, and the canActivate is not waiting for the calls Amplify is making to return.

I'm going to try adding a loop in the auth service that checks for the localstorage before performing any .next actions. I'll let you know how it turns out and post my solution!

Edit: This seems to do the trick:

     private getAuthToken(i: number) {
      setTimeout(() => {
        const ampToken = localStorage.getItem('amplify-signin-with-hostedUI');
         if (!ampToken && i < 500) { //stopping the loop eventually if the user isn't logged in
           i++
           this.getAuthToken(i);
        }
     return this.checkAuthorization();
   }, 20); //Loops every 20 ms
 }

 private checkAuthorization() {
  Auth.currentAuthenticatedUser().then(
  (user: any) => { 
    this.setUser(user) },
  _err => console.log(_err)
  );
 }

Would love to hear any other ideas on waiting on the tokens to populate.

[Michael Gustmann]

One note about my previous comment. If you return an observable in a guard, you need to make sure it is completed. To do that, you can just add take(1):

return this.auth.isLoggedIn$.pipe(take(1));

What you can think about as well is to wait for rendering the app until the Auth.currentAuthenticatedUser() resolves.

Wrap the AppComponent's HTML with a

<ng-container *ngIf="authChecked">
   ... app-component.html stuff
</ng-container>

export class AppComponent {
  authChecked = false;
  constructor() {
    Auth.currentAuthenticatedUser().then(
      _user => (this.authChecked = true),
      _err => (this.authChecked = true)
    );
  }
}