Angular App Login functionality to work with guards, require a deprecated subscribe () method to be used in ui-angular

[Rajan-Gupta1]

On which framework/platform would you like to see this feature implemented?

Angular

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

As per Issue https://github.com/aws-amplify/amplify-ui/issues/2314#issuecomment-1191924995 a workaround was created to use the deprecated subscribe method on AuthenticatorService. This issue is created to track the fix of this issue and prevent the deprecated to be removed until a solution is developed and documented.

Please describe a solution you'd like.

Provide a non-deprecated way of making ui-angular work with an application which uses guards and to allow the user to navigate to a guarded route after a successful login.

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [X] ⚠️ This feature might incur a breaking change.

[thaddmt]

Thanks @Rajan-Gupta1 I'll work with the team to get this prioritized when possible!

[Rajan-Gupta1]

@wlee221 In the example provided with angular-material-admin what would be the best way to get attributes as to be able to get the
let cognitoUserAmplify : CognitoUserAmplify = this.authenticator.user; let attributes = cognitoUserAmplify.attributes;

Thanks

[wlee221]

Hi, sorry about the late comment!

Yes, that is the preferred way to get attributes. Maybe a getter function

get attributes(): CognitoAttributes {
  return this.authenticator.user?.attributes
}

so that it's reactive to value changes.

[Rajan-Gupta1]

Thanks

[wlee221]

Let's keep this open, since we are using this track the feature request 🙏

[wlee221]

Hi! Sorry this took a long time. AuthenticatorService now exposes .subscribe():

@Component()
class MyComponent implements OnInit, OnDelete {
  private unsubscribe: () => void;
  constructor(private authenticator: Authenticator, private route: Router) {}
  ngOnInit() {
    this.unsubscribe = authenticator.subscribe(({ authStatus }) => {
      if (authStatus === 'authenticated') {
        this.router.navigate(['/admin']);
      }
    }).unsubscribe;
  }
  ngOnDelete() {
    this.unsubscribe();
  }
}

to allow this use case. Please let us know if you have any additional concerns.