Example: Adding Documentation for Fully Custom 'SignUp' and 'Confirmation Code' Pages

[spencerdearman]

Similar to the template above, I think it would be helpful to provide documentation for how to create and manage fields within a fully custom SignUp and Confirmation Code Page.

Ex.

• If I wanted to create a Custom SignUp page that contains fields such as 'Username', 'Password', and 'ConfirmPassword', how would those fields be accessible from the state.
• In addition, for a page such as the Confirmation Code page (the page after an email is sent with the code), how could you access the proper field?
• Finally, if I wanted to switch to my Custom SignUpPage, the documentation for how to connect them together. I think that I am supposed to use state.move(to: <#T##AuthenticatorInitialStep#>) however it is unclear. With the example below, it is unclear how I would be able to move from one of my custom views into the other while still using Authenticator.

            Authenticator(
                signInContent: { state in
                    NewSignIn(state: state)
                }, signUpContent: { state in
                    NewSignUp(state: state)
                }
            ) { _ in

Thank you in advance!

[sebaland]

Hi @spencerdearman , thanks for opening this issue and providing feedback on our documentation. We will take note of your suggestions.

---

The general idea when providing custom content for any of the Authenticator steps is to observe the [Name]State object that is provided, set its @Published properties and invoke its auth operation.

For example, a customized Sign Up Confirmation view could look like this:

struct CustomConfirmSignUpView: View {
    @ObservedObject var state: ConfirmSignUpState // The state object

    var body: some View {
        VStack {
            TextField("Confirmation Code", text: $state.confirmationCode) // The confirmation code

            Button("Confirm Sign Up") {
                Task {
                    try? await state.confirmSignUp() // The auth operation
                }
            }
        }
    }
}

And you would set it when creating the Authenticator component:

Authenticator(
    confirmSignUpContent: { state in
        CustomConfirmSignUpView(state: state)
    }
) { state in
    // ...
}

---

Pretty much all of the states have the @Published properties that you need to set, but the Sign Up State is different because the sign up fields are dynamically generated based on:

• The attributes defined in the Cognito configuration
• The fields manually submitted by the user either with Authenticator.signUpFields(_:) or SignUpView(signUpFields:)

What you have available is a fields: [SignUpState.Field] property that will be populated when the view appears and will include all the fields you need to display, in order.

A SignUpState.Field is an @ObservableObject that has the SignUpField that it represents and the @Published property you need to set (called value). So a customized Sign Up view could look like this:

struct CustomSignUpView: View {
    @ObservedObject var state: SignUpState
    
    var body: some View {
        VStack {
            ForEach(state.fields, id: \.self) { field in
                SignUpField(field)
            }

            Button("Sign Up") {
                Task {
                    try? await state.signUp()
                }
            }
        }
    }
}

struct SignUpField: 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)
        /// ... etc
        }
    }
}

⚠️ Note: There was an issue preventing the sign up fields from being populated on custom views. This has been fixed in 1.0.5

---

Finally, you are correct that the way to transition between initial steps is by calling state.move(to:). For example, in your customized Sign In view you could add two Buttons to move the Authenticator to the Sign Up and Reset Password flows:

struct CustomSignInView: View {
    @ObservedObject var state: SignInState
    
    var body: some View {
        VStack {
            TextField("Username", text: $state.username)
            SecureField("Password", text: $state.password)

            Button("Sign In") {
                Task {
                    try? await state.signIn()
                }
            }
            
            Button("Sign Up") {
                state.move(to: .signUp)
            }
            
            Button("Forgot Password?") {
                state.move(to: .resetPassword)
            }
        }
    }
}

---

Please let me know if you have any other questions, or if something above is not clear.

Thanks!

[spencerdearman]

This is so great, I really appreciate the effort you put in explaining this! Thank you!

[spencerdearman]

Does the order matter when creating the Authenticator as it seems like my attributes are not populating for the custom Sign Up View? I have provided snippets of my code below.

Authenticator(
                    signInContent: { state in
                        NewSignIn(state: state, email: $email)
                    }, signUpContent: { state in
                        SignUp(state: state)
                    }, confirmSignUpContent: { state in
                        ConfirmSignUp(state: state)
                    }
                ) { state in

struct SignUp: View {
    @Environment(\.colorScheme) var currentMode
    @ObservedObject var state: SignUpState
    @State var appear = [false, false, false]
    private let screenWidth = UIScreen.main.bounds.width
    private let screenHeight = UIScreen.main.bounds.height

    var body: some View {
        ZStack {
            Image(currentMode == .light ? "LoginBackground" : "LoginBackground-Dark")
                .scaleEffect(0.7)

            VStack(alignment: .leading, spacing: 20) {
                Text("Sign Up")
                    .font(.largeTitle).bold()
                    .foregroundColor(.primary)
                    .slideFadeIn(show: appear[0], offset: 30)

                form.slideFadeIn(show: appear[2], offset: 10)
            }
            .padding(20)
            .padding(.vertical, 20)
            .background(.ultraThinMaterial)
            .cornerRadius(30)
            .modifier(OutlineModifier(cornerRadius: 30))
            .onAppear {
                animate()

            }
            .frame(width: screenWidth * 0.9)
        }
    }

    var form: some View {
        Group {
            VStack {
                ForEach(state.fields, id: \.self) { field in
                    SignUpField(field)
                }
                Button {
                    Task {
                        try? await state.signUp()
                    }
                } label: {
                    ColorfulButton(title: "Sign Up")
                }
            }
        }
    }

[spencerdearman]

I was able to resolve the issue, thank you!

[sebaland]

That's great to hear! I will be closing this issue then.
Please open a new one if you encounter other problems.

Thanks!