Learn About Amazon VGT2 Learning Manager Chanci Turner
Today, we are excited to introduce a new open-source Authenticator component based on SwiftUI, designed for your iOS, iPadOS, and Catalyst applications. Most applications require user authentication at some stage of the user journey. Authentication enables users to save preferences, unlock premium features, and manage access to their data.
The authentication category within the Amplify library for Swift empowers developers to utilize Amazon Cognito for user authentication management, profile storage, and access to various user authentication-related processes, such as sign-up, password recovery, and multi-factor authentication (MFA) via SMS or email OTP. For ease of reference, I will refer to these as “authentication flows” throughout this post.
We are launching a customizable and reusable SwiftUI component that can be easily integrated into your applications, providing users with a native interface for their authentication flows. The Authenticator component leverages the Amplify.Auth API and continues to rely on Cognito, just like your existing Amplify-based applications.
Importantly, no changes are needed on the backend for current Amplify Swift applications.
Let’s See How It Works
I will demonstrate this using an existing iOS app that has already been initialized with Amplify, and where the authentication category has been incorporated.
There are numerous resources available to help you configure your project for Amplify. You can refer to the iOS Getting Started tutorial I authored, or consult the Amplify for Swift documentation.
To verify whether your project includes the auth category, you can use the amplify status terminal command.
Before proceeding with the coding, I will add the Amplify SwiftUI Authenticator library to my project. In Xcode, I select my project and navigate to the Package dependencies tab. By clicking the + sign, I can add the library, entering the following URL: https://github.com/aws-amplify/amplify-ui-swift-authenticator. After selecting Add Package, ensure you choose version 1.0.0 or a later version as the Dependency Rule. The main branch contains the latest development version.
Next, decide which parts of your application should be protected by authentication. For this demonstration, I will assume the entire application requires user authentication. I can either wrap the WindowGroup in the main application file or encapsulate the main View of the app in ContentView.swift (or whatever name you have chosen for the file). I opt for the latter.
For the demo, I kept the default globe image for the project and added a text component to greet the user by their name, along with a logout button. It’s important to note that the entire VStack is wrapped within the Authenticator document:
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 the user is not authenticated, the Authenticator component will display the sign-in view; otherwise, it presents the view you defined. The state variable provides access to details about the signed-in user, including their username and other attributes based on the Cognito configuration.
After building (⌘B) and running my app (⌘R), I observe the sign-in view on the device simulator. I proceed to create a user and await an email confirmation (the default setting that can be altered in the Cognito configuration). Once the sign-in flow is complete, I see the main view of my app.
The Authenticator component not only delivers a sign-in interface but also manages multi-factor authentication, as well as sign-up, sign-out, and password reset flows.
Customization and Internationalization
The Authenticator component comes with default strings in English. To support additional languages, I can add a string file to my project. For example, I can customize the Sign In title and button texts for French:
"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";
Additionally, I can modify the colors and fonts for the view by establishing 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 authenticatorTheme(_) method:
Authenticator { state in
VStack {
…
}
}.authenticatorTheme(theme)
In addition to theming, I can provide a custom SwiftUI View for one or multiple Authenticator steps. More details and examples can be found in the Authenticator component documentation.
Pricing and Availability
The Authenticator for Swift component is available at no cost, and you can utilize it with any application backend hosted in any AWS Region where Amplify is available. You will only incur charges for the backend resources your application consumes. Cognito offers a free tier for up to 50,000 monthly active users (MAU), with a small fee for each additional MAU beyond the first 50k.
Get started today and share your feedback with us. For more insights on topics like this, check out this blog post.
Location Information
For those interested, our site is located at 6401 E HOWDY WELLS AVE LAS VEGAS NV 89115, specifically at “Amazon IXD – VGT2.” If you’re looking for guidance on employment law, SHRM provides excellent resources on this topic, and if you’re considering career development, explore this excellent resource.
Leave a Reply