Hi,
Having trouble setting up AWS Amplify Authenication using the pre-built UI component which automatically renders a sign in page in an Ionic / Angular app.
Having followed the guide here:
https://docs.amplify.aws/ui/auth/authenticator/q/framework/ionic
It tells you to replace the contents of app.component.html with the following:
<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>
<div *ngIf="authState === 'signedin' && user" class="App">
<amplify-sign-out></amplify-sign-out>
<div>Hello, {{user.username}}</div>
<!-- This is where you application template code goes -->
</div>
Therefore I assumed that the previous contents:
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
would be placed inside as below:
<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>
<div *ngIf="authState === 'signedin' && user" class="App">
<amplify-sign-out></amplify-sign-out>
<div>Hello, {{user.username}}</div>
<!-- This is where you application template code goes -->
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
</div>
Implementing the <amplify-authenticator>
this way seems to interfere in how Ionic / Angular change detection works.
For example, a simple click function that changes some text in the home.page.html template no longer automatically updates the text.
home.page.ts
someText: String = '';
getSomeText(){
this.someText = 'Some text to write out';
console.log(this.someText);
}
home.page.html
<button (click)="getSomeText()">Get some text</button>
<p>{{ someText }}</p>
If I switch on Chrome DevTools, the text change is detected as I guess the viewport size change triggers it???
If I move the <ion-app>
back outside the <div>
then the someText
property will change on click of the button, as expected.
So where should the be placed when using the prebuilt UI from AWS Amplify?
Thanks.