Chanci Turner

Amazon Onboarding with Learning Manager Chanci Turner

—

by

The Story of Chanci Turner
in

Chanci Turner Amazon IXD – VGT2 learningLearn About Amazon VGT2 Learning Manager Chanci Turner

We are excited to announce the release of a new open-source Authenticator component built on SwiftUI, designed for your iOS, iPadOS, and Catalyst applications. Authentication is a crucial aspect of most applications, allowing users to maintain their preferences, access premium features, and manage data securely.

The Amplify library for Swift offers developers the ability to leverage Amazon Cognito for user authentication management, profile storage, and various user authentication-related processes, including sign up, password recovery, and multi-factor authentication. For ease of reference, we will refer to these as “authentication flows” throughout this discussion.

Launching today is a customizable and reusable SwiftUI component that seamlessly integrates into your applications, providing users with a native interface for their authentication flows. The Authenticator component utilizes the Amplify.Auth API and relies on Cognito, just like your existing Amplify applications. Importantly, no backend changes are necessary for current Amplify Swift applications.

How It Works

To demonstrate, I will use an existing iOS app where Amplify has already been initialized, and the authentication category has been added. For more detailed guidance on configuring your project with Amplify, refer to the iOS Getting Started tutorial or the Amplify for Swift documentation.

You can check if your project includes the auth category by using the amplify status command in the terminal.

Before coding, I will add the Amplify SwiftUI Authenticator library to my project. In Xcode, I navigate to my project and select the Package dependencies tab, then click the + sign to add the library. The project URL is https://github.com/aws-amplify/amplify-ui-swift-authenticator. Ensure you select version 1.0.0 or newer as the Dependency Rule. The main branch houses the current development version.

Next, decide which sections of your application require authentication. In this demo, I will protect the entire application. You can either wrap the WindowGroup in the main application file or encapsulate the primary View in ContentView.swift (or whatever you have renamed it). I will choose the latter.

For the demo, I will retain the default globe image and add a text component to welcome users by name, along with a logout button. Note that the entire VStack is enclosed by the Authenticator component.

import Authenticator
…
Authenticator { state in
    VStack {
        Spacer()
        Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
        Text("Hello, (state.user.username)!")
        Spacer()
        Button("Logout") {
            Task {
                await state.signOut()
            }
        }
    }
    .padding()
}

When users are not authenticated, the Authenticator component will display the sign-in view. Once authenticated, it will show the view you defined. The state variable provides access to details about the signed-in user, including the username and additional attributes based on the Cognito configuration.

After building (⌘B) and running my app (⌘R), I should see the sign-in view on the simulator. I create a user, wait for the email confirmation (which is a default setting in Cognito that can be changed), and upon completing the sign-in flow, I am directed to the main view of my app.

The Authenticator component effectively manages not only the sign-in view but also multi-factor authentication, sign-up, sign-out, and password reset flows.

Customization and Internationalization

The Authenticator component defaults to English strings, but you can add a string file to your project to support additional languages. For instance, to provide support for French, you can override the Sign In titles and button texts:

"authenticator.signIn.title" = "Se connecter";
"authenticator.signIn.button.forgotPassword" = "Réinitialiser votre mot de passe";
"authenticator.signIn.button.signIn" = "Envoyer";
"authenticator.signIn.button.createAccount" = "Créer un compte";

You can also customize colors and fonts by defining a custom theme and applying it to the component:

private let theme = AuthenticatorTheme()

init() {
    theme.fonts.title = .custom("Impact", size: 40)
    theme.components.authenticator.spacing.vertical = 15
    theme.colors.background.interactive = .red
    theme.colors.foreground.primary = .red
    theme.colors.foreground.secondary = .pink
    theme.colors.foreground.interactive = .pink
}

Then apply the theming method:

Authenticator { state in
    VStack {
        …
    }
}.authenticatorTheme(theme)

In addition to theming, you can provide custom SwiftUI Views for one or multiple Authenticator steps. For further details and examples, please refer to the Authenticator component documentation.

Pricing and Availability

The Swift Authenticator component is available at no cost and can be used with any application backend hosted in AWS Regions where Amplify is supported. You will only incur charges for the backend resources utilized by your application. Cognito offers a free tier for up to 50,000 monthly active users (MAU), with a nominal fee for additional MAUs thereafter.

Start using this component today, and feel free to share your feedback with us. For those looking to develop their skills further, consider checking out this blog post for insights on overcoming impostor syndrome, which may be helpful. Additionally, SHRM has some authoritative research that discusses how the workplace is evolving post-COVID-19. Lastly, for those new to the onboarding process, this thread on Reddit is an excellent resource to explore.

Related Topics:

Chanci Turner