The code snippet below successfully enabled the functionality I was seeking. It became evident that individual components within Amplify necessitate a state to be defined, which I accomplished by utilizing "authState" as depicted below. The distinction lies in explicitly specifying the state both in the HTML and TypeScript.
By setting the authState (including user: null, state: 'signUp' as shown), the error can be eliminated, allowing the sign-up form to display.
In this code snippet, additional elements have been incorporated to illustrate further how authState can be utilized.
Upon execution, the page will initially load with the sign-up form visible.
After the user inputs their details and clicks on sign up, the page transitions to displaying the "confirm sign up" form. This stage requires the user to enter a verification code sent by Cognito (depending on your configuration):
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 ={ //specifying this is adequate for displaying the sign-up form and resolving the error
user: null,
state: 'signUp'
}
this.amplifyService.setAuthState(this.authState) //this step may not be necessary
this.amplifyService.authStateChange$ //tracking state changes. For instance, if post-submit action needs to be taken after the user signs up
.subscribe(authState => {
this.state = authState.state
this.newUser = authState.user
if (this.newUser){ //an illustration of extracting data from the stateChange. Optional.
this.username = this.newUser.username
}
if (this.state === 'confirmSignUp'){//monitoring state change
this.authState ={
user: authState.user,
state: 'confirmSignUp'
}
this.showSignUp = false
this.showVerify = true
}
}
}
}
For more insights on aspects like automatic sign-in, refer here.
A noteworthy observation is that Amplify components may display error messages containing technical information not intended for users. Customization options might exist (discussed here); however, rigorous testing across various scenarios is advisable to anticipate potential error prompts.