New – Amplify SwiftUI-based Authenticator Component

Today we are making available a new SwiftUI-based open-source Authenticator component for your iOS, iPadOS, and Catalyst applications.

Most applications have a requirement to authenticate their user at some point or other of the user flow. Authentication allows users to save their preferences, to unlock premium features, or control access to data.

The authentication category of the Amplify library for Swift allows developers to use Amazon Cognito to manage user authentication, store user profiles, and provide access to a variety of user authentication-related flows, such as sign up, forget password, sign in with multiple factors authentication, SMS or email-based OTP, password reset, etc. For simplicity, I am calling these “authentication flows” in the reminder of this post.

Today, we are launching a customizable and reusable SwiftUI-based component that you can easily embed into your applications to provide your users with a native GUI for their authentication flows. The Authenticator component uses the Amplify.Auth API underneath and relies on Cognito as do your existing Amplify-based applications.

No change is required on the backend for existing Amplify Swift applications.

Let’s See How It Works
I start this demo with an existing iOS app for which Amplify is already initialized. The authentication category is added to the application.

There are multiple resources explaining how to get your project configured for Amplify. You can check the iOS Getting Started tutorial I wrote, or the Amplify for Swift documentation.

To check if your project already has the auth category or not, you can use the amplify status terminal command.

Before writing code, I add the Amplify SwiftUI Authenticator library to my project. In Xcode, I select my project and choose the Package dependencies tab. I select the + sign to add the library.

I enter the project URL on the top right side: https://github.com/aws-amplify/amplify-ui-swift-authenticator and I select Add Package.

Be sure to select version 1.0.0 or more recent as Dependency Rule. The main branch contains the current development version.

Then, decide what part of your application has to live behind the authentication wall. For this demo, I assume the entire application is protected with user authentication. I can either wrap the WindowGroup in the main application file, or wrap the main View of the app in ContentView.swift (or whatever you renamed the file). I choose the later.

For the demo, I kept the default project globe image, and I add a text component to greet the user by his or her name and a logout button.

Note that the entire VStack is wrapped by 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 displays the sign in view. Otherwise, it displays the view that you defined.

The state variable allows your app to access details about the currently signed in user, such as the username and other attributes, depending on the Cognito configuration.

I build (⌘B) and run my app (⌘R) and I should see the sign in view on the device simulator.

I create a user. I wait to receive an email confirmation (that’s a default I can change in the Cognito configuration) and when the sign in flow completes, I see the main view of my app.

The Authenticator component not only provides a sign in view for my app, but also manages the multi factor authentication flow, and the sign up, sign out, and reset password flows.

Customization and Internationalization
The Authenticator component provides default strings for the English language. I can add a string file to my project to provide additional strings for other languages.

For example, I can override the Sign In title and buttons texts to add support for the French language:

"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";

I can also customize the colors and fonts of the view 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
    }

And 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. The details and more examples are available in the Authenticator component documentation.

Pricing and Availability
The Authenticator for Swift component is available free of charge, and you can use it on any application backend hosted in any AWS Region where Amplify is available.

You are being charged only for the backend resources your application consumes. Cognito has a free tier for 50,000 monthly active users (MAU), and a small charge per additional MAU after the first 50k.

Get started today and share your feedback with us.