swiftuiaws-amplifyauthenticator

Amplify SwiftUI Authenticator UI, how to bind input field array to TextField


I am writing CustomSignUpView with Authenticator UI component in SwiftUI.

Can anyone give me an example of how to bind the PhoneNumber or Email fields to my TextField?

I tried the following but doesn't work

struct LoginScreen: View {
    var body: some View {
        Authenticator(
            signUpContent: { state in
                CustomSignUpView(state: state)
            }
        ) { _ in }
    }
}
struct CustomSignUpView: View {
   @ObservedObject var state: SignUpState
   var body: some View {
      TextField("number", text: $state.fields[0].value)
   }
}

Solution

  • I got the clean solution from Amplify team,

    struct CustomSignUpView: View {
        @ObservedObject var state: SignUpState
        
        var body: some View {
            VStack {
                ForEach(state.fields, id: \.self) { field in
                    CustomField(field)
                }
    
                Button("Sign Up") {
                    Task {
                        try? await state.signUp()
                    }
                }
            }
        }
    }
    
    struct CustomField: View {
        @ObservedObject private var signUpField: SignUpState.Field
        
        init(_ signUpField: SignUpState.Field) {
            self.signUpField = signUpField
        }
        
        var body: some View {
            /// Display the field accordingly, for example:
            switch signUpField.field.attributeType {
            case .username:
                TextField("Username", text: $signUpField.value)
            case .password:
                SecureField("Password", text: $signUpField.value)
            case .passwordConfirmation:
                SecureField("Confirm password", text: $signUpField.value)
            case .phoneNumber:
                TextField("Phone Number", text: $signUpField.value)
            case .email:
                TextField("Email", text: $signUpField.value)
            /// ... etc
            }
        }
    }