AmplifyJS state ERROR TypeError: Cannot read property 'state' of undefined

Question

I am attempting to implement the following walkthrough in Amplify with an Angular cli app. https://aws-amplify.github.io/docs/js/angular#using-authentication-components-without-the-authenticator

• My app is a fresh angular cli build following the above walkthrough.

• My goal is to use the standalone auth components as mentioned in the above link.

• My issue is when trying to add <amplify-auth-sign-up></amplify-auth-sign-up>

The error message is:

My Component specifics the required set up of state as in the above link walkthrough.

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor(private amplifyService: AmplifyService) {
    this.amplifyService.setAuthState({
      state: 'signUp',
      user: null
    });
  }
}

auth.component.html

<amplify-auth-sign-up></amplify-auth-sign-up>

Any help much appreciated. Any questions / extra info, just let me know.

Answer 1

I was able to get it to work with the code below. The key is that the amplify individual components require a state to be set--which I was able to do using "authState" like below. The difference looks to be specifying the state expressly in the html in addition to the typescript.

Setting the authState (with user: null, state: 'signUp' like below) should be enough to remove the error and show the sign up form.

In the code here, I have also added some more items to demonstrate a bit more about how authState can be used.

In the below, the page will load with the sign up form.

Once the user enters their details and clicks sign up, the page will show the "confirm sign up" form, which is where the user enters a verification code that Cognito has sent to him/her (depending on your Cognito settings):

html:

    <amplify-auth-sign-up [authState]="authState" *ngIf="showSignUp"></amplify-auth-sign-up>
    <amplify-auth-confirm-sign-up [authState]="authState" *ngIf="showVerify"></amplify-auth-confirm-sign-up> 

ts:

    import { AmplifyService } from 'aws-amplify-angular';
    import { AuthState } from 'aws-amplify-angular/dist/src/providers';

    Export class AuthComponent implements OnInit {

    public authState: AuthState
    public newUser: any
    public state: any
    public showSignUp = true
    public showVerify = false

    constructor(public amplifyService: AmplifyService) {
         this.authState ={ //setting this should be enough to show the sign-up form and remove the error
           user: null,
           state: 'signUp' 
         }

         this.amplifyService.setAuthState(this.authState)  //this might not be required

         this.amplifyService.authStateChange$ //listening for state changes. For example, if you want to take action after the user has submitted the sign up form
                .subscribe(authState => {   
                    this.state = authState.state
                    this.newUser = authState.user
                    if (this.newUser){ //just an example of getting data from the stateChange. Not required.
                      this.username = this.newUser.username
                    }

                    if (this.state === 'confirmSignUp'){//get change in state
                       this.authState ={
                          user: authState.user,
                         state: 'confirmSignUp'
                       }
                       this.showSignUp = false
                       this.showVerify = true
                    }
                }
     }
 }

I have added some more detail for stuff like automatic sign in here.

Also note that I have found the Amplify components can show error messages to the user that I would not want the user to see--random, technical stuff. There may be a way to customize that (some discussion here), but be sure to test lots of different scenarios to understand what error messages might appear.