Set up Amplify Auth

Amplify Auth is powered by Amazon Cognito. Cognito is a robust user directory service that handles user registration, authentication, account recovery, and other operations. Review the concepts to learn more.

To get started with defining your authentication resource, open or create the auth resource file:

amplify/auth/resource.ts

1import { defineAuth } from "@aws-amplify/backend"
2
3/**
4 * Define and configure your auth resource
5 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
6 */
7export const auth = defineAuth({
8  loginWith: {
9    email: true,
10  },
11})

By default, your auth resource is scaffolded using email as the default login mechanism. You can also configure your auth resource to allow signing in with phone numbers or an external provider such as Google, Facebook, Amazon, or Sign in with Apple.

Note: At a minimum you will need to pass a loginWith value to set up how your users sign in to your app. Signing in with email and password is configured by default if you do not provide any value.

Deploy auth resource

After you have chosen and defined your authentication resource, run the following command to create your resource in your personal cloud sandbox.

Terminal

npx ampx sandbox

After a successful deployment, this command also generates an outputs file (amplify_outputs.json) to enable your frontend app to connect to your backend resources. The values you configure in your backend authentication resource are set in the generated outputs file to automatically configure the frontend Authenticator connected component.

Connect your application code to your auth resource

Creating and correctly implementing the sign-in flow can be challenging and time-consuming. Amplify's Authenticator UI component streamlines this by enabling you to rapidly build the entire authentication flow for your app. The component works seamlessly with configuration in amplify/auth/resource.ts to automatically connect with your backend resources.

Amplify has pre-built UI components for React, Vue, Angular, React Native, Swift, Android, and Flutter. In this guide, we are focusing on those for web applications.

Prerequisites

An application with Amplify libraries integrated and a minimum target of any of the following:

iOS 13.0, using Xcode 14.1 or later.
macOS 10.15, using Xcode 14.1 or later.
tvOS 13.0, using Xcode 14.3 or later.
watchOS 9.0, using Xcode 14.3 or later.
visionOS 1.0, using Xcode 15 beta 2 or later. (Preview support - see below for more details.)

visionOS support is currently in preview and can be used by targeting the visionos-preview branch. As new Xcode 15 beta versions are released, the branch will be updated with any necessary fixes on a best effort basis.

For more information on how to use the visionos-preview branch, see Platform Support.

Note: To use Amplify Auth in a macOS project, you'll need to enable the Keychain Sharing capability. In Xcode, navigate to your application target > Signing & Capabilities > + Capability, then select Keychain Sharing.

This capability is required because Auth uses the Data Protection Keychain on macOS as a platform best practice. See TN3137: macOS keychain APIs and implementations for more information on how Keychain works on macOS and the Keychain Sharing entitlement.

For more information on adding capabilities to your application, see Xcode Capabilities.

Move the generated files to your project. You can do this by dragging and dropping the files to your project.

Dialog appears when users drag and drop the generated files into Xcode. It displays targets, added folders, and destination options. The default settings should be sufficient for drag and drop.

Open your project in Xcode and select File > Add Packages... and add the following dependencies:

Amplify Library for Swift: Enter its GitHub URL, select Up to Next Major Version and click Add Package
- Select the following libraries:
  - Amplify
  - AWSCognitoAuthPlugin
Amplify UI Swift - Authenticator: Enter its GitHub URL, select Up to Next Major Version and click Add Package
- Select the following library:
  - Authenticator

Once you are done, add the API dependencies to your project. Select File > Add Package Dependencies... and add the AWSAPIPlugin.

Shows the Amplify API library for Swift selected

Next, update the init part of your MyAmplifyAppApp.swift file with the following code:

MyAmplifyApp.swift

1import Amplify
2import Authenticator
3import AWSCognitoAuthPlugin
4import SwiftUI
5
6@main
7struct MyApp: App {
8    init() {
9        do {
10            try Amplify.add(plugin: AWSCognitoAuthPlugin())
11            try Amplify.configure(with: .amplifyOutputs)
12        } catch {
13            print("Unable to configure Amplify \(error)")
14        }
15    }
16
17    var body: some Scene {
18        WindowGroup {
19            Authenticator { state in
20                VStack {
21                    Text("Hello, \(state.user.username)")
22                    Button("Sign out") {
23                        Task {
24                            await state.signOut()
25                        }
26                    }
27                }
28            }
29        }
30    }
31}

Once you add the Authenticator component to your app, you can test the sign-up, sign-in, and sign-out functionality. You can also customize the Authenticator connected component to adjust colors and styling as needed.

Next steps

Now that you have completed setting up authentication in your Amplify app with email and password, you may also want to add some additional features. We recommend you learn more about:

Concepts