AWS Amplify Authenticator in Ionic - Need some basic help please

Hi,
As you might see, I am very new to Ionic / Angular and now AWS.

I am starting an application that makes use of the AWS Authenticator described here:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/ionic

So far I successfully installed everything and if I make use of the standard

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

the sign in works 100% and I can get the signed in users information.

Question 1:
How do I access that user.username (or any other user information) from other components in the application? As an example, if I follow the default route to the page “home” that was created with the blank template, how would I display the username on this page and not on the app.component.html page?

Question 2:
According to the tutorial this is placed in the app.component.xx
So if I understand correctly this gets loaded before anything else of the application.
Does this mean it has automatically added guards for routes?

Thank you in advance.

Hi,

I guess that you may have already found out the answers, but for anyone else, you can use this documentation to find out how to access the user within your app:

So within the component where you want to access some user data to display just call this and assign the return data to your user object defined in the conponent.

Regarding question 2, I’m having trouble deciding on where to place the code for the prebuilt UI component for sign in.

I added it the to app.component.html as follows:

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

<div *ngIf="authState === 'signedin' && user" class="App">
    <amplify-sign-out></amplify-sign-out>

   <ion-app>
     <ion-router-outlet></ion-router-outlet>
   </ion-app>

</div>

But this caused Ionic / Angular change detection to break when I called a simple click function on a button to write out some text in the home.page.html file.

So seems like <ion-app> should not be wrapped inside the <div> as suggested in the Amplify documentation:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/ionic

I’ve also looked at:

But this has a slightly different approach, but still doesn’t work very well. I’m still trying to figure out where this code should go…

Did you ever figure this out?

I got mine to work by doing this:

<ion-app>
    <amplify-authenticator [socialProviders]="['apple', 'google']">
      <ng-template amplifySlot="header">
        <div style="padding: var(--amplify-space-large); text-align: center">
          <img
            class="amplify-image"
            alt="Amplify logo"
            src="https://docs.amplify.aws/assets/logo-dark.svg"
          />
        </div>
      </ng-template>
      <ng-template 
        amplifySlot="authenticated" 
        let-user="user"
        let-signOut="signOut"
      >
        <ion-router-outlet></ion-router-outlet> 
      </ng-template>
    </amplify-authenticator>
</ion-app>

The one problem I have with this is that the tab bar does not render on mobile phones. It will show on desktop browser without any issues and oddly enough if I turn the phone horizontally it will show the tab bar but not vertically. So I’m just curious if you got this working?