DEV Community

AWS Amplify Auth & Angular RxJS Simple State Management

Michael Gustmann on April 02, 2019

Recent updates to the aws-amplify hub make it easier to listen to (AWS Cognito) auth state changes without using the aws-amplify-angular package. I...

Read full post

Ben • Aug 22 '19

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 • Aug 27 '19

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 • Aug 27 '19

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 • Aug 28 '19

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 • Aug 28 '19 • Edited

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 • Sep 6 '19

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)
    );
  }
}

Jason Belcher • Aug 6 '19

BehaviourSubjects are so powerful for state management. I find that in most cases I never need Redux or NgRx when utilizing behaviorSubjects to implement dataStorage services. Cool article. I found it searching for tips on using Amplify with Angular. Cheers!

Hanna Becker • Jan 20 '23

Thanks for sharing this awesome solution!

2 things I needed to change:

We use social providers on top of the native Cognito auth. In that case the 'signIn' event does not include the data needed for setting the user, and we instead need to make another call to Auth.currentAuthenticatedUser() to retrieve it.
Treating every event besides 'signIn' as if it were a logout is something we tripped over in the past, as we saw an occasional token refresh event submitted on that channel, as well. We therefore specificallty handle 'signIn', 'signOut', and 'oAuthSignOut' events, and ignore all other events.

Freddie • Jan 27 '20

This post was amazing! It really helped me get my feet underneath me with the AWS library. I do have a simple question. Are you getting errors with executing code in the Hub.Listen() callback using THIS? I nested Auth.CurrentAuthenticatedUser into that callback block and that code never gets executed if I use THIS in the Auth.CurrentAuthenticatedUser. Thanks!

Freddie • Jan 28 '20

Figured it out for anyone whoever discovers this comment later ..... at the time of this post, executing a behavior subject inside the Hub.Listen callback, you must use NgZone so angular can detect there is a change.

harmohan-a • Sep 26 '19

this is so good! its everything the way i wanted to implement laid out in a platter.
going through amplify docs wasnt fun.

thanks