Angular with amplify-authenticator + onAuthUIStateChange breaks angular refresh about amplify-ui HOT 10 CLOSED

After some googling (quite hidden, so that unfortunately I lost the link and I can't cite) I went with the following solution of changing the 'original hack' of

this.cdRef.detectChanges()

in the onAuthUIStateChange handling, as stated in the official Angular Amplify docu, towards

this.ngZone.run(() => this.cdRef.detectChanges());

after adding the ngZone reference to the constructor.

Of course, this seems to be an even stronger hack than the original one, but at least it works now.

from amplify-ui.

Hello, sorry about the silence here -- we have released @aws-amplify/[email protected] which adheres to Angular best principles than the previous web component version. Please see

• https://ui.docs.amplify.aws/getting-started/installation?platform=angular
• https://ui.docs.amplify.aws/components/authenticator?platform=react#quick-start

to get started, thanks 🙏

from amplify-ui.

Same for me, unfortunately. Is there some update or does anyone have a smart workaround idea?
What I finally did is to log-in, log-out, etc. manually and create my own components.

from amplify-ui.

Also seeing the same issue. Thanks for raising.

from amplify-ui.

Is there some update about this issue?

from amplify-ui.

Same for me, unfortunately. Is there some update or does anyone have a smart workaround idea?

from amplify-ui.

I had to deal with my own components too!

from amplify-ui.

@rawinkler Thank you so much , I don't know about ngZone or detectChanges but this worked.
Actually
I wanted to call my server api (Lets say getMyUsername) that resolves cognito id to username in my server's database
Then load the component which we wrap like

<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>

<div *ngIf="authState === 'signedin' && user" class="App">
    <amplify-sign-out></amplify-sign-out>
    <!-- This is where you application template code goes -->
<my-next-component><my-next-component>  
</div>

Because I am not using auth guard, I was wondering how to wait for getMyUsername to finish and pass the username to my-next-component, I have this in app.component.html

so, in onAuthUIStateChange, I needed some wait to finish for getMyUsername before moving to my-next-component

To solve this, I subscribed to getMyUsername and set load:boolean = true;
and added load in following div in app.html

<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>

<div *ngIf="load && authState === 'signedin' && user" class="App">
    <amplify-sign-out></amplify-sign-out>
    <!-- This is where you application template code goes -->
<my-next-component><my-next-component>  
</div>

Let me know how can we achieve something that I wanted to do in better way, because I think this is not the way, Right?

How can I get the control when signin or signup of ui component is clicked and what happens after that , where is code of it and how to customize it for my use-case.

Thanks community , you're always there. UNITY IS PERFECT

from amplify-ui.

I was never able to even get the ngOnDestroy() to be hit once the ngIf kicked in - so I just ended up using the Hub to listen for auth events: https://docs.amplify.aws/guides/authentication/listening-for-auth-events/q/platform/js/

import { Hub } from 'aws-amplify';

Hub.listen('auth', (data) => {
  switch (data.payload.event) {
    case 'signIn':
        console.log('user signed in');
        break;
    case 'signUp':
        console.log('user signed up');
        break;
    case 'signOut':
        console.log('user signed out');
        break;
    case 'signIn_failure':
        console.log('user sign in failed');
        break;
    case 'configured':
        console.log('the Auth module is configured');
  }
});

from amplify-ui.

@wlee221 I have spent time looking at the documentation at the link provided above for angular but unable to determine how I can call a method after a successful login.
Is there a sample app of angular which is available?

from amplify-ui.